How to update props of initial route in a NavigatoriOS component?

Question

This question is about strategies for passing data objects around several components.

In the screenshot below, I have a NavigatorIOS with an initial route of a ListComponent. Its in a Side-Menu that displays a Filters component. Currently, the Side-Menu is open and Filters is visible.

My goal is that when the user changes things in 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 the ListComponent that they 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>
    );
}
}

Solved

    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 a passProps option which accepts an object of props, so that's how you pass props into the component in the navigator. You could potentially change your MainTab state in onFilterChange and pass that down via passProps. Alternatively you may want to look at the replace method on the navigator.

https://facebook.github.io/react-native/docs/navigatorios.html