import * as React from "react";
/**
* @typedef {Object} SearchProps
* @property {String} searchTerm
* @property {Function} setSearchTerm
* @property {Object} inputProps
* @property {Object} global App global style
* @property {Object} colors App colors
* @property {Animated.Node<number>} animatedHeight
* @property {Object} containerStyle Default search component container style
* @property {Function|Boolean} renderAdvancedSearch
* @property {TranslationFunction} t
* @property {Object} cancelSearchTextStyle Default cancel component style
* @property {Boolean} lightStyle Returns `true` to suggest that component should have a light theme
* @property {React.ComponentType} SearchComponent Renders the default search component
*/
/**
* @typedef {Function} SearchInputComponent
* @param {SearchProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @typedef {Function} BeforeSearchInputComponent
* @param {SearchProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @typedef {Function} AfterSearchInputComponent
* @param {SearchProps} props
* @return {?React.ComponentType<any>}
*/
/**
* @class
* 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.
* @example
* externalCodeSetup.searchScreenApiHooks.METHOD_NAME
*/
export class SearchScreenApi {
SearchInputComponent = null;
/**
* Replaces the search bar component with a custom search component
* @method
* @param {React.ComponentType<SearchInputComponent>} 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
* );
* }
*/
setSearchInputComponent = SearchInputComponent => {
this.SearchInputComponent = SearchInputComponent;
};
BeforeSearchInputComponent = null;
/**
* You can use this to add a component before the search bar.
* @method
* @param {React.ComponentType<BeforeSearchInputComponent>} BeforeSearchInputComponent
* @example
* const CustomBeforeSearchInputComponent = props => {
* return <Text>Please type a word in the search bar to start searching</Text>
* }
* externalCodeSetup.searchScreenApiHooks.setBeforeSearchInputComponent(CustomBeforeSearchInputComponent)
*/
setBeforeSearchInputComponent = BeforeSearchInputComponent => {
this.BeforeSearchInputComponent = BeforeSearchInputComponent;
};
AfterSearchInputComponent = null;
/**
* You can use this to add a component after the search bar.
* @method
* @param {React.ComponentType<AfterSearchInputComponent>} AfterSearchInputComponent
* @example
* const CustomAfterSearchInputComponent = props => {
* return <Text>Please type a word in the search bar to start searching</Text>
* }
* externalCodeSetup.searchScreenApiHooks.setAfterSearchInputComponent(CustomAfterSearchInputComponent)
*/
setAfterSearchInputComponent = AfterSearchInputComponent => {
this.AfterSearchInputComponent = AfterSearchInputComponent;
};
}
Source