How do I pass reference to Navigator into renderScene?

Question

I've been experimenting with React Native and I'm having trouble passing a reference to navigator into the scene I'm rendering. Without navigator, NewsList items can't trigger a scene change.

render: function() {
    return (
        <Navigator
            initialRoute={ { name: 'NewsList', index: 0 } }
            renderScene={ ( route, navigator ) => NewsList }
        />                                                      
    );                                                          
},

Similarly, in the render scene function I need to pass navigator to the row rendering function.

<UIExplorerPage noSpacer={true} noScroll={true}>
    <ListView
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
        onEndReached={this.onEndReached}
    />
</UIExplorerPage>

What is the idiomatic way to pass references like this around?

Answer 1

Like Colin mentioned, you need to pass a callback to your list items. Given below is code from the an example project (UIExplorer) in react native itself.

Here, we're passing the navigator object to the NavMenu which is the list component.

var TabBarExample = React.createClass({
    // Other methods... blah blah
    renderScene: function(route, nav) {
        switch (route.id) {
          case 'navbar':
            return <NavigationBarSample navigator={nav} />;
          case 'breadcrumbs':
            return <BreadcrumbNavSample navigator={nav} />;
          case 'jumping':
            return <JumpingNavSample navigator={nav} />;
          default:
            return (
              <NavMenu
                message={route.message}
                navigator={nav}
                onExampleExit={this.props.onExampleExit}
              />
            );
        }
    },

    render: function() {
        return (
          <Navigator
            style={styles.container}
            initialRoute={{ message: "First Scene", }}
            renderScene={this.renderScene}
            configureScene={(route) => {
              if (route.sceneConfig) {
                return route.sceneConfig;
              }
              return Navigator.SceneConfigs.FloatFromBottom;
            }}
          />
        );
      }
});

In the NavMenu component, we're passing a callback on the onPress of every NavButton.

class NavMenu extends React.Component {
  render() {
    return (
      <ScrollView style={styles.scene}>
        <Text style={styles.messageText}>{this.props.message}</Text>
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: 'Swipe right to dismiss',
              sceneConfig: Navigator.SceneConfigs.FloatFromRight,
            });
          }}
          text="Float in from right"
        />
        <NavButton
          onPress={() => {
            this.props.navigator.push({
              message: 'Swipe down to dismiss',
              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,
            });
          }}
          text="Float in from bottom"
        />
        // Omitted rest of the NavButtons.
      </ScrollView>
     );
}

Here's a link to the example.

Answer 2

If I understand your question correctly, you're saying that your news list item components need a reference to navigator in order to trigger a navigation event. This (IMO) is the wrong approach.

Instead, pass the list items a callback. The callback is a method on the parent news list component, and that already has a reference to navigator that you can call. In this way you can avoid passing the navigator all the way down your component hierarchy.

I can give a code example if this isn't clear :)

Answer 3

The question was worded kinda vaguely. I resolved my issue by adding navigator to UIExplorerPage, e.g <UIExplorerPage navigator={navigator} />. Properties can be accessed within UIExplorerPage using this.props.