0

I want to upgrade react native app to use react navigation v3.

Here is sample code -

// AppNavigator.js
import {
  createSwitchNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

import { connect } from 'react-redux';

let _resolve;
const _promise = new Promise(resolve => {
  _resolve = resolve;
});

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
  _resolve();
}

const AppStack = createStackNavigator ({
    Home: HomeScreen
},{
defaultNavigationOptions : ({navigation}) => ({
    ...defaultNavigationOptions
})
});

const AuthStack = createStackNavigator ({
    SignIn: SignInScreen
}, {
    defaultNavigationOptions
});

const Navigator = createSwitchNavigator({
App: AppStack,
Auth: AuthStack
},{
defaultNavigationOptions
})

const NavContainer = createAppContainer(Navigator);

const mapStateToProps = state => ({
  navigation: state.navigation,
});

class AppNavigator extends Component {
  render() {
    return (
      <NavContainer
        ref={navigatorRef => {
          setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}

export default connect(mapStateToProps)(AppNavigator);

Here is second file -

// App.js
import AppNavigator from './AppNavigator';
import { getStore, getPersistor } from './configureStore';
import { PersistGate } from 'redux-persist/integration/react';

class App extends Component {
render() {
    const isActive = this.state.appState === 'active';
    const store = getStore();
    const persistor = getPersistor();

    return (
      <Provider store={store}>
        <PersistGate persistor={persistor}>
          <View style={[styles.container, isActive ? styles.hidden : null]} />
          <View style={[styles.container]}>
            <AppNavigator />
          </View>
        </PersistGate>
      </Provider>
    );
  }
}

Before using createAppContainer I was seeing issue - Invariant Violation: The navigation prop is missing for this navigator. In react-navigation v3 and v4 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html

Currently, I'm seeing issue - Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager.

radhe001
  • 324
  • 1
  • 3
  • 16

0 Answers0