react-native tab navigator search box

Question

I'm using tab navigator and I have a router setting up all off the tabs and I'm using react-native-elements to add a search box into the header of the root tabs:

export const Root = StackNavigator({
  Tabs: {
    screen: Tabs,
    navigationOptions: {
    header: <SearchHeader />
  }
  },
}, {
  mode: 'modal',
});

I'm trying to change the placeHolder text in the search bar depending on which tab is focused. Any ideas how I might achieve that?

I was trying to pass down a state from the router but it wasn't working.

return (


 <SearchBar
 noIcon
 containerStyle={{backgroundColor:'#fff'}}
 inputStyle={{backgroundColor:'#e3e3e3',}}
 lightTheme = {true}
 round = {true}
 placeholder={this.props.data}
 placeholderTextColor = '#000'
  />


);

Answer 1

Please try like this:

// SearchHeader.js
const SearchHeader = ({ data }) => {

  return (
    <SearchBar
      noIcon
      containerStyle={{backgroundColor:'#fff'}}
      inputStyle={{backgroundColor:'#e3e3e3',}}
      lightTheme = {true}
      round = {true}
      placeholder={data}
      placeholderTextColor = '#000'
    />
  );

});

export default SearchHeader;

And this:

// Navigator
export const Root = StackNavigator({
  Tabs: {
    screen: Tabs,
    navigationOptions: {
    header: <SearchHeader data={'Tab1'} />
  }
  },
}, {
  mode: 'modal',
});

I'm destructuring the props your component receives and set your placeholder as the data prop that has been sent to it.

Let me know if it works.

Hope it helps.