Implement handleTextChange into React Native Elements custom search bar component

Question

Implement handleTextChange into React Native Elements custom search bar component

I need help with passing the handleTextChange function in the SearchBarCustom component. When I try to remove onChangeText={setValue} and add onchange={handleTextChange}, I am unable to type anything in the search bar. How can I successfully pass in the handleTextChange function?

const SearchScreen = ({}: StackNavigationProps<Routes, "SearchScreen">) => {  

  
  const SearchBarCustom = (props) => {
    const [value, setValue] = useState('');
    return <SearchBar value={value} onChangeText={setValue} {...props} />;
  };
    


  return (
      <ScrollView style={styles.container} contentInsetAdjustmentBehavior='automatic' stickyHeaderIndices={[0]}>
        <View>
        <GoogleAutoComplete apiKey={apiKey} debounce={500} minLength={1} queryTypes={'(cities)'} >
          {({ handleTextChange, locationResults}) => (
            <React.Fragment>
              <View style={styles.inputWrapper}>
                <SearchBarCustom
                  onChangeText={handleTextChange} // ???
                  containerStyle={{ backgroundColor: '#f3f2f8'}}
                  inputContainerStyle={{ backgroundColor: '#e3e3e9', height: 30}}
                  placeholderTextColor = '#96969b'

                  placeholder="Search"
                  platform="ios"
                />
                </View>
              <ScrollView>
                {locationResults.map(el => (
                  <LocationItem
                  { ...el}
                  key={el.id}
                  />
                ))}
              </ScrollView>
            </React.Fragment>
          )}

        </GoogleAutoComplete>
        
        </View>
        
      </ScrollView>
    );
};

javascript typescript react-native expo

Answer 1

Answer №1

This is an example of a controlled component in React. The React documentation on controlled components explains how the local state is connected to user input.

When managing the input value this way, you would need to handle it differently. You may write useEffect code like this...

  const SearchBarCustom = (props) => {
    const [value, setValue] = useState('');
    useEffect(() => {
       handleTextChange(value)
    }, [value])
    return <SearchBar value={value} onChangeText={setValue} {...props} />;
  };

Refer to https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect to understand how the useEffect function only runs when the items in its dependency array change (in this case, the array is just [value] so it will re-run the effect function only if value changes.

Answer 2

This is an example of a controlled component in React. The React documentation on controlled components explains how the local state is connected to user input.

When managing the input value this way, you would need to handle it differently. You may write useEffect code like this...

  const SearchBarCustom = (props) => {
    const [value, setValue] = useState('');
    useEffect(() => {
       handleTextChange(value)
    }, [value])
    return <SearchBar value={value} onChangeText={setValue} {...props} />;
  };

Refer to https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect to understand how the useEffect function only runs when the items in its dependency array change (in this case, the array is just [value] so it will re-run the effect function only if value changes.

Implement handleTextChange into React Native Elements custom search bar component

Answer №1

Similar questions

The Javascript Ajax loader gif is malfunctioning

Obtain a range of dates within a specified timeframe by utilizing JavaScript

Issues with using hooks in a remote module in Webpack 5 module federation

Displaying an error message in a spreadsheet cell

Changing component properties using router-view in Vue.js is the recommended approach

Using iScroll without animation by using scrolltoelement on an iPhone PhoneGap application

Observer function simulated by SinonStub

What is the best way to form a new type that encompasses all shared properties found within a union of types?

"Strategies for effectively utilizing the .find method to locate specific users within a database

Error message: Trying to use the data type 'String' as an index in the React dynamic component name map won't work

The middleware is causing disruptions in the configuration of redis and express

Searching for a particular Prettier setting

What strategies should be employed to manage data-driven input in this particular scenario?

What is the best way to transfer $scope to a service in angular.js?

Utilizing Google Maps API to update ImageMapType Overlay

Issue with JS npm package: Unable to use import statement outside a module

Leveraging Enums in Angular 8 HTML template for conditional rendering with *ngIf

Tap to navigate to queued sections on click

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

Adding and removing controls on Google Maps in real-time