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

Navigation in React Native doesn't work after page refresh

I set up the react-native app with react-native-web. In this app I need to have navigation, so I added react-navigation/native package according to the getting started guide. In mobile platforms everything works well, but in browser navigation…
2
votes
1 answer

React Native Navigation Not working after async storage get Item

const AuthLoadingScreen = ({ navigation }) => { // auth init function const _bootstrapAsync = async () => { // Fetch token from storage const session = await AsyncStorage.getItem('@todo-graphql:session'); // If session exists,…
2
votes
0 answers

Unable to resolve "npx expo install react-native-reanimated@~2.9.1"

I'm following a tutorial to create this app, and I understand a lot has changed since it was posted. I followed the instructions based and inputted the code that was given in the guides. Now it seems that I am having trouble with conflicting…
2
votes
2 answers

Deeplinking multiple paths for a screen in react-navigation 6+

I have some screens that need to support multiple deep linking paths like this: export const navigationConfig = { prefixes: supportedDeepLinkURLs, config: { screens: { Root: { path: '', screens: { Article: { …
Florin Dobre
  • 9,872
  • 3
  • 59
  • 93
2
votes
2 answers

How to set the background color of Tab.Screen?

As you can see below, I've tried many ways of setting the background color to transparent like this (UI required), all to no avail. The background remains grey-ish like the image
mharis404
  • 23
  • 6
2
votes
1 answer

Execute the same function on each screen for all screens when they get focused in with React Navigation

How can I execute the same function on each screen with React Navigation? I'm using React Native and TypeScript. I have a navigation with home, profile, etc... I have the below function and I want it to be executed when you navigate to profile,…
2
votes
0 answers

React Navigation / Native flickers when use custom header component

When I change screens with react-native-navigation I have a flicker of underlying background on ios, when I change screens with standard navigation everything is going smooth but with the custom one it look like it applies background color too late,…
seven
  • 1,183
  • 14
  • 33
2
votes
1 answer

How to send Selected Custom Checkbox data to next page in react native?

Here I have created toggle custom checkboxes and those are rendered within FlatList with Name. Now which checkboxes are checked i want to send those names into next screen using navigation. So how can i implement that functionality, if anyone knows…
2
votes
2 answers

React Native: Run actions after succesfully logged in

I'm creating a React Native app in which some actions like adding to favorites require the user to be logged in. The problem If a certain action needs authentication, the following flow is executed: User tab over the favorite button(Protected…
Cristian Flórez
  • 2,277
  • 5
  • 29
  • 51
2
votes
1 answer

How do you get the screenOptions in a React Navigation screen component?

I know I can do setOptions on the navigation object, but I can't seem to find the get version of it. How do I obtain that information, namely I want to know if headerLarge is enabled. What I have done as a workaround for now is have a useEffect on…
Archimedes Trajano
  • 35,625
  • 19
  • 175
  • 265
2
votes
3 answers

How to navigate to a screen which is not on the in React-Nativ?

I have a and it has four elements. What i try to do is, to press a button inside a specific and open an another screen on top of it. But i don't want this another screen to have a navigator in…
caliskanata
  • 488
  • 1
  • 2
  • 14
2
votes
0 answers

SafeAreaView is not working inside modal screen

I have a modal screen (presentation: 'modal') and inside it I have a scrollable FlatList. The problem is that I cannot achieve spacing at the bottom together with transparent bottom safe area. I use SafeAreaView from…
2
votes
2 answers

React router v6 - Navigating from parent route to nested route without showing the parent route

I'm trying to use nested routes for this code here in my Router.js: return ( } /> }> }/> …
2
votes
2 answers

Properly typing route.params in custom bottom tab bar

I cannot properly type route.params for a bottom tab navigator. For example, I have the navigator and params type like this: export type BottomTabParamList = { ListScreen: { i18nKey: string }; DetailsScreen: { i18nKey: string }; …
2
votes
0 answers

React Navigation - Dynamic Height of Container

I am trying to achieve a bottom sheet for a mobile app, with a navigation. I am using react-native-bottom-sheet and react-navigation v6. The react-native-bottom-sheet works fine with dynamic height, however the issue i have is with…