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…
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.
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 }) =>…
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…
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.…
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:…
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…
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…
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…
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…
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…
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…
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…
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.