NavigatorIOS error in React-Native?

Question

I'm currently trying to use a NavigatorIOS to navigate from my index ios page in my React-Native app to another page. However, when I do so I'm getting this error and the next page fails to load: Warning: Failed propType: Invalid prop 'initialRoute.component' of type 'object' supplied to 'NavigatorIOS', expected 'function'.

I'm pretty sure I have implemented this in the exact same way successfully in the past, but I may be missing something--any feedback greatly appreciated!

Relevant code in index.ios.js:

onLoginPressed() {
    return (
      <React.NavigatorIOS
      style={styles.container}
      initialRoute={{
        title: 'Home',
        component: Home,
      }}/>
    );
}

render() {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome!
      </Text>
    <TouchableHighlight
      onPress={() => {this.onLoginPressed()}}
      activeOpacity={75 / 100}
      underlayColor={"rgb(210,210,210)"}>
      <Text>Login</Text>
    </TouchableHighlight>
  </View>
);

} }

Relevant code in Home:

class Home extends Component {

    constructor(props) {
       super(props);
       this.state = { }
    }

    render() {
       console.log('loaded here'); //this is never being called
       return (
         <View>
           <Text
           style={{
               color: 'black',
               fontSize: 16,
               fontWeight: 'normal',
               fontFamily: 'Helvetica Neue',
            }}>
            My Text
          </Text>
        </View>
      )
    }
  }

export default Home

Answer 1

You need to have you NavigatorIOS and your initial route at the root of the application:

class App extends Component {
    render() {
       return (
          <NavigatorIOS
            style={styles.container}
            initialRoute={{
              title: 'Home',
              component: Home,
            }}/>
        )
    }
}

onLoginPressed should push the new route to the route stack:

onLoginPressed () {
    this.props.navigator.push({
      component: Login,
    title: 'Login'
  })
}

I've set up a working example with your code here .

https://rnplay.org/apps/Cl8aPQ