Questions tagged [react-navigation-v5]
729 questions
5
votes
4 answers
How can i create a transparent background in react navigation 5.x?
I changed the background color to make it more obvious. I want the red container to become transparent.
Is there any way to achieve this?
I am using react-navigation 5 and I created a custom bottom tab bar according to
Bottom-tab-navigator
The code…

user3009752
- 164
- 2
- 9
- 24
5
votes
1 answer
tabBarOnPress Not Available in React Navigation v5
I'm using React Navigation v5 with @react-navigation/bottom-tabs and my tabs look something like this.

Muhammad Yaqoob
- 94
- 1
- 6
5
votes
4 answers
React navigation drawer V5
I'm using react-navigation version 5.
I have tab navigation and drawer navigation together.
I'm trying to add an icon in my header to open/close drawer:
here is my custom right header for toggling the drawer:
const HeaderRight = ({ navigation }) =>…

nfn
- 621
- 2
- 8
- 22
5
votes
1 answer
React Navigation 5 pass params to screen inside nested navigator
We are migrating an app in React Navigation 4 to React Navigation 5.
The project has a BottomTabNavigator which has for one of its routes a nested TopTabNavigator with three tabs. One of the tabs in the BottomTabNavigator when pressed navigates to a…

Dieguinho
- 758
- 2
- 14
- 31
4
votes
0 answers
Partially transparent modal overlay screen with previous screen in the background in react navigation 5 or 6?
We are currently using react-navigation (5.6) in our react native app.
We use a BottomTabNavigator as the root navigation.
const BottomTab = createBottomTabNavigator()
The individual screens under this BottomTab.Navigator are navigators themselves.…

LearnToLive
- 462
- 9
- 25
4
votes
0 answers
params is cached and shows older values on return to the same screen
I use react-navigation 5 and having issues because the params shows older values.
ScreenList.js
const handleFirstUser = () => {
const userDetail = {'name': 'First User'};
navigation.navigate('Details', { detail:…

Wede Asmera Tseada
- 513
- 2
- 4
- 14
4
votes
3 answers
Whenever I am moving to different tab screens it shows the error "Accessing the state property of the route object is not supported"
I am making a food delivery app whenever I am switching to different screens in tab bar it shows the error
Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the…

Ayush Kumar
- 494
- 1
- 6
- 21
4
votes
2 answers
Typescript: Property "navigation" does not exist on type Omit react navigation v5
i am trying to refactor my code in react native from javascript to typescript with this tutorial: https://reactnavigation.org/docs/5.x/typescript/#nesting-navigators
By doing types for react navigation v5 i got an error:
Property 'navigation' does…

mradex77
- 118
- 2
- 8
4
votes
1 answer
React Native - drawer not opening from menu icon and not staying open on swipe (React-Navigation v5)
I am using a Minimal example of drawer-based navigation from official documentation (https://reactnavigation.org/docs/drawer-based-navigation/). But the drawer is not opening from the hamburger menu (provided by Drawer Navigation itself) and if I…

Deepak Yadav
- 55
- 7
4
votes
2 answers
Check the render method of `MaterialTopTabNavigator`
I want to create a Top Tab navigator and put two screens Badges.js and Studying.js into Tab when I run it on my device I get an error it says "Error: Element type is invalid: expected a string ..." and "Check the render method of…

Ali Mahmoudi
- 83
- 2
- 8
4
votes
4 answers
Dismiss the nested stack navigator
In my react-native project I am using libraries
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
I have nested navigator, like this:
// root level I have a stack navigator where it contains two screens, `Home` and…

Leem.fin
- 40,781
- 83
- 202
- 354
4
votes
3 answers
undefined is not an object (evaluating 'route.key') React Navigation
I am having trouble getting the stack navigator in react native to work. I am just making blank stack navigators to go inside a bottomTabsNavigator. And I get an error referring to using the route.key. Even if I make a simple Stack navigator I still…

Ryan
- 47
- 2
- 8
4
votes
2 answers
Try to add vertical margin for my navigation header but not working & how to add bottom line for navigation header
I am using React Navigation v5. I try to add some vertical margins for my header. This is what I tried:
navigation.setOptions({
headerStyle: {
backgroundColor: '#f4511e',
marginVertical: 10
},
headerTitleContainerStyle: {
…

Leem.fin
- 40,781
- 83
- 202
- 354
4
votes
1 answer
React Navigation 5, get closest parent navigator name
Imagine you have this navigation system:
-TabNavigator
--TabA
---StackNavigatorA
----ScreenA
----StackNavigatorB
--TabB
---StackNavigatorB
----ScreenB
Is there any way, using…

Victor Molina
- 2,353
- 2
- 19
- 49
4
votes
1 answer
UmnountOnBlur in createMaterialTopTabNavigator
How to unmount my screen when i change my tab. I am using createMaterialTopTabNavigator() from @react-navigation/material-top-tabs package.
i have tried to add unmonuntOnBlur in options but it doesnt work.

akshay2739
- 195
- 2
- 14