How to insert new scene on pop stack in react native? - react-native

I am working on existing react native project and I want to find solution for pop action on navigation stack where I want to introduce new scene which is actually not on stack.
I have three different type of route based on state of user logged In, logged out or in locked state. So while user's app state is locked at that time on launch I am directing user to reset account page from launch scene.
Launch Scene -> Reset Account
But on back event of Reset Account, I want to show login page instead of Launch scene, but Login scene is not in stack as of now.
So how to insert new scene when user performs pop action ?
I am new to react native and I don't know how to modify navigation stack programmatically without performing any animation ?
In my project there is one package named react-native-router-flux to handle react navigation.
Any insight will be helpful.

I suggest you create a SwitchNavigator between LaunchScreen and AccountStack
AccountStack is a StackNavigator that render both:
LoginScreen.
ResetAccountScreen. << This would be your initialRoute.

Related

Why React native navigation loads all components at the same time?

I am using react native navigation v2 by wix. I have a welcome screen with login screen and register. I start the startAuth.js from App.js. There are two tabs with login and register.
But as soon as app starts the componentWillMount methods runs in the register screen but yet i am at login tab.
Why is this happening?
react-native-navigation's Tab does not support lazy loading. But there are two special lifecyle functions where you can put your logic when component appear or disappear on screen
componentDidAppear(): called each time this component appears on screen
componentDidDisappear(): called each time this component disappears from screen
https://wix.github.io/react-native-navigation/docs/screen-lifecycle
There is also a discussion about topic https://github.com/wix/react-native-navigation/issues/1250

How to check user is actively present or not in react native?

I want to check that user is active or not at application level.I have used PanResponder to detect user activity for one screen but I want to check for whole application in one component because I have more than 20 screens in application.
Note: I am using wix-react-native-navigation for navigation so every new screen is in navigation stack.

react-native-router-flux navigating to same scene

Is there a way to navigate to the scene that the user is currently on? Almost the equivalent of refreshing the component?
I have a reusable component called ProfileScreen, which shows a user's profile. That user, by default, is the logged in user; but it can also be a user that they select on a different screen.
The problem is that if the user is on another user's profile, and tries to navigate (via Drawer) to their own profile, it does nothing. I've tried obfuscating the navigation actions inside of redux functions to no avail.
Right now I'm having it navigate briefly to a "Loading" component before navigating back to the profile scene, but this is far from an optimal solution.
Any thoughts?
Actions.refresh() will do the job

How can I show a splash screen in React Native with React Native Navigation while loading app Redux state?

I am trying to integrate React Native Navigation by Wix into my application and am not sure how to go about setting things up to handle a loading phase.
The library has a splash screen at the native layer but that is only displayed while the bundle is being parsed. Once that is complete and React Native takes over, I then rehydrate my Redux store (from Redux-Persist), make a couple checks, call out to an API to validate a token, and redirect the user to the proper screen. While all of this is happening, I want to display a loading screen but have no idea how to go about it using this library.
I don't want to show my app or let the user use the app until all of the loading and checks have completed.
Is this possible with this library? If so, how do I set it up? My navigation is tab based, no side drawer.
There're 2 options for you:
1. Call Navigation.startSingleApp with the only screen is "Loading Screen" when app start. At that time, you call rehydrate redux. When the call back invoked, you call Navigation.start (single or tab) to your main screen
2. Design the registerScreen with route "Loading" for loading screen. When app start, call Navigation.startSingleApp for the loading screen. On "componentDidMount" of loading screen, call rehydrate redux, when call back invoke, push to Main screen

Using ex-navigation with exponent.js how do you route to a new stack?

I wish to trigger navigation to a details screen from a redux action - how do i do that with exponent ex-navigation? Should I use navigation.performAction ? Where's the documentation for that method? This would be a route with a fresh stack since they would be coming from a create screen and they shouldn't press back to the create form. This would also be a route that exists outside the tab navigation.