Your example is a bit vague so I try to explain as much as I can.

There is 2 different ways to pass properties to screens (except redux implementation).

1) navigate action

You can pass parameters to navigated screen with passing params argument to the screen.

navigation.navigate({routeName, params, action, key}) OR
navigation.navigate(routeName, params, action)

routeName - A destination routeName that has been registered somewhere in the app's router

params - Params to merge into the destination route

action - (advanced) The sub-action to run in the child router, if the screen is a navigator. See Actions Doc for a full list of
supported actions.

key - Optional identifier of what route to navigate to. Navigate back to this route, if it already exists

Sample

this.props.navigate('Profile', { name: 'Brent' })

2) screenProps

You can pass a global parameter to the navigation which can be available in every screen for that navigation.

screenProps - Pass down extra options to child screens

Sample

const SomeStack = createStackNavigator({

  // config

});



<SomeStack

  screenProps={/* this prop will get passed to the screen components as this.props.screenProps */}

/>

I have created a small sample app which I am guessing you are trying to achieve.

const Tab = ({name, searchValue}) => (

  <View style={styles.tabContainer}>

    <Text>{name}</Text>

    <Text>{`Searching: ${searchValue || '...'}`}</Text>

  </View>

);



const Wines = (props) => (<Tab name=Wines Page searchValue={props.screenProps.searchValue} />);

const Stores = (props) => (<Tab name=Stores Page searchValue={props.screenProps.searchValue} />);

const Vineyards = (props) => (<Tab name=Vineyards Page searchValue={props.screenProps.searchValue} />);

const Restaurants = (props) => (<Tab name=Restaurants Page searchValue={props.screenProps.searchValue} />);



const Navigator = createMaterialTopTabNavigator({

    Wines,

    Stores,

    Vineyards,

    Restaurants

});



export default class App extends Component {

  state = {

    text: ''

  }

  changeText = (text) => {

    this.setState({text})

  }

  clearText = () => {

    this.setState({text: ''})

  }

  render() {

    return (

      <View style={styles.container}>

        <SearchBar

          lightTheme

          value={this.state.text}

          onChangeText={this.changeText}

          onClearText={this.clearText}

          placeholder='Type Here...' />

        <Navigator screenProps={{searchValue: this.state.text}} />

      </View>

    );

  }

}