SearchBar text prop

[salisuabubakar]

Hello, Thank you very much for the wonderfull job you are doing with The Navigation Router. I have used Wix RNN and RN but i can confidently tell that by far The Navigation Router is the best interms of performace. I was very very impressed. I moved an app from Wix RNN to The Navigation Router and the performance was about 30 percent.

I have an issue with the SearchBar. Can you explain wha the text prop is used for and if possible can you share a code with example of how to use it? Am very new to React Native. Thanks

      <SearchBar
        **text={text}**
        autoCapitalize="none"
        obscureBackground={false}
        barTintColor={() => 'white'}
        onChangeText={text => onChangeText(text)}>
        <ScrollView></ScrollView>
      </SearchBar>
    </NavigationBar>

[grahammendick]

Hey @salisuabubakar. Thank you so much. You’ve really put a smile on my face. I’m surprised you only saw a 30% improvement ;)

The text prop works the same as the value prop on the React Native TextInput component. You need useState to hold the text.

const [text, onChangeText] = useState('');

<SearchBar
  text={text}
  onChangeText={onChangeText}>
</SearchBar>

There’s a zoom sample that shows the SearchBar in action. I’ve recently updated the SearchBar component to support the Material 3 Search Bar from android. If you want to take advantage of this, like in the zoom sample, then you should update to the latest navigation-react-native and use a Material 3 Theme.

Any questions let me know. I’m always happy to help.

[salisuabubakar]

Hi @grahammendick ,
I could not get android to display the searchBar. Infact when i enable toolbar in the SearchBar android automatically crash. Kindly help me. Thanks

[grahammendick]

You have to set the navigationImage prop on the NavigationBar. The Material 3 SearchBar expects one

[grahammendick]

@salisuabubakar You get it working?

[salisuabubakar]

Yes sorry for the late response. It’s working perfectly. Thanks

[grahammendick]

@salisuabubakar you don't have to set the navigationImage prop anymore. The SearchBar uses the default one provided by Android instead