Interactive navigation and component lifecycle
I have a React Native app that uses interactive navigation. On one of my screens, I am using the camera to read the QR code, which works great, but I have to use setState ({camera: false}) to prevent the QR code from being painted multiple times. This usually works. Even after re-entering the page from the main menu.
The problem is that the user clicks '<' (iOS / in the header) and he has to re-enter the camera page. I can't find a function where I should be doing setState ({camera: true}). Without interactive navigation, there is a standard lifecycle (componentWillMount, ...), but in this case, I cannot find out where to place my code, so I can find that the page has been re-entered.
I know https://github.com/react-community/react-navigation/issues/51 but I will still miss the solution.
source to share
I had a somewhat similar problem where I had screen A, screen B opens and I wanted to capture an event where I would return to screen A with B.
My best guess was to send a callback from screen A to B via a navigation function:
this.props.navigation.navigate("ScreenB",{
onClose : ()=>{
// update your state to open back the camera
}
})
And then I needed to capture the close event on screen B, which was basically the WillUnmount component:
In the ScreenB component class:
componentWillUnmount(){
this.props.navigation.state.params.onClose()
}
source to share
Currently it looks like there is no elegant reactive navigation solution.
The best option is to use onNavigationStateChange (found on Screen Tracking page ). In this function, we can find that we are leaving the specified tab. If you plan on setting the data stored in redux then keep in mind that you change the status page => will be displayed again and the tab will not change. You have to handle changing the tab manually (e.g. via initialRouteName)
source to share
Since people have already answered the correct React Native approach, I thought I could make a suggestion that saved me thousands of hours with these problems ...
Why not use REDUX and set a globally accessible storage variable to fix this problem? If you've used REDUX, you could just set one time that the camera is off, and the state of the global app will not only remember this for you, but also let every component you listen to in the store now know that the camera won't be firing at it. screen. When the application exits, or even when you set this value, if needed, you can save the AsyncStorage and then retrieve it as soon as the application opens and loads.
This approach would be highly desirable as it does not require intervention in the complexity of the RN lifecycle. As soon as you have to update or change the state variables of an encapsulated component at a specific time, or force it to update without having to render or force it to update during weird lifecycle events ... you know you are taking the wrong approach, At least that I learned about my work at RN.
source to share
I agree with @GoreDefex (upvoted). Redux will probably be your best bet. Has a small learning curve, but once you plug it into your application, it makes state management easier.
Especially if you are going to run nested navigators like the drawer navigator inside the stack navigator, etc.
source to share