App Codex Version: 1.0.0

Class

SearchScreenApi

SearchScreenApi()

Screen Screen Hooks. Instance name: searchScreenApiHooks

You can use this hook to customize the search bar options in your app. For example, you can add a component before/after the search bar or replace the search bar with a custom search component.

Constructor

# new SearchScreenApi()

Example
externalCodeSetup.searchScreenApiHooks.METHOD_NAME

Methods

# setAfterSearchInputComponent(AfterSearchInputComponent)

You can use this to add a component after the search bar.

Parameters:
Name Type Description
AfterSearchInputComponent React.ComponentType.<AfterSearchInputComponent>
Example
const CustomAfterSearchInputComponent = props => {
 return <Text>Please type a word in the search bar to start searching</Text>
}
externalCodeSetup.searchScreenApiHooks.setAfterSearchInputComponent(CustomAfterSearchInputComponent)

# setBeforeSearchInputComponent(BeforeSearchInputComponent)

You can use this to add a component before the search bar.

Parameters:
Name Type Description
BeforeSearchInputComponent React.ComponentType.<BeforeSearchInputComponent>
Example
const CustomBeforeSearchInputComponent = props => {
 return <Text>Please type a word in the search bar to start searching</Text>
}
externalCodeSetup.searchScreenApiHooks.setBeforeSearchInputComponent(CustomBeforeSearchInputComponent)

# setSearchInputComponent(SearchInputComponent)

Replaces the search bar component with a custom search component

Parameters:
Name Type Description
SearchInputComponent React.ComponentType.<SearchInputComponent>
Example
...
import Animated from "react-native-reanimated";

export const applyCustomCode = externalCodeSetup => {

  const CustomSearchInputComponent = props => {
      const {
          global,
          colors,
          searchTerm,
          setSearchTerm,
          inputProps,
          SearchComponent
      } = props;

      const customInputProps = {
          ...inputProps,
          placeholder: `Search the list by typing words such as "bar", "foo", etc... `
      };

      const renderDefault = true;

      if (renderDefault) {
          return <SearchComponent {...props} />;
      } else {
          return (
              <Animated.View
                  style={[
                      {
                          flexDirection: "row",
                          alignItems: "center"
                      }
                  ]}
              >
                  <TextInput
                      style={[
                          global.searchBarText,
                          {color: colors.searchColor, height: 30}
                      ]}
                      onChangeText={setSearchTerm}
                      value={searchTerm}
                      placeholderTextColor={colors.searchColor}
                      autoCapitalize={"none"}
                      returnKeyType="done"
                      highlightColorAndroid="transparent"
                      autoCorrect={true}
                      autoFocus={false}
                      {...customInputProps}
                  />
              </Animated.View>
          );
      }
  };
  externalCodeSetup.searchScreenApiHooks.setSearchInputComponent(
      CustomSearchInputComponent
  );
}