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
1
vote
1 answer

React Navigation v6: How to detect when screen comes into or out of focus?

In React Navigation v4, you could wrap your component in withNavigationFocus() and then trigger a function using componentDidUpdate(prevProps) { if (!prevProps.isFocused && this.props.isFocused) { ... } } Is there a way to do this in React…
gkeenley
  • 6,088
  • 8
  • 54
  • 129
1
vote
2 answers

React Navigation v6: best way to pass additional props to screen?

In the docs for React Navigation v6, in the Passing Additional Props section it says Sometimes we might want to pass additional props to a screen. We can do that with 2 approaches and the first approach it recommends is React Context. I've never…
1
vote
0 answers

React navigation shared element transition forward works but does not 'transition' back

I'm having a nested stack with the "react-navigation-shared-element" (0.8.4, Expo sdk 37, react native 0.70.5, react-navigation 6) Clicking on a given card results in the proper transition to the card as expected. However, clicking on the back…
1
vote
0 answers

Changing Params of another screen using setParams in CommonActions Not Working - react navigation

what i'm trying to do is to change Params of two screens (screen2, screen3) from another screen (screen1) the Param name i want to chage is resetInputs The main : using MaterialTopTabNavigator -> NavigationContainer -> Tab.Navigator ->…
1
vote
1 answer

Configuring Firebase Dynamic Links with React Navigation

I am struggling to configure Firebase Dynamic Links with React Navigation. The dynamic link triggers successfully the App. However, it does not navigate to the correct route (screen.) I am working on Android, and have not, yet, started the more…
1
vote
0 answers

Resetting navigation state after a deep link

After the app receives a deep link and navigates to it, the route (screen) that was specified as a deep link becomes the home screen! After receiving the deep link, each time the app is updated (and automatically re-loaded on the Android emulator),…
Bilal Abdeen
  • 1,627
  • 1
  • 19
  • 41
1
vote
0 answers

Two tabs (Tab.Navigator) using one component to display lists, only data is different, Back button for the details page works wrong

when I tried to refactor the mobile app of 'Notes' from ‘JavaScript Everywhere’ book, a problem The structure is like this: RootNavigator(Stack.Navigator) ---AuthLoading(Screen) ---Auth(Stack.Navigator) --SignIn(Screen) …
1
vote
0 answers

Alternative of withNavigationFocus from @react-navigation/native in react navigation v6

Is there any alternate to withNavigationFocus imported from @react-navigation/native? or can we write our own withNavigationFocus just like we can write our own withNavigation like this https://stackoverflow.com/a/63818841/14341861.
1
vote
0 answers

Navigate to nested navigator in other stack without delay or animation

How can you navigate to a different stack's child navigator without animation or delay using react-navigation/native@^6.0.13? I'm able to navigate from CreateOrderScreen to OrderScreen but because the OrderNavigator is a child of HomeNavigator…
Reft
  • 2,333
  • 5
  • 36
  • 64
1
vote
2 answers

react-navigation 6 swipe from top to bottom closes current stack screen android 9

I have upgraded from react-navigation 5 to 6: - "@react-navigation/bottom-tabs": "^5.10.6", - "@react-navigation/material-top-tabs": "^5.3.15", - "@react-navigation/native": "^5.8.6", - "@react-navigation/routers": "^5.6.0", - …
1
vote
0 answers

headerRight button misaligned

I am having trouble aligning the headerRight consistently across Screens. I have a StackNavigator with a nested TabNavigator: const Tabs = ({navigation}) => { return ( ( …
1
vote
1 answer

Type definition for react-navigation-v6

I am not able to determine the correct type definition for a Stack group with screens (see TestStack.Group and the nested TestStack.Screen). The navigation stack: const TestStack = createNativeStackNavigator(); function…
Michael Brenndoerfer
  • 3,483
  • 2
  • 39
  • 50
1
vote
1 answer

How to pass Search Bar input as props to another screen in react navigation?

I have a stack navigator where i have defined the searchScreen where i wish to get the input data and also have a SeachBar component which i attached in the stacknavigators headers as custom header. My question is, how can i get the typed input data…
1
vote
1 answer

How to add navigation animation in @react-navigation 6.xx

I want to add simple horizantal transition in my react-native app on both IOS/Android, I have tried this Implementation but it didnt' work:
1
vote
1 answer

React Navigation 6.x => Listen to any Screen event from any Navigator (root and nested ones)

I'm using reaxt-navigation 6 in a react-native 0.68 project: "@react-navigation/bottom-tabs": "6.3.1", "@react-navigation/drawer": "6.4.1", "@react-navigation/native": "6.0.10", "@react-navigation/stack": "6.2.1", We can listen to…
Żabojad
  • 2,946
  • 2
  • 32
  • 39