Questions tagged [react-navigation]

An easy-to-use navigation solution to be used in React Native projects

React Navigation is a easy to use navigation solution for projects. It supports both Android and iOS platforms with platform specific UI design and behavior.

This library completely coded with Javascript which let's you customize any part of it with the desired behavior without the need of any native code knowledge.

It is built and funded by Expo, with contributions from the community.

Resources

8419 questions
2
votes
2 answers

React-Native goBack() not navigating to previous screen

I’ve been struggling to get goBack() working inside a drawer navigator and I’m not even sure my whole approach here is correct. I want a side menu that functions independently from the main screens, as the side menu will only handle global…
2
votes
1 answer

React Navigation App Structure Tabbar visible

I have simple image that illustrates the issue this is the app structure simplified. I have a tabbar navigator that has three screens A B C. TabBar A is a stack navigator that includes D and E I also have a Stack navigator that includes F and…
user2252310
  • 105
  • 1
  • 2
  • 7
2
votes
2 answers

Prevent React Native remount of component on context value change

In a chat app I am building I want to deduct credits from a user's account, whenever the users sends a message and when a chat is initiated. The user account is accessible in the app as a context and uses a snapshot listener on a firestore document…
2
votes
0 answers

How do I properly type nested React Navigation navigators?

For my top level navigator, I have: type NavigationParamList = { Instances: undefined; Default: undefined; Settings: undefined; Compose: undefined; }; const AppStack = createNativeStackNavigator();
Shamoon
  • 41,293
  • 91
  • 306
  • 570
2
votes
1 answer

How do you type a react-navigation navigator with typescript when it can accept params

I am trying to type a React-Navigation (v6) navigator which can accept a param. But I'm facing an issue and I cannot figure out what the problem is. What I want is to be able to call my navigator Wizard with params and without params. This is my…
alexmngn
  • 9,107
  • 19
  • 70
  • 130
2
votes
1 answer

Nesting in Tailwind Provider and Navigation Container

I'm using React Native to develop a mobile app. I am using Tailwind CSS and React Navigation in it. Should I wrap my App component like this
2
votes
1 answer

Navigating in BottomTabBar within nested Stack Navigator causes more renders than previous

I have a bottom tab bar, with a screen that I need to be 'hidden' from the tabs (e.g. no tab shown). So I created a Native Stack and have the initial screen of that stack set to the bottom tab stack. However - when I navigate using the bottom tabs,…
2
votes
2 answers

Blank screen after building app in React Native

After installing and customizing my basic react navigation setup, After building the app a blank screen appears with no errors in the console. I added {{flex:1}} to the SafeAreaView I tried uninstalling, deleting node modules, gradle clean and…
2
votes
1 answer

React-Native: Getting an invalid value for the component prop for the screen 'Home' (invalid react component?)

I was coding a MainContainer.js file to function as a button navbar for my react-native based app. Here when defining the screens of the tabs (using Tab.Screen), I always seem to get this error: Error: Got an invalid value for 'component' prop for…
AouxWoux
  • 71
  • 5
2
votes
0 answers

The parameter of react navigation deeplink comes out as undefined only when the app is closed

I am implementing react native/android/react navigation deeplink. And I'm using react-native v0.68, react-navigation v6.xx https://reactnavigation.org/docs/configuring-links/ In the case of foreground or background in the app open state, insert…
2
votes
0 answers

Fast Refresh broken after setState()

I know theres a lot of similar questions/answers about Fast Refresh being broken. Mine's a little different I believe. I can point to the line that causing it to be broken, and I'm trying to understand why. Package.js: "react":…
James Dunay
  • 2,714
  • 8
  • 41
  • 66
2
votes
1 answer

RN - React Navigation type for map of screens

I have a navigator with the type definitions: export type RootStackParamList = { User: undefined; Login: undefined; ... ... Profile: undefined; ProfileDetails: undefined; } const Stack = createStackNavigator(); Now,…
Wasteland
  • 4,889
  • 14
  • 45
  • 91
2
votes
0 answers

React Native - Screen flicker on Android with stack navigation

On Android only: every time when navigating between screens in stack navigation there will be a white flickering. This is much harder to see on a light background but on a black screen background it is very noticeable. I have already found the…
2
votes
0 answers

How do I navigate to a specific Screen instead of the one I came from when using the back gesture, back softkey or back button in the navigation bar?

I have an App where the user submits some data on Screen B, when the request is successfull the App navigates to a Screen C, which shows a summary of the submitted data. This Screen C is also available from other Screens X and Y. The behaviour I…
NoLoHo
  • 76
  • 8
2
votes
0 answers

react native Bottom Tabs Navigator ref

is there a way to add ref for each tab in the Bottom Tabs Navigator ? like this.childComponent = component} />
Ryze
  • 83
  • 1
  • 1
  • 4