Stack Overflow
Stack Overflow

Questions tagged [react-navigation-v6]

Version 6 of the routing and navigation library for Expo and React Native apps.

Only use this tag for when V6 specific cases are involved.

See the official docs for changes compared to : https://reactnavigation.org/docs/6.x/upgrading-from-5.x#general-changes

251 questions
41
votes
6 answers

'Stack.Navigator' cannot be used as a JSX component

There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator The issue saids that the types dont match with JSX.element at the end of the messages is more specific: Type '{}' is not…
Jerome Bravo
  • 583
  • 2
  • 5
  • 10
10
votes
1 answer

Type error in getting route params within nested navigator using Typescript [react-navigation v6]

Having a navigation type definition as bellow, when I navigate from e.g AOne to BTwo with id:99 the console log of props.route.params shows correct info. But props.route.params.id throws type error TypeError: undefined is not an object (evaluating…
Amir-Mousavi
  • 4,273
  • 12
  • 70
  • 123
10
votes
1 answer

React Navigation 6 (RN6) - Card stack within a modal

I have a question about a card stack inside a modal stack as illustrated in the attached image. So, just to repeat what I wanted to do. I have a screen with the option presentation: 'modal' that opens the green modal. Inside that green modal, I have…
Thomas Dittmar
  • 1,764
  • 1
  • 23
  • 42
8
votes
0 answers

Organize screen/group structure in react navigation v6

I am trying to migrate an old react navigation v4 to v6 (more than 100 routes). But I am facing to how to find the best structure to split group of screens in separate file/component. I have tried this, to move out modals: const ModalGroup = () =>…
Aure77
  • 3,034
  • 7
  • 33
  • 53
7
votes
2 answers

useEffect is not called when navigating back to screen - React Navigation

I have a screen that makes a call to an api to fetch some data which is then displayed An issue that I am seeing is that when I navigate away from the screen (I am using react-navigation 6.x) and then go back to it useEffect() is not being…
Richlewis
  • 15,070
  • 37
  • 122
  • 283
6
votes
1 answer

Sharing screens over multiple stacks/navigators in react-native using react-navigation v6

I have a few screens which i want to share among multiple stacks. I found a similar problem on github but with no working solution. When navigating to a shared screen i want to be able to go back to the screen where i am navigating from. Any ideas…
Quantal
  • 309
  • 1
  • 15
6
votes
1 answer

Impossible to have two menu on the same screen

The goal I'm trying to achieve a screen that looks like this. There are two menus, one is the burger menu created by createDrawerNavigator from react-navigation (top left corner). The other menu is the bottom button created by…
Mcsky
  • 1,426
  • 1
  • 10
  • 20
6
votes
1 answer

react-native-safe-area-context throw `Unresolved reference:` error

While trying to upgrade react-native-navigation I got the following error, after upgrading react-native-safe-area-context Note: Recompile with -Xlint:deprecation for details. e:…
suther
  • 12,600
  • 4
  • 62
  • 99
6
votes
7 answers

How to hide tabBar in specific Screen in React Navigation 6?

How to hide tabbar in specific screen in react-navigation 6 ... Without changing navigation structure as it's the only option available in the docs here
Hend El-Sahli
  • 6,268
  • 2
  • 25
  • 42
6
votes
1 answer

How to overwrite global RootParamList in react-navigation v6

In the upgrade guide to react-navigation v6: https://reactnavigation.org/docs/upgrading-from-5.x/#ability-to-specify-a-type-for-root-navigator-when-using-typescript it states that you can use declare global { namespace ReactNavigation { …
erksch
  • 501
  • 4
  • 14
5
votes
1 answer

React navigation v6 Modal with ScrollView inside - swipe down modal when top scrollview reached

I have a problem with the modal-presentation of react-navigation v6 to present a modal with ScrollView inside of it. Actually if I enable gesture to swipe down the modal, it doesn't work if there is a ScrollView inside and I can swipe down only on…
Alessandro Izzo
  • 61
  • 3
5
votes
4 answers

Possible to hide tab navigator from screen in stack nested in tab?

I have a Stack Navigator with some screens and an initial route like "Profile", and when I navigate to "Options" via a navigation.navigate("Options") from the "Profile" screen, I don't want to see the bottom tabs. Here's an example of what I…
patataskr
  • 325
  • 5
  • 15
5
votes
0 answers

React navigation 6 headerRight truncated if title is too long

I updated my application to React Navigation 6. In all of my screens I customised the headerBackImage, and added some headerRight with a Text. In React Navigation 5, if the headerTitle was too long, it's was directly truncated and ... was added at…
Cracs
  • 425
  • 1
  • 8
  • 29
5
votes
1 answer

React Navigation V6 using useCallback inside useFocusEffect issue invalid-hook-call

React navigation V6 documentation shows examples of using useCallback inside useFocusEffect. However when I use the same code, I encounter invalid-hook-call. link: https://reactnavigation.org/docs/use-focus-effect/ example: import { useFocusEffect }…
javapedia.net
  • 2,531
  • 4
  • 25
  • 50
5
votes
0 answers

How to use cardStyleInterpolator in react navigation 6 in react native

According to the documention in version 6, we can use the cardStyleInterpolator like this import { CardStyleInterpolators } from '@react-navigation/stack'; // ...
Wahas Ali Mughal
  • 187
  • 2
  • 11
1
2 3
…
16 17