react native - _this2.props.navigator.push is not a function

Question

I am trying to use Navigator within a React-Native app, but I am running into issues.

At the beginning of the app, I am loading this LoginScreen component:

return <LoginScreen navigator={navigator}/>;

it has this:

class LoginScreen extends React.Component {
  props: {
    navigator: Navigator;
  };
  render() {
    return (
          <F8Button
            style={styles.button}
            onPress={() => this.props.navigator.push({userFlow})}
            caption="Create Account"
          />
);}

I want it to lead to the userFlow component.

I have a component called F8Navigator, that has this:

    const {navigator} = this.refs;
    if (navigator && navigator.getCurrentRoutes().length > 1) {
      navigator.pop();
      return true;
    }

  renderScene: function(route, navigator) {
    if (route.userFlow) {
      return (
        <userFlow
          userFlow={route.userFlow}
          navigator={navigator}
        />
      )
    }

When I run this and click on the F8Button, I get:

_this2.props.navigator.push is not a function

How can I fix this?

Answer 1

I had that same problem when I tried to use a tabview with the navigator. Then I just added {...this.props} when I returned my view eg.

return <LoginScreen {...this.props}/>;

Here is also an example of my code on how I use the navigator hoping this can help you.

I created a navigator class:

'use strict';

const React = require('React');
const Navigator = require('Navigator');
const LoginScreen = require('../login/LoginScreen');
const UserFlowScreen = require('../userFlow/UserFlowScreen');

class MyAppNavigator extends React.Component{
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Navigator
        ref="appNavigator"
        style={styles.container}
        initialRoute={this.props.initialRoute}
        renderScene={this._renderScene}
        configureScene={(route) => ({
          ...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight
        })}
      />
    );
  }

  _renderScene(route, navigator) {
    var globalNavigatorProps = { navigator }

    switch (route.ident) {
      case "LoginScreen":
        return <LoginScreen {...globalNavigatorProps} />
      case "UserFlowScreen":
        return <UserFlowScreen {...globalNavigatorProps} />
      default:
        return <LoginScreen {...globalNavigatorProps} />
    }
  }

};

module.exports = MyAppNavigator;

Then in my main view I call my navigator:

'use strict';

const React = require('React');
const {
  Text,
  View,
} = React;

const MyAppViewContainer = require('./common/MyAppViewContainer');
const MyAppNavigator = require('./common/MyAppNavigator');

class MyApp extends React.Component {

 constructor(props) {
   super(props);
 }

 render() {
   return (
     <MyAppViewContainer >
      <MyAppNavigator initialRoute={{ident: "LoginScreen"}} />
     </MyAppViewContainer >
   );
 }
};

module.exports = MyApp;

and in my Login screen I can just push to the userFlowScreen:

'use strict';

const React = require('React');
const ReactNative = require('react-native');
const{
  Text,
  View,
  TouchableOpacity,
  Navigator,
} = ReactNative;

class LoginScreen extends React.Component {

 constructor(props) {
   super(props);
 }

 render() {
   return (
     <View>
       <TouchableOpacity onPress={() => this._pressRow()}>
         <Text>Login</Text>
       </TouchableOpacity>
     </View>
   );
 }

 _pressRow(){
   this.props.navigator.push({
     ident: "UserFlowScreen",
     sceneConfig: Navigator.SceneConfigs.FloatFromRight,
   });
  }
};

module.exports = LoginScreen;