I'm having problem in implementing 'goBack' function in React-navigation/drawer 6 ("#react-navigation/drawer": "^6.1.4", precisely).
I was able to perfectly achieve it in react-navigation/drawer 5 with the following codes:
<Drawer.Navigator>
<Drawer.Screen
....
options={{
header: ({ scene }) => {
const { options } = scene.descriptor;
const title = options.headerTitle;
return (
<MyHeader
title={title}
iconName={"menu"}
goback={
()=>scene.descriptor.navigation.goBack()}
/>
);
},
}}
/>
</Drawer.Navigator>
The same revised codes for react-navigation/drawer 6 (as shown below) will take me back to the initial screen (and not on previous screen). It will also give a warning and error message.
<Drawer.Navigator>
<Drawer.Screen
....
options={{
header: ({ navigation, route, options }) => {
const title = getHeaderTitle(options, route.name);
return (
<MyHeader
title={title}
iconName={"menu"}
goback={
()=>navigation.goBack()}
/>
);
},
}}
/>
</Drawer.Navigator>
Please, how can I achieve this 'goBack' in react-navigation/drawer 6?
You need to specify backBehavior
<Drawer.Navigator backBehavior="history">
Please read the upgrade guide when upgrading which documents these changes: https://reactnavigation.org/docs/upgrading-from-5.x/#the-default-value-for-backbehavior-is-now-firstroute-for-tabs-and-drawer
I've faced the same issue and tried to fix it in the way #satya164 provided but then I realised that I just had wrong navigation structure.
If you want to go back from screen B to screen A, they should probably be nested in one Stack rather than in Drawer.
In my case at least it was a better solution.
Related
Hi guys I'm still new to react native, I wanted to ask how can I pass a parameter to another screen? I'm currently doing a login system which going to access the email of the user and show their email on their profile page after they logged in. I've tried { this.props.navigation.state.params.Email } in the profile.js but it shows an error says that
TypeError: undefined is not an object (evaluating 'this.props.navigation.state.params')
I saw some related solutions as well but those were for stack navigator but I'm using bottom tab navigation so I wasn't sure if they work in the same way.
login.js
this.props.navigation.navigate('Profile', { Email: email });
app.js
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={getTransaction} />
<Tab.Screen name="addTransaction" component={addTransaction} />
<Tab.Screen name="Register" component={register} />
<Tab.Screen name="Login" component={login} />
<Tab.Screen name="Profile" component={profile} />
</Tab.Navigator>
</NavigationContainer>
);
}
in your Profile screen page:
export const profile = ({route}) => {
const { Email } = route.params;
}
Then you can use 'Email' as a regular constant.
https://reactnavigation.org/docs/params/
I believe you should get the params from props.router instead of props.navigation.
I'm want to render the headerLeft conditionally, but it doesn't matter what I do it simply ignores me.
Follow my code:
return (
<Stack.Navigator>
{screens.map((screen, index) => {
const isQuestion = screen.screen === "Question";
return (
<Stack.Screen
key={index}
name={screen.name}
component={getTemplate}
initialParams={{ index, screen }}
options={{
...DefaultNavigationOptions()[screen.theme],
headerBackTitleVisible: false,
title: lessonName,
headerTintColor: isQuestion ? 'red' : '', // <- works!
// headerBackImage: Variable.icons.circle, // <- attempt that did not work
// headerLeft: () => { // <- attempt that did not work
// return null;
// },
headerLeft: props => ( // <- not working
<HeaderBackButton
{...props}
disabled={true}
/>
),
headerRight: () => ( // <- works!
<HeaderButton
handleOnPress={() => onExit()}
icon={Variable.icons.exit}
theme={screen.theme}
/>
),
}}
/>
);
})}
</Stack.Navigator>
);
What I trying for now is simply to change the headerLeft somehow, just to see if it is working so after I can make it conditional.
Already try to find a solution in the docs https://reactnavigation.org/docs/stack-navigator and also in other questions done here on stackoverflow, but no luck so far.
"#react-navigation/native": "^5.7.2",
"#react-navigation/native-stack": "^5.0.5",
"#react-navigation/stack": "^5.8.0",
Would appreciate any help.
So, the problem was that I was using const Stack = createNativeStackNavigator(); instead of const Stack = createStackNavigator();
More info here https://reactnavigation.org/docs/native-stack-navigator/ if someone is interested.
Well i had a similar problem as you, but my solution instead of returning NULL was returning an empty text. That did the work. Why this? Well after reading the documentation it says clearly whatever you write there will replace the back button, so why not an empty Text. XD
//? For some reason NULL wasnt working, so i went with an empty <Text>.
<Stack.Screen
name="Dashboard"
component={DashboardScreen}
options={{headerLeft: () => <Text></Text>}}
/>
I am new to react native and its navigation modules. I have a simple dashboard.js file where I am using tab navigator like this -
<Tabs.Navigator tabBarOptions={{ activeTintColor: '#ff5757' }}>
<Tabs.Screen
options={{
tabBarIcon: ({ color }) =>
<Icon name='star-border' size={30} padding={15} color={color} />,}}
name={'Orders'}
component={Order}
initialParams={{user}}
/>
<Tabs.Screen
component= {AnotherComponent}
/>
As you can see I am passing InitialParams where I have user props. And I can easily get it in Order component by route.params.
However, in my dashboard component I also have a method that runs every 1 minute and updates user props.
I can't get the updated value of user props in Order component. I am stuck with this for 2 days. In the past I have done like this -
<Tabs.Screen
component = {() => <SomeComponent props= {props}/>}
And it worked fine. But with react-navigation 5 its not working any more.
Please help me if anyone knows. plz.
Thanks a lot.
The initial props seems to be a constant also as per the documentation you have to use redux or context api to update the badge counts in the tabs so I think it will be better to take that approach to handle this problem. Came up with a count changing scenario just like yours using context API.
const CountContext = React.createContext(0);
function HomeScreen() {
return (
<View>
<CountContext.Consumer>
{value => <Text>Home! {value}</Text>}
</CountContext.Consumer>
</View>
);
}
const MyTabs = () => {
const [count, setCount] = React.useState(0);
return (
<CountContext.Provider value={count}>
<View style={{ flex: 1 }}>
<Text>{count}</Text>
<Button title="count" onPress={() => setCount(count + 1)} />
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} />
<Tab.Screen name="Settings" component={SettingsScreen} options={{ title: 'My home 2' }} />
</Tab.Navigator>
</View>
</CountContext.Provider>
);
};
This way you can skip the navigation params and directly send data to the tab, and this data can be read from other tabs or somewhere down the tree as well.
You can check the full snack here
https://snack.expo.io/#guruparan/5c2b97
I have a nested drawer navigator below, I am using a custom component in the header:
header: props => {
return <DrawerHeader {...props} />;
},
When I try and access from props the current route in my header, like below, the title is undefined, how can I get the current route?
render() {
const {
navigation,
videos,
search: {term},
scene: {
route: {routeName: title}, // undefined
},
} = this.props;
return (
<View>
<View style={styles.container}>
Navigator:
function DrawerStack() {
return (
<Drawer.Navigator>
<Drawer.Screen
name="VideoEpisodesScreen"
component={VideoEpisodesScreen}
/>
<Drawer.Screen name="TestYourselfScreen" component={TestYourselfScreen} />
<Drawer.Screen name="MyResultsScreen" component={MyResultsScreen} />
<Drawer.Screen name="AboutScreen" component={AboutScreen} />
<Drawer.Screen name="TestsScreen" component={TestsScreen} />
<Drawer.Screen
name="BookmarkedVideosScreen"
component={BookmarkedVideosScreen}
/>
</Drawer.Navigator>
);
}
export default function AppNavigator() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={stackOptions}
/>
<Stack.Screen
name="Drawer"
component={DrawerStack}
options={drawerOptions}
/>
<Stack.Screen
name="MyResultsScreen"
component={MyResultsScreen}
options={options}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Funnily enough I had the exact same problem and I found your question after it was just an hour old. Essentially the problem is that React Navigation will only give you the current route of the navigator containing the header. If you have a nested navigator, you won't be able to get it.
It looks like this is somewhat intentional, but I've found that by manually querying the state of the navigator, you can drill down to the "deepest" navigator route. Note that while this works for react-navigation 5, it may not work in the future.
You can iteratively query the nested state like this:
const state = navigation.dangerouslyGetState();
let actualRoute = state.routes[state.index];
while (actualRoute.state) {
actualRoute = actualRoute.state.routes[actualRoute.state.index];
}
Note that this is extremely brittle, but it seems to work good enough for my use cases. You should consider creating an issue/feature request on the react-navigation repository for supporting this use case officially.
React Navigation v6 solution:
A nested route object can be discovered through parent Screen listeners. It's given in a callback argument, and can be passed to getFocusedRouteNameFromRoute to get the route name. In the example shown below, I chose to utilize it during the event 'state' (whenever state changes in the nested stack), but you can use it elsewhere if you want.
<Screen
listeners={({ route }) => ({
state: () => {
const subRoute = getFocusedRouteNameFromRoute(route)
// Your logic here //
}
})}
/>
I think in react-navigation 5, you can access route from this.props
const { route } = this.props;
I am new to react native and I haven't seen this question asked by anyone or haven't found a way around this.
Using react navigation 5 with expo.
Currently I have a the following app structure:
Stack navigator inside of drawer navigator.
Example of page structure:
Drawer Navigator ( links ):
Home (RouteStack)
Screen 1
Screen 2
Screen 3
RouteStack( screens) :
Home ( initial route )
Screen 1
Screen 2
Screen 4
How can I get Screen 1/Screen 2 link in drawer navigator load RouteStack: Screen 1/Screen 2?
These links are provided to easily jump to the required screen.
Need some guidance on how to achieve this.
I have thought of the possibility of drawer inside of stack, but there are screens inside of drawer that may not be listed in the stack. Hence, went with stack inside of drawer.
I have also tried to do a navigation.navigate(route.name) inside of RouteStack
Sample code:
Drawer navigator:
<NavigationContainer>
<Drawer.Navigator drawerContent={(props, navigation) => <CustomDrawerContent {...props} {...navigation} />}>
<Drawer.Screen name="Home" component={RouteStack} />
<Drawer.Screen name="MyItems" component={RouteStack} />
<Drawer.Screen name="ContactRep" component={RouteStack} />
<Drawer.Screen name="Settings" component={SettingInfo} />
</Drawer.Navigator>
</NavigationContainer>
Stack navigator (RouteStack) looks like this:
<Stack.Navigator
initialRouteName="Home"
screenOptions={{ gestureEnabled: false, headerTitleAlign: 'auto' }}
// headerMode="float"
>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: '',
headerStyle: {
backgroundColor: '#fff',
},
headerTintColor: '#000',
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: props => <HeaderLeftMenu {...props} />,
headerRight: props => <HeaderRightMenu {...props} />,
headerTitle: props => <HeaderTitle {...props} />
}}
/>
<Stack.Screen
name="ContactRep"
component={ContactRep}
options={{ headerTitle: props => <HeaderTitle {...props} /> }}
/>
<Stack.Screen
name="MyItems"
component={MyItems}
options={{ headerTitle: (props, navigation) => <HeaderTitle {...props} /> }}
/>
</Stack.Navigator>
Thanks in advance and help is appreciated.
Your method is fine. But to clarify your ideas I will give you an example.
Assume I have a main Drawer. In that drawer I can navigate to 2 different screens. Inside those screens, I can navigate and do diferent things (like going to sub-screens), but never go outside the drawer.
To do this, we would have to created nested navigators. This meaning, one type of navigator if going to be inside another one. In our case of example:
<Papa Drawer>
<Screen 1 component={StackSon1}>
<Screen 2 component={StackSon2}>
<Papa Drawer>
And then StackSon1, for example, will look like this:
StackSon = () => {
return (
<Stack.Navigator>
<Stack.Screen>
<Stack.Screen>
...
)
}
React Navigation will also handle every drawer separately, meaning that you don't have to worry about the user creating an infinite chain of open screens.
Also, remember that, when we Nest navigators using a function (like I did) we must use return (or the simplified version of return with just parenthesis)
Hope it helps.