Unable to create Navigator via onPress?

[alex-espinoza]

I'm currently trying to get a new page to pop up outside of the scope of NavigatorIOS/react-native-router when a TouchableHighlight is pressed. Similar to how the compose new tweet view pops up from the bottom on the Twitter iOS app and how other apps handle resource creation views. I've read that I can use the Navigator component to do this, but after reading the documentation and looking at some examples, it is not working.

Here is the code I have:

var NewDeckIcon = React.createClass({
  nextPage() {
    return (
      <Navigator
        initialRoute={{component: NewDeck}}
        configureScene={(route) => {
          return Navigator.SceneConfigs.FloatFromBottom;
        }}
        renderScene={(route, navigator) => {
          if (route.component) {
            return React.createElement(route.component);
          }
        }}
      />
    );
  },

  render() {
    return (
      <TouchableHighlight underlayColor='transparent'
                          onPress={this.nextPage}>
        <Icon
          name='ion|plus'
          size={24}
          color='#E6E6E6'
          style={styles.newDeckIcon} />
      </TouchableHighlight>
    );
  }
});

var NewDeck = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.contain}>WOW IT WORKS!</Text>
      </View>
    );
  }
});

I know that the nextPage function is called correctly because if I insert a console.log call before the return, it gets logged out. I'm not getting any sort of error from React when pressing the icon. The Navigator works if I don't try to create one via onPress and just have it called inside a render function. Not sure if I'm missing anything, getting the syntax wrong, or if this is a bug.

[bakso]

I guest you should create a model view and place a navigator on it

[jmstout]

You're trying to return a component from the onPress handler. This isn't how onPress properties work. They're simpler than that and pretty much just run whatever standard function they're passed.

You need to have a Navigator component already rendered and then pass it the route you want to transition to.

I have had success creating an interaction similar to what you mentioned by rendering Navigator as the root component of my app. Your TouchableHighlight and even NavigatorIOS components should be contained within a route being rendered by the Navigator.

I would recommend playing with some of the Navigator examples in the UIExplorer project to get a better handle on exactly how Navigator should be implemented:
https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator

Navigator is really powerful, in part because you can decide how you want the renderScene function to handle routes.

Just taking a quick look at the example you posted, though, it should be more along the lines of this:

var NewDeck = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.contain}>WOW IT WORKS!</Text>
      </View>
    );
  }
});

var NewDeckIcon = React.createClass({
  nextPage() {
    this.props.nav.push({component: NewDeck});
  },
  render() {
    return (
      <TouchableHighlight
        underlayColor='transparent'
        onPress={this.nextPage}
      >
        <Icon
          name='ion|plus'
          size={24}
          color='#E6E6E6'
          style={styles.newDeckIcon}
        />
      </TouchableHighlight>
    );
  }
});

var App = React.createClass({
  renderSceneMethod(route, navigator) {
    if (route.component) {
      return <route.component nav={navigator}/>;
    } else {
      return (
        <View>
          <Text>
            This is the default renderScene view, when no route.component is provided.
          </Text>
        </View>
      );
    }
  },
  render() {
    return (
      <Navigator
        style={styles.container}
        initialRoute={{component: NewDeckIcon}}
        configureScene={(route) => {
          return Navigator.SceneConfigs.FloatFromBottom;
        }}
        renderScene={this.renderSceneMethod}
      />
    );
  }
});

Hope this helps!

[ide]

Wish I could like Github comments. @jmstout is right on the mark. One note - you can actually leave off nav={navigator} since Navigator will implicitly set navigator={self} for you.

[alex-espinoza]

Thank you @jmstout your post cleared up everything. I wasn't aware that there was an example project for the UIExplorer. I appreciate the explanation!