I am using React native navigation V:"^1.1.334" to handle routing within my app. I am currently rendering a Login screen initially and then dispatching an action using redux/redux-saga to change the state depending whether the user is logged in or not. I am experiencing issues in my release build where after sometime, if I reset the app, it will just render a blank screen and nothing gets on the screen and the only way to fix it, it to completely wipe the app's data and cache. Forcing the app to stop does not work. I imagine there are many possible causes but I highly suspect it may be with the way I am implementing the login screen logic to switch to the protected content. I have a pretty standard index.js
var store = configureStore();
registerScreens(store, Provider); // this is where you register all of your app's screens
// start the app
Navigation.startSingleScreenApp({
screen: {
screen: 'myapp.Login',
navigatorStyle,
},
drawer: { // optional, add this if you want a side menu drawer in your app
left: { // optional, define if you want a drawer from the left
screen: 'myapp.Drawer', // unique ID registered with Navigation.registerScreen
fixedWidth: 600, // a fixed width you want your left drawer to have (optional)
}
}
});
AppRegistry.registerHeadlessTask('TrackPlayer',
() => require('./app/modules/player/player-handler.js')(store));
And then in my login screen I have the auth logic
componentDidMount(){
this.props.actions.checkAuth();
}
render() {
if (this.props.user.isAuth) {
this.props.navigator.resetTo({
screen: 'myApp.Player',
navigatorStyle :{
navBarHidden: true,
}
});
return null;
}
return (<LoginScreen />);
}
The checkAuth function dispatches an async action and then if the user is authenticated, the state is changed via redux and user.isAuth is updated which will reset the app. I assume that the problem is that perhaps I can't reset the
app while the main screen is still rendering? because maybe it triggers some sort of racing condition and nothing gets rendered?
So my question is whether placing this logic inside the render method can conflict and if so, where should said logic be implemented? Or could this be an issue with react-native-navigation?
I've checked the output from log-android (since its a release build) and the output seems identical when the app renders correctly and when it doesn't so at least there aren't any errors being explicitly thrown.
Heres what that looks like, if you're curious. Also could it be that I am also launching my app as a singleTask? should it be something else? I changed it because I've been having problems with the app returning from the background when the back button is pressed, which that did not solve. That's for another question though.
07-24 15:35:19.703 4150 4150 D ReactNative: ReactInstanceManager.ctor()
07-24 15:35:19.715 4150 4150 D ReactNative: ReactInstanceManager.createReactContextInBackground()
07-24 15:35:19.715 4150 4150 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundInner()
07-24 15:35:19.720 4150 4150 D ReactNative: ReactInstanceManager.recreateReactContextInBackgroundFromBundleLoader()
07-24 15:35:19.720 4150 4150 D ReactNative: ReactInstanceManager.recreateReactContextInBackground()
07-24 15:35:19.720 4150 4150 D ReactNative: ReactInstanceManager.runCreateReactContextOnNewThread()
07-24 15:35:19.811 4150 4169 D ReactNative: ReactInstanceManager.createReactContext()
07-24 15:35:20.158 4150 4169 D ReactNative: Initializing React Xplat Bridge.
07-24 15:35:20.163 4150 4169 D ReactNative: Initializing React Xplat Bridge before initializeBridge
07-24 15:35:20.172 4150 4169 D ReactNative: Initializing React Xplat Bridge after initializeBridge
07-24 15:35:20.173 4150 4169 D ReactNative: CatalystInstanceImpl.runJSBundle()
07-24 15:35:20.199 4150 4178 D ReactNative: ReactInstanceManager.setupReactContext()
07-24 15:35:20.200 4150 4178 D ReactNative: CatalystInstanceImpl.initialize()
07-24 15:35:21.547 4150 4150 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
07-24 15:35:21.559 4150 4177 I ReactNativeJS: Running application "uplayer.Drawer" with appParams: {"initialProps":{"screenInstanceID":"screenInstanceID4","navigatorID":"navigatorID3_nav","navigatorEventID":"screenInstanceID4_events"},"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
07-24 15:35:21.593 4150 4150 D ReactNative: ReactInstanceManager.attachRootViewToInstance()
07-24 15:35:21.729 4150 4177 I ReactNativeJS: Running application "uplayer.Login" with appParams: {"initialProps":{"screenInstanceID":"screenInstanceID2","navigatorID":"navigatorID1_nav","navigatorEventID":"screenInstanceID2_events"},"rootTag":11}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON
07-24 15:35:22.330 4150 4177 I ReactNativeJS: Cookie doesn't contain sid [object Object]
07-24 15:35:24.216 4150 4177 I ReactNativeJS: isPurchased false
