_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:

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;

Answer 2

You can do it with something like this:

componentDidMount () {
const {navigation} = this.props;
navigation.addListener ('willFocus', () =>
  // run function that updates the data on entering the screen
);
}