How do you completely re-render a screen when navigating using the Drawer?
Example: I’m on the main screen of my app, I manipulate the state in some way, then I leave to another screen using the Drawer. If I press the back button, or select the main screen from the Drawer again, it is still in the same state as it was when I left it. I want it to be able to revert back to its original state as though it was being loaded for the first time. I determined the screens are not unmounted, the only method that fires is the componentDidUpdate method. Is there something I can do to accomplish this?
The reason I want to completely reload the screens actually stemmed from another bug. On one of my screens that is accessed from the Drawer contains an ex-navigation SlidingTabNavigation component and upon the initial load you can scroll through the tabs just fine. However, if you switch to another screen and go back to the screen with the tab, the scrolling no longer jumps to each of the tabs as you would expect. It’s almost as though you are simply dragging one big screen that is three screens wide and when you stop swiping, the screen just stops instead of jumping to the next tab, even if you’re halfway between two screens. It’s hard to explain but it’s really annoying.
I had a similar issue a while back. I think I ended up using ex-navigations replace method to rerender the entire drawer. I had a root stack navigator as a parent navigator of the drawer. It was something like this:
const rootNavigator = this.props.navigation.getNavigator('root')
rootNavigator.replace(Router.getRoute('drawer'))
I didn’t like this at all. It replaces everything in the drawer and the screen goes white while it rerenders, but I think trying to replace the tab navigator might work on it’s parent stack.
1 Like