How to fix undefined is not an object (evaluating

问题:

I am facing some issue to upgrade all libraries of React Native from old to latest.

Please help me with the error if you can understand and can suggest me possible solution.

Thank You.

react-navigation, redux, redux-saga

Package.json
{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android-bundle": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/",
    "android-release-build": "npm run android-bundle && cd android && ./gradlew assembleRelease && cd ..",
    "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/MyApp/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
  },
  "dependencies": {
    "2": "^2.0.0",
    "lodash.debounce": "^4.0.8",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-native": "0.59.9",
    "react-native-af-video-player": "^0.2.1",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-htmlview": "^0.14.0",
    "react-native-image-progress": "^1.1.1",
    "react-native-keyboard-manager": "^4.0.13-12",
    "react-native-keyboard-spacer": "^0.4.1",
    "react-native-modal": "^11.0.1",
    "react-native-pdf": "^5.1.0",
    "react-native-permissions": "^1.1.1",
    "react-native-progress": "^3.6.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-storage": "^1.0.1",
    "react-native-tab-view": "^2.5.0",
    "react-native-version-number": "^0.3.6",
    "react-native-webview": "^5.11.0",
    "react-navigation": "^3.11.0",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",
    "rn-fetch-blob": "^0.10.15"
  },
  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/runtime": "7.4.5",
    "babel-jest": "24.8.0",
    "jest": "24.8.0",
    "metro-react-native-babel-preset": "0.54.1",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./app/assets/fonts/"
    ]
  }
}

Index.js



import { AppRegistry, SafeAreaView,StyleSheet } from 'react-native';
import App from './app/App';
import React from 'react';
import { Provider } from 'react-redux'
import configureStore from './app/redux'
import {fetchCinemaList} from './app/redux/actions'

const store = configureStore()
store.dispatch(fetchCinemaList());
const DemoApp = () => (
  <Provider store={store}>
      <App/>
  </Provider>
)


const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    flexGrow: 1,
    backgroundColor: 'white',
    shadowColor: 'transparent',
  },
});


export default store

AppRegistry.registerComponent('MyApp', () => DemoApp);


App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import {DeviceEventEmitter, Platform, AppState,  } from 'react-native';
import React, {Component,} from 'react';
import {connect} from 'react-redux'
import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer
} from 'react-navigation';
import SplashScreen from 'react-native-splash-screen';
import {Tabs} from './config/tabBarConfig'
import {SideMenu} from './components'
import { fetchCards,  fetchReservations, navigationChanged } from './redux/actions';
import store from '../index'
import {PromoSplash} from './screens/splash'
import {testUser} from './assets'
import KeyboardManager from 'react-native-keyboard-manager'
import { load,} from './services/utils';



if (Platform.OS == 'ios') KeyboardManager.setEnable(true);

function getCurrentRouteName(navigationState) {
  if (!navigationState) {
    return null;
  }
  const route = navigationState.routes[navigationState.index];
  if (route.routes) {
    return getCurrentRouteName(route);
  }
  return route.routeName;
}


const Nav = createDrawerNavigator({
  Tabs
},
{
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  contentComponent: props => <SideMenu {...props}/>
});

export const MainNav = createStackNavigator({
    Splash: { 
      name: "PromoSplash",
      screen: PromoSplash 
    },
    MainNavigator: { 
      name: "Nav",
      screen: Nav 
    }
  }, {
  headerMode: 'none',
  initialRouteName: "Splash",
})



class App extends Component {

  constructor (props) {
    super(props)
    this.state = {
      cineId: '',
      appState: AppState.currentState,
    }
  }

  async retrouveInfoCine() {
    const infoCine = await load('selectedCinema', "");
    this.setState({cineId: infoCine.id, });
  }


  componentWillMount() {
    fetchReservations(testUser);
  }


  render() {
    return (
      <MainNav
          onNavigationStateChange={(prevState, currentState) => {
          const currentScreen = getCurrentRouteName(currentState);
          const prevScreen = getCurrentRouteName(prevState);
          console.log("prevScreen, currentScreen", prevScreen, currentScreen)
          store.dispatch(navigationChanged(prevScreen, currentScreen))
          if (prevScreen !== currentScreen) {
              if (currentScreen == "Mes Réservations" || currentScreen == "MyCard") {
              let state = store.getState()
              if (currentScreen == "Mes Réservations" ) { //&& !state.reservations.reservations_fetched) {
                  console.log("Mes Reservations")
                  store.dispatch(fetchReservations(state.userInfo.token))
              } else {
                  store.dispatch(fetchCards(state.userInfo.token))
              }
              DeviceEventEmitter.emit('ModalVisible', { visible: true })
              }
              if (prevScreen == "Mes Réservations" || prevScreen == "MyCard") {
                  DeviceEventEmitter.emit('ModalVisible', { visible: false })
              }
              if (currentScreen == "Programme") {
                  SplashScreen.hide();
                  DeviceEventEmitter.emit('refreshData', {})
              }
              if (currentScreen == "Mon Cinéma") {
                DeviceEventEmitter.emit('refreshDatesList', {})
            }
          }
          }}
      />
    )
  }
}

const appFinal = createAppContainer(App);

export default connect()(appFinal)

I am getting TypeError: undefined is not an object (evaluating 'Component.router.getStateForAction') error though I have changed code as per latest navigation code requirement.

Old Versions:
    "react-navigation": "^1.5.11",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-saga": "^0.16.0",