Questions tagged [react-navigation-v5]
729 questions
88
votes
31 answers
Invariant Violation: requireNativeComponent: "RNSScreen" was not found in the UIManager
I am getting RNSScreen error even though I have installed all related packages and followed react-navigation guide (https://reactnavigation.org/docs/getting-started#installation) but nothing worked for me.
Amit Agrawal
- 1,059
- 2
- 9
- 14
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
22
votes
3 answers
Custom Tab Bar React Navigation 5
I'm trying to make a tab bar like in the picture bellow, using React Navigation.
I tried some codes, but nothing worked. Some codes are from previous React Navigation Version. The really problem is make the tab bar have a margin from from bottom and…
Tony Starkus
- 556
- 2
- 8
- 25
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
21
votes
4 answers
add icon to drawer react-navigation v5
I'm trying to add an icon to each of the screens in my react-navigation drawer, but the icon doesn't appear.
Here is my code :
function Drawer() {
return (
nfn
- 621
- 2
- 8
- 22
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
18
votes
1 answer
How to wrap multiple stack screens with context provider in react navigation 5?
I would like to achieve something like the following but it is not possible because stack navigator accepts only Stack.Screens as children.
sniib
- 232
- 2
- 12
17
votes
11 answers
React Navigation 5 Hide Drawer Item
I am trying to hide the ability to press one of my routes in the drawer navigator as it is another navigator and the default location in the app. I want the drawer to simply be used for navigating to extraneous routes that don't fit well into user…
SKeney
- 1,965
- 2
- 8
- 30
16
votes
1 answer
How does one get screen options from within a component in react navigation v5?
I dynamically set the "headerShown" screen option but I can't sort out how to read the options from within a functional component
Ive tried the navigation, route and state…
jwanga
- 4,166
- 4
- 26
- 27
16
votes
3 answers
How to pass parent function to child screen in React Navigation 5?
Recently I have started using React Native 0.61.5 and React navigation 5.x. Now I need to pass a parent function into a child screen. For example, I want to change navbar icon by pressing button in tab of TabNavigator nested in StackNavigator.…
matusalem
- 2,461
- 2
- 26
- 35
16
votes
2 answers
React native navigation v5 tab press not working
As seen on the code, tabPress is not called, am i doing it wrong or am i missing something, unfortunately i have not found any code samples for react navigation version 5.
Karli Ots
- 729
- 1
- 8
- 22
15
votes
1 answer
'jumpTo' vs 'navigate' in React (Native) Navigation
Using React Navigation, different types of Navigators have different actions for (programmatically) navigating between screens.
For e.g. the StackNavigator, the 'pop', 'push' etc. have well-documented (different) behavior, compared to the common…
Chris Johansen
- 161
- 6
15
votes
5 answers
switchNavigator with react-navigation 5
With react-navigation 4, I was able to import and use switchNavigator from "react-navigation" package.
import {
createAppContainer,
createSwitchNavigator,
createStackNavigator
} from "react-navigation";
import MainTabNavigator from…
singhspk
- 2,389
- 3
- 23
- 28
15
votes
1 answer
Initial route params in React Navigation v5?
React Navigation v3 was featuring an initialRouteParams property to pass initial values to this.navigation.props. Is there a way to set initial route params to be accessed via route.params in the React Navigation v5?
function MainScreen({route,…
Denis Kulagin
- 8,472
- 17
- 60
- 129