Questions tagged [react-navigation-stack]
640 questions
45
votes
23 answers
White background flashing when switching screens - React-Navigation v5
I'm migrating a RN project version 4 to 5.
When switching screens there was an issue with a white background flashing in.
In v4 this was solved by setting cardStyle: { backgroundColor: material.containerBgColor } in the StackNavigation…

haxpanel
- 4,402
- 4
- 43
- 71
34
votes
20 answers
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider error with @react-navigation/stack
When I am trying to use import {createStackNavigator} from @react-navigation/stack, it gives me an error
Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider
I have tried finding a solution, but nothing helps.

Zeeshan
- 371
- 1
- 3
- 6
32
votes
1 answer
Couldn't find a navigation object. Is your component inside a screen in a navigator?
In My below code when I use useNavigation() then it gives an error like my quiestion
How to use useNavigation, Please any one can solve this error... ERROR:Couldn't find a navigation object. Is your component inside a screen in a navigator?
I…

Jagdish Suryawanshi
- 359
- 1
- 4
- 13
23
votes
9 answers
Unable to resolve "@react-navigation/native" from "App.js" - React Native + How to Solve?
undefined Unable to resolve module @react-navigation/native from App.js: @react-navigation/native could not be found within the project.
If you are sure the module exists, try these steps:
1. Clear watchman watches: watchman watch-del-all
2.…

Sounak Roy
- 321
- 1
- 3
- 6
22
votes
6 answers
React Native clear the previous screen from the navigation stack
I am developing a React native application for learning purposes. I am now implementing navigation using React Navigation. I am using stack navigation. But I cannot find a way to remove the previous screen from navigation history and kill the app. …

Wai Yan Hein
- 13,651
- 35
- 180
- 372
21
votes
3 answers
Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
Following is the hierarchy of my app navigators
├── appNavigator ( Bottom Tab Navigator)
├── feed (Stack Navigator)
postDetailScreen
pageDetailScreen
ProfileDetailScreen
...other screens
├── notifications (Stack…

Ayesha Iftikhar
- 1,028
- 2
- 11
- 27
21
votes
4 answers
How to mock useNavigation hook in react-navigation 5.0 for jest test?
i want to mock useNavigation hook used inside my functional component. Any workaround how to mock it using jest?
import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from…

Renish Ghetia
- 233
- 1
- 3
- 6
19
votes
2 answers
How to reset nested navigators (react-navigation v5)
Having two sets of stack navigators;
const SetOneScreens = () => (
…

Amir-Mousavi
- 4,273
- 12
- 70
- 123
17
votes
6 answers
How to properly type useNavigation in React Navigation?
I'm trying to type the useNavigation from React Navigation. I would like to be able to pass only the name of the route, but I get an error unless I also pass props for that route.
Following the documentation, I understand the implementation should…

Nix
- 5,746
- 4
- 30
- 51
16
votes
3 answers
navigation.navigate is not a function
I'm using navigation to navigate my react native app and I couldn't Paypass this issue. I did as the docs but nothing works for me.
The problem is I'm trying to use the navigation option to add a header and right button to navigate me to another…

Ahmad Alsehaim
- 163
- 1
- 1
- 5
14
votes
2 answers
How to resolve React native navigation Error while installing version 6
I just installed react navigation version 6 and i received below error
Attempt to invoke interface method boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled() on a null object reference
below is my…

James
- 1,124
- 3
- 17
- 37
14
votes
4 answers
withNavigation can only be used on a view hierarchy of a navigator
I'm getting the error:
Invariant Violation: withNavigation can only be used on a view
hierarchy of a navigator. The wrapped component is unable to get
access to navigation from props or context
I don't know why, because I'm using…

BeniaminoBaggins
- 11,202
- 41
- 152
- 287
13
votes
1 answer
React Navigation custom navigator transitions
I'm looking to create a Stack Navigator that can handle animating specific elements between 2 screens. Fluid Transitions looked like a library I could use, but it doesn't support react-navigation 5.X. If there's a package that has this functionality…

Taylor Johnson
- 1,845
- 1
- 18
- 31
13
votes
4 answers
React Native React Navigation Header Button Event
Hello I 'm trying to bind a function in my Navigator Right Button,
But It gives error.
This is my code:
import React, { Component } from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import Modal from…

Andaç Temel
- 216
- 1
- 2
- 9
12
votes
2 answers
React Navigation header title in nested tab navigator
I have a Tab Navigator inside a Stack Navigator and I want the header title to be dynamically configured as the title of the tab selected. Like there's 3 tabs: Home, Profile, Add Item and I want the header title to be "Home" when in the home tab,…

Thiago Nascimento
- 1,073
- 2
- 13
- 40