title: How to update props of initial route in a NavigatoriOS component?
body: <p>This question is about strategies for passing data objects around several components. </p>
  
  <p>In the screenshot below, I have a <strong>NavigatorIOS</strong> with an initial route of a <strong>ListComponent</strong>. Its in a <strong>Side-Menu</strong> that displays a <strong>Filters</strong> component. Currently, the <strong>Side-Menu</strong> is open and <strong>Filters</strong> is visible.</p>
  
  <p>My goal is that when the user changes things in <strong>Filters</strong>, I want to update the <strong>ListComponent</strong>.</p>
  
  <p>I could use a singleton object to store filters, but I still need to find a way to tell the <strong>ListComponent</strong> that they changed. </p>
  
  <p><img src="https://i.stack.imgur.com/t6q38.png" alt="enter image description here"></p>
  
  <pre><code>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 = ( &lt;Filters filters={this.props.filters} onFilterChange={onFilterChange.bind(this)} /&gt; );
  
      return (
          &lt;SideMenu menu = { filtersComponent } touchToClose={true} openMenuOffset={300} animation='spring'&gt;
              &lt;NavigatorIOS 
                  style={styles.container}
                  initialRoute={{
                      title: 'List',
                      component: ListComponent
                  }}
  
                  /&gt;
          &lt;/SideMenu&gt;
      );
  }
  }
  </code></pre>
  
  <h1>Solved</h1>
  
  <pre><code>    var onFilterChange = function ( filters ) {
          console.log("filters changed");
  
          this.refs.navigator.replace({
              title: 'List',
              component: ListComponent,
              passProps: {
                filters: filters
              }
            });
      };
  
     &lt;NavigatorIOS 
              ref='navigator'
              ...
              /&gt;
  </code></pre>