I'm using React Navigation in my app and I have a Tab Navigator nested in a Stack Navigator. Sometimes in the app, the navigation stack is:
Screen A => Tab Navigator => Screen B.
So when users are in Screen B and press the back button it triggers first the back action in the Tab Navigator and only if there's no goBack action available in the Tab Navigator that it triggers the goBack action from Screen B.
So, the user gets an unexpected behavior when he is in Screen B and have navigated between Tabs. The user keeps pressing the back button until the Tab Navigator is back to the first tab and only then, after another press in the back button, it goes from Screen B back to the tabs.
Is there anyway I can archieve the expected behaviour in this case?
If I understand your setup correctly, I think you want to set backBehavior: 'none' on the TabNavigatorConfig. This will prevent tab navigations from pushing history states.
For example:
const MyTabNav = createBottomTabNavigator({
ScreenOne: ScreenOne,
...
}, {
backBehavior: 'none', // <-- Here
initialRouteName: 'ScreenOne',
tabBarOptions: {
...
}
})
If that doesn't do exactly what you want, you might try playing with the other back behaviors. Two new behaviors were just added in version 3.2.0 (see https://github.com/react-navigation/rfcs/blob/master/text/0008-back-behaviour-for-tabs.md).
Are you correctly handling the back button? on each container top level component you need to handle the back button press, ex:
import * as React from 'react';
import { BackHandler } from 'react-native';
export default MyComponent extends React.Component<any, any> {
public componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.goBack);
}
public componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.goBack);
}
private goBack = () => {
this.props.navigation.goBack();
return true;
}
}
By returning true, you stop the cascading of the back button press propagation to the previous containers.
You can handle it using BackHandler event in TabNavigator page.
componentDidMount() {
if ("android" === Platform.OS) {
BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);
}
}
componentWillUnmount() {
if ("android" === Platform.OS) {
BackHandler.removeEventListener(
"hardwareBackPress",
this.handleBackPress
);
}
}
handleBackPress = () => {
if (this.props.navigation.isFocused()) {
this.navigateBack();
} else {
this.props.navigation.goBack(null);
}
return true;
};
When hardware back button is pressed in screen B, backhandler method in Tab will get called and the flow will works properly.
But I have an issue in another scenario.
I have following work flow.
Tab Navigator A -> Tab Navigator B -> Screen
When back button is pressed from screen, the issue still persist.
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 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
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