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(SearchInputComponentnullable)

Replaces the search bar component with a custom search component

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

export const applyCustomCode = externalCodeSetup => {

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

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

   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)

}