Im using react-navigation for react-native. Is there an option to make that inactive tab screens get unmounted like unmountInactiveRoutes: true in DrawerNavigator?? I cant find something like unmountInactiveRoutes for BottomTabNavigator.
I have two stacknavigators inside a BottomTabNavigator and I want to unmount them automatically.
BottomTabNavigator
Stack1
Screen
Screen
Stack2
Screen
Screen
You can unmount screens in bottom tab by adding option in navigation screenOptions (or in Tab.Navigator screenOptions):
unmountOnBlur: true
You can do it in Tab & Drawer Navigations but not in Stack Navigation.
And you can also add unmount individual screen by adding same option in Tab or Drawer Screen option.
So I don't know if you can unmount components that are inactive personally I did not find it however this is my workaround withNavigationFocus(FocusStateLabel)
and if isFocused is false. returning null. So this will give you more or less what you are looking for. If isFocused is true, you'll render what you usually render. If false you'll return null. resulting in the unmounting of your components
Some reference https://reactnavigation.org/docs/en/with-navigation-focus.html
I tried Ubaid’s answer it works. But you can try this one too:
Use
import {useIsFocused} from '#react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
// Do whatever you want to do when screen gets in focus
}, [props, isFocused]);
It works perfectly fine.
I found two way unmount.
First method is just trigger the unmount using useFocusEffect. With my experience this is not completely unmount component. It just trigger only unmount function to unsubscribe events.
https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener
Second method is completely unmount component when the navigating. This one is working as react unmount.
https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur
<Tab.Navigator screenOptions={{unmountOnBlur: true}}>
</Tab.Navigator>
In your tab screens
const unMount = ()=>{
//unmount what you want
}
useEffect(()=>{
return unMount;
},[])
Modify your code with this
Related
so I am coding a simple app with react-navigation and I want to code this:
- Home (Tab)
- Profile (Tab)
-- User info (Stack screen)
--- Edit user info (Stack screen) - (screen with input to edit name, email etc...)
When I click save on the EditInfo screen I have a button on the right side of the header Done, this button should navigate back to the UserInfo screen where you can see the updated details.
BUT!
Everything works but when I click Done on the EditInfo screen, it navigates back to Home! Why is that?
Thanks for help
Could you please put the code of the service screen where you call the goBack function, it could be helpful. Generally you just call
You are either using the wrong Navigator comp or your requirements are not clear. Basically, You would like to use the StackNavigator for your desired behavior.
The catch is, DrawerNavigator is used to build up a drawer menu. If you swipe from the left you'll see your navigator drawer containing all of your screens as you can see in the image below
If you add a button on your screen like below, you'll see your menu open.
<Button title="MENU" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
The conclusion is, whenever we use DrawerNavigator we always go back to initial route, which is whatever we defined as the first item or using the initialRouteName key of the second param of the DrawerNavigator.
It's only the StackNavigator that supports this stacking order you would like to achieve, as the name suggests itself.
What you can do is to wrap a new StackNavigator inside one of the screens of the DrawerNavigator. For example:
const AppNavigator = DrawerNavigator({
drawer1: {
screen: drawer1,
}
});
const drawer1 = StackNavigator({
one: { screen: one },
two: { screen: two },
three: { screen: three },
});
Maybe this answer would help you.
In a nutshell: maybe you need to specify backBehaviour param in your Tabs navigator.
I have a button in my Header component. When it is clicked, it calls a toggleNav function stored in my context.js. This function changes the state of isNavOpen from false to true. The navgiation then opens. There is no CSS in my project that should allow this behavior. I also don't see any JS code that should allow this behavior either. Could someone tell me what code allows my navigation to open and close?
My codesandbox
This is down to the basic way that React works, when you change the state of a component, it re-renders itself with the new values you've set into state.
Specifically it's this bit of Header.js:
{context.state.isNavOpen && (
<div className="js-nav nav">
...
When the component renders the first time, context.state.isNavOpen is false, and false && anything is still false, so javascript ignores the code after the &&. That means it skips over the menu code.
The second time it renders, after you update the state which is pushed to context and then passed to <Header> as a prop (!), the component re-renders with your menu code.
If you use your browser's dev tools to inspect the DOM before and after you click the button, you'll find that the menu isn't hidden and shown, but rather when you don't see it, it's gone from the DOM altogether.
It's react feature whenever state changes component re-renders
same thing happening here
{context.state.isNavOpen && (
isNavOpen is toggling (true to false), (false to true)
for example - you can check it simply
class Toggle extends React.Component {
state = {
visibility: false
}
toggleVisibility=()=>{
this.setState(prev=>({visibility:!prev.visibility}))
}
render() {
const {visibility} = this.state;
return (
<div>
<button onClick={this.toggleVisibility}>Click Me</button>
<h3>{visibility?'Welcome':''}</h3>
</div>
);
}
};
Im using react-navigation v3, is there an option to make that inactive tab screens get unmounted like unmountInactiveRoutes: true in DrawerNavigator?? I cant find something like unmountInactiveRoutes for BottomTabNavigator.
I have two stacknavigators inside a BottomTabNavigator and I want to unmount them automatically or just reset them.
my navigators:
BottomTabNavigator
stackNavigator
stackNavigator
You can use the useIsFocused hook to solve your problem. So when the screen is focused you will display your desirable screen otherwise just return null. Check the code below:
import { useIsFocused } from '#react-navigation/native';
const isFocused = useIsFocused();
if(isFocused) return(/*your screen*/)
else if(!isFocused) return null
And if you want to make some fetching or some changes on every focus just use the useFocusEffect hook.
Suppose I have two screens:
Screen A
Screen B
I am initially landed on Screen A. When I click on a Button I navigate to Screen B. When I press Back Button, I am again navigated to Screen A.
I want to call an action creator when I am navigated to Screen A as mentioned in above scenario.
I just want to know that which lifecycle event will be called every time when a screen is presented.
Isn't there some event like componentWillAppear()?
Note: I am using react-native with react-navigation for navigation.
This can now be done with plain react navigation via their listeners:
In your Component A:
componentDidMount = () => {
this._componentFocused();
this._sub = this.props.navigation.addListener(
'didFocus',
this._componentFocused
);
}
componentWillUnmount() {
this._sub.remove();
}
_componentFocused = () => {
this.setState({dataToShow});
}
React Navigation docs - Lifecycle
When you navigate from one screen to another, the first screen will not be unmounted, but still on the stack, just hide in the background.
What you need might be componentDidFocus, but it's currently in design not avaiable yet, see react-native open issue #51.
You can try this alternative way: react-navigation-addons. With this you can have events focus & blur which may suit your needs.
If you use react-native-navigation, you can listen for appearance events: https://wix.github.io/react-native-navigation/#/screen-api?id=listen-to-visibility-events-globally
In my case, I have several tabs. The tab container can be swiped. If user switching tab, the route will also be updated.
For example:
If user is in Tab 1, the route will be /home. When he swipes to Tab 2, the route will be /home/news. When he swipes to Tab 3, the route becomes /home/about And so on.
I'm aware that it can be achieved with this.props.push(NEXTROUTE). But by doing that way, the component is re-rendered and makes me lose the last scrolled position of the previous tab. My case needs to keep that last scrolled position of the tab instead of scrolled over to the top.
Is it possible to push state silently in react router? I don't want the component to be re-rendered when pushing state so I can maintain the last scrolled position of the screen.
Any thoughts? Thanks.
One way is to set the routes to point to the same Component and use the route params to set the current chosen tab. This way you achieve the "silent" behaviour you are aiming for:
<Route path="/dashboard" component={App}/>
<Route path="/news/:itemId" component={App}/>
and:
componentWillReceiveProps() {
const { route, params } = props;
const { path } = route;
const selectedTab = path !== '/dashboard' ? 1 : 2;
this.setState({selectedTab})
console.log('news item -> ', params.itemId)
}
A second way is to save the scrolling position and set it back.
A working JSBin: https://jsbin.com/qiraqa/edit?js,output
Relevant code:
scroll(e) {
const { tab, scrollPositions } = this.state;
const target = e.target,
scrollTop = target.scrollTop;
scrollPositions[tab] = scrollTop;
this.setState({
scrollPositions
});
console.log(scrollTop);
}
navigateToTab(tab) {
const { scrollPositions = [] } = this.state,
scrollPosition = scrollPositions[tab] || 0;
this._container.scrollTop = scrollPosition;
this.setState({tab});
}
and:
<div style={MainStyles.overflow} onScroll={this.scroll.bind(this)} ref={(c) => this._container = c}>...
This way, you can use the localStorage or a redux store to persist the scrollPositions array and load it up again after route change.
Note that this example has nothing to do with React Tabs as IMHO, the issue is about saving scrolling position between two navigational states.
More information
A tab component, whether it's a react-tabs or material-ui's tabs, keeps the scrolling position by rendering all tabs and switching the visibility on and off when you move between tabs. It sets the Tab's style to {height: 0, overflow: hidden} and this way keeps the container alive with it's scroll position.
As you mentioned, this doesn't work when you change the root component, the scrolling position will reset when the component reloads. This is probably the proper behaviour, as the route cannot pre-know the side effects of a route change.
To quote Dan Abramov from this relevant Github thread:
...it's up to you to render your components the same way. For example if you don't cache the data locally, there's nothing router can do to restore your position. But that's how browser's default behavior works, too, we're just trying to emulate it
In other words, according to this paradigm, it's not the router's responsibility and should be done manually.