How to update the supports of the initial route in the NavigatoriOS component?

Question

This question is about strategies for transferring data objects around multiple components.

In the screenshot below, I have NavigatorIOS with the original ListComponent route. Its in the Side-Menu , which displays the Filters component. Side-Menu and Filters are currently open.

My goal is that when the user changes things into Filters , I want to update the ListComponent .

I could use a singleton object to store filters, but I still need to find a way to tell ListComponent that they have changed.

var defaultFilters = { invited: true, joined: false, public: true, private: false, } class MainTab extends Component { constructor( props ){ super(props); this.props.filters = defaultFilters; } render () { var onFilterChange = function ( filters ) { console.log("filters changed"); }; var filtersComponent = ( <Filters filters={this.props.filters} onFilterChange={onFilterChange.bind(this)} /> ); return ( <SideMenu menu = { filtersComponent } touchToClose={true} openMenuOffset={300} animation='spring'> <NavigatorIOS style={styles.container} initialRoute={{ title: 'List', component: ListComponent }} /> </SideMenu> ); } } 

solvable

  var onFilterChange = function ( filters ) { console.log("filters changed"); this.refs.navigator.replace({ title: 'List', component: ListComponent, passProps: { filters: filters } }); }; <NavigatorIOS ref='navigator' ... /> 

Answer 1

The route has the passProps parameter, which accepts the props object, so you pass the props to the component in the navigator. You can change the MainTab state in onFilterChange and pass this through passProps . Alternatively, you can see the replace method in the navigator.

https://facebook.imtqy.com/react-native/docs/navigatorios.html

Answer 2

Using OP, joshua-lieberman , same answer.

He worked for me using the Navigator

 var onFilterChange = function ( filters ) { console.log("filters changed"); this.refs.navigator.replace({ title: 'List', component: ListComponent, passProps: { filters: filters } }); }; ... <Navigator ref='navigator' ... /> 

I use it in the DidMount component

 componentDidMount() { this.changeInitialRoute(this.refs.navigator); } changeInitialRoute(navigator) { const valet = this.props.valet; if (valet && valet.user_id && valet.token) { console.log('valet ready', this.props); navigator.resetTo({title: 'Home', index: 0}); } else { navigator.resetTo({title: 'Login', index: 0}); } }