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.