I have a Drawer navigator with only one screen which is BottomTab Navigator. Inside BottomTab Navigator, I have 2 screens, Home and Activity. I want to hide Drawer header on Activity screen and show it again when I switch back to Home Screen. I am using setOptions of drawer with headerShown:false on focus of Activity screen and headerShown:true on blur of Activity screen. Doing so causing delay hiding and showing again. I think useLayoutEffect will solve this issue but can I solve my issue without it?
<Drawer.Navigator>
<Drawer.Screen name="BottomTab" component={BottomTab} />
</Drawer.Navigator>
const BottomTab = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Activity" component={Activity} />
</Tab.Navigator>
);
};
class Activity extends Component {
componentDidMount() {
this._unsubscribeFocus = this.props.navigation.addListener('focus', () => {
console.log('focus');
this.props.navigation.getParent().setOptions({
headerShown: false,
});
});
this._unsubscribeBlur = this.props.navigation.addListener('blur', () => {
console.log('blur');
this.props.navigation.getParent().setOptions({
headerShown: true,
});
});
}
componentWillUnmount() {
this._unsubscribeFocus();
this._unsubscribeBlur();
}
Related
I have a screen in my app (CameraScreen) that is both in my Tab Navigator and Stack Navigator shown below (there are some more Tab Screens and Stack Screens that I removed for simplicity):
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen
name="Camera"
component={CameraScreen}
/>
</Tab.Navigator>
);
};
const Navigation = () => {
return (
<NavigationContainer theme={Theme}>
<Stack.Navigator headerMode="none">
<Stack.Screen name="Camera" component={TabNavigator} />
<Stack.Screen name="Product" component={ProductScreen} />
<Stack.Screen name="CameraStack" component={CameraScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
Now if I navigate to ProductScreen, then navigate to CameraStack from there and check the navigation state I notice that ProductScreen is nowhere to be found in the routes which I checked using navigation.getState().routes. Thus if I try and use navigation.goBack() it does not go back to the ProductScreen (which would be the expected behaviour).
When I check the routes in ProductScreen, ProductScreen shows up as the last route, however this disappears when I navigate to CameraStack.
I have a hunch that this has to do with the fact that CameraScreen is in both the Tab Navigator and Stack Navigator so for some reason the navigation prop passed to Camera is the Tab Navigator.
For reference my CameraScreen (simplified):
const CameraScreen = ({ navigation, route }) => {
// this doesn't include ProductScreen even if I navigate to CameraStack from the ProductScreen
console.log(navigation.getState().routes);
return (
<View></View>
);
};
and ProductScreen (simplified):
const ProductScreen = ({ navigation }) => {
return (
<View>
<TouchableOpacity
onPress={() => navigation.navigate("CameraStack")}
>
</TouchableOpacity>
</View>
);
};
One idea I can think of to resolve this issue is to manually pass a navigation parameter from ProductScreen but I'm wondering if there is a better way to handle this issue.
I realized this had nothing to do with the fact that I had this screen in both the Tab Navigator and Stack Navigator but was occurring because I was navigating to the same screen using navigation.navigate instead of navigation.push.
The former navigates to the previous location in your stack if you navigate to a screen you've already visited before, but the latter pushes a new route to the navigation state even if it's a screen you've already visited.
Handle backBehavior prop in your Navigator
<Tab.Navigator backBehavior='history'>
<Screen ... />
<Screen ... />
<Tab.Navigator/>
https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior
my screens are arranged this way:
main root
Stack navigator has 2 screens
Login
Drawer
The drawer is a Drawer Navigator, having three screens
Home
Profile
Settings
Home is a Bottom Tab Navigator having multiple Screens like
Dashboard
Reminder
etc ...
So the issue is whenever I am in any sub-screen of let's say reminder and I want to close it by navigation.goBack() it takes me to Dashboard, what I want is to land back on reminder
PS. the sub screen is also in the tab navigator I have hidden it with filter
Read the following code and try it, don't forget to import it.
The way I've done it is putting the drawer above in the file
DrawerNavigator.js:
const Drawer = createDrawerNavigator()
const DrawerNavigator = () => {
return(
<Drawer.Navigator initialRouteName='TabNavigator'>
<Drawer.Screen name='Home' component={TabNavigator}/>
<Drawer.Screen name='Profile' component={ProfileStackScreen}/>
<Drawer.Screen name='Settings' component={SettingsStackScreen}/>
</Drawer.Navigator>
)
}
export default DrawerNavigator
Here I insert the TabNavigator(Only one of the options in the Drawer will have te bottom tab navigator, the Home one.
The TabNavigator.js will have all the bottom tab screens:
const Tab = createBottomTabNavigator();
const BottomTabNavigator = () => {
return (
<Tab.Navigator initialRouteName='Dashboard'>
<Tab.Screen name="Dashboard" component={DashboarStackScreen} />
<Tab.Screen name='Reminder' component={ReminderStackScreen}/>
</Tab.Navigator>
)
}
export default BottomTabNavigator
In the StackNavigator.js you will enter every stack screens you might want to use:
const Stack = createStackNavigator()
const DashboardStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ReminderStackScreen = () => {
return (
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const ProfileStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
const SettingsStackScreen = () => {
return(
<Stack.Navigator >
{/*INSERT STACK SCREENS HERE*/}
</Stack.Navigator>
)
}
export {DashboardStackScreen,ReminderStackScreen,ProfileStackScreen,SettingsStackScreen}
If this doesn't solve your problem, let me know.
You can use a StackNavigator for each tab of the BottomTabNavigator, which contains the screens for that tab. Every tab will then have its own navigation stack.
I want to customize the behavior of the default back button in stack navigator locally to one screen.
In the details assuming that on the stack there are screen1|screen2, I want to pass some props from screen2 to screen1 once the button is pressed.
I spent a lot of time reading React navigation docs, searching on internet and coding but I am not able to do this.
FROM DOCS
It's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can set the headerLeft option to a React Element that will be rendered
I know that the issue concerns the goBack() function of the headerRight component.
I want to override the default function goBack() related to the headerLeft back button with something like navigation.navigate("previousScreen",{{..props}}).
And ( this is very important!! ) I want to use this behavior locally to a specific screen, so not globally.
I have tried with something like this but doesn't works.
export default function App(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen} options={{headerLeft: () => (
<HeaderBackButton
onPress={() =>navigation.navigate("FirstScreen",{//stuff//})}
title="Info"
color="#fff"
/>
),}}/>
</Stack.Navigator>
</NavigationContainer>
)}
If you are using react navigation v5, you can set the behaviour for a specific screen using :
import { HeaderBackButton } from '#react-navigation/stack';
...
options={{
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('screenName');
}}
/>
),
}}
...
You can also set as stack level using screenOptions={{}} instead.
"navigation" and "route" are also available on screen props.
options={({ navigation, route }) => ({headerLeft: ...})
For react-navigation v6, you can use setOptions inside a useEffect
import { HeaderBackButton } from '#react-navigation/elements';
...
const MyScreen = ({navigation}) => {
useEffect( () => {
navigation.setOptions({ headerShown: true,
headerLeft: (props) => (
<HeaderBackButton
{...props}
onPress={() => {
navigation.navigate('MyOtherScreen');
}}
/>
)
});
} );
}
When the component is mounted, register back button press listener
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
}
Then in the function, you can check and handle the action, ex:
onBackButtonPressAndroid = () => {
// Check if the current screen is focused or a subscreen is perhaps
if (this.props.navigation.isFocused()) {
if (someCondition) {
// Do a navigation to a custom screen, pass props here if needed
this.props.navigation.navigate('search')
return true
// Return true if you want to tell react navigation you've handled the back press
}
else if (this.state.offsetTop > 10) {
// Ex. for scrolling to top
this.scrollToTop()
this.setState({
offsetTop: 0,
})
return true
}
}
// Return false if you want to tell react navigation you didn't handle the back press
return false
}
Try passing navigationOptions to a specific screen :
export default function App(){
return(
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="FirstScreen" component={FirstScreen}/>
<Stack.Screen name="SecondScreen" component={SecondScreen}
navigationOptions: ({ navigation }) => ({ headerLeft: (<HeaderBackButton onPress={() => {}}/>)
})}}/>
</Stack.Navigator>
</NavigationContainer>
)}
Either you can specify it there on the navigation.
Or on the Second screen, try this :
class SecondScreen extends React.Component {
static navigationOptions = {
headerLeft: (
<Button
onPress={() => alert('This is a back button!')}
title="Title"
color="#fff"
/>
),
};
}
I've been experimenting in React Native and have noticed the expo init command now brings in a newer base codebase to start from. The issue I'm having is related the header not hiding when we use the headerShown prop in the options of the navigator component.
import * as React from "react";
import { createBottomTabNavigator } from "#react-navigation/bottom-tabs";
import TabBarIcon from "../components/TabBarIcon";
import HomeScreen from "../screens/HomeScreen";
import LinksScreen from "../screens/LinksScreen";
const BottomTab = createBottomTabNavigator();
const INITIAL_ROUTE_NAME = "Home";
export default function BottomTabNavigator({ navigation, route }) {
// navigation.setOptions({
// headerShown: false
// });
return (
<BottomTab.Navigator initialRouteName={INITIAL_ROUTE_NAME}>
<BottomTab.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false,
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-code-working" />
)
}}
/>
<BottomTab.Screen
name="Links"
component={LinksScreen}
options={{
headerShown: false,
tabBarIcon: ({ focused }) => (
<TabBarIcon focused={focused} name="md-book" />
)
}}
/>
</BottomTab.Navigator>
);
}
The code above is the different methods I've tried to apply the header shown. I have also tried doing it the older way by creating the static method for navigation options in each of the page components. Neither seems to work, and what's annoying is the docs have suggested applying it to the navigator is the way to use it in this version of react-navigation.
The Home page component looks like so:
export default function HomeScreen() {
return <View style={styles.container}></View>;
}
HomeScreen.navigationOptions = {
headerShown: false
};
And the Links page looks almost identical minus the render function.
For All Screen on this Stack
<LoggedStack.Navigator
screenOptions={{ headerShown: false}} >
<LoggedStack.Screen name='Dash' component={MyDrawer} />
<LoggedStack.Screen name="Login" component={Login} />
</LoggedStack.Navigator>
For Specific Screen
<Drawer.Screen name="Dept" component={DepartMentScreen} options={{ headerShown: false}} />
So as it turns out the new base code creates a stack navigator that references the screen with the bottom tab navigator applying the header shown prop to the stack navigator disabled the headers on the pages
<Stack.Navigator screenOptions={{ headerShown: false }}>
I am creating a React Native app that's supposed to have a custom header for basically all screens, so I've made a Navbar component that I have set as a default header which works fine. Although when I navigate between screens in the app, the header is not transitioning as it is supposed to be. With a standard header, the old one fades out and the new one in when you navigate to another route in the stack, but mine just replaces itself automatically.
I believe the problem might revolve around that all screens have the "same" Navbar component, that is there is not a new one created for each screen, so when I navigate it just updates the props of the navbar and re-renders it.
Here is the navigator setup
App.js
...
const stackNavigator = createStackNavigator(
{
...
}, {
initialRouteName: "Home",
defaultNavigationOptions: ({ navigation }) => ({
header: (headerProps) => {
return <Navbar navigation={navigation} {...headerProps.scene.descriptor.options} /> //Will pass navigationOptions as props
},
animationEnabled: true
}),
navigationOptions: {
animationEnabled: true,
},
headerTransitionPreset: 'fade-in-place',
transitionConfig: () => {
return {
transitionSpec: {
duration: 2000, //Easier to see the navigation animation
}
}
}
);
The Navbar component is a regular React.Component, along with all other screen components if that makes any difference
Are there some kind of props I should take care of? I have search all over the web, especially on the React Navigation docs and API reference but have found no info.
Here are some examples of how it looks with my custom navbar and how it looks with the default header. Note that the default fades during the whole transition while my custom just switches view in an instance. The only change I made was comment out the header: ... part
Custom
https://imgur.com/PXvm7gA
Default
https://imgur.com/yk3jyr9
If I understood it correctly your header is not navigating with screen? If that is the case use headerMode='screen' According to react-navigation 5.*
<NavigationContainer>
<Stack.Navigator initialRouteName="List" headerMode='screen'>
<Stack.Screen name="Article"
component= { Article }/>
<Stack.Screen name="List"
component= { List }/>
</Stack.Navigator>
</NavigationContainer>
header mode set to screen navigate the header with screen which is common in android where as if you set it to float header will not navigate but changes its content which is common in ios. set it to none if you dont want header.
I'm on react-navigation#5.1.3 and the following works for me (taken from my code):
<Stack.Navigator>
<Stack.Screen
name={"route1"}
component={Route1View}
options={{title: "route 1 title"}}
/>
<Stack.Screen
name={"route2}
component={Route2View}
options={({navigation, route}) =>({
title: "route 2 title",
header: (props) => <CustomHeader {...props} />
})}
/>
</Stack.Navigator>
If you start with route 1, the default header is shown. When you push route 2, the custom header will fade in. When you leave, the default will show once again.
You can specify any component for left and right in the header in the screen configuration, you can have something like this:
createStackNavigator({
home: {
screen: (props) => (
<View style={{flex: 1}}>
</View>
),
navigationOptions: () => ({
title: `Title`,
headerRight: (
<React.Fragment>
<Button title={'First'} />
<Button title={'Second'} />
</React.Fragment>
)
})
},
});