Questions tagged [react-navigation]
An easy-to-use navigation solution to be used in React Native projects
8,578
questions
358
votes
38
answers
493k
views
Hide header in stack navigator React navigation
I'm trying to switch screens using both stack and tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
...
- 3,811
136
votes
18
answers
187k
views
How to navigate between different nested stacks in react navigation
The Goal
Using react navigation, navigate from a screen in a navigator to a screen in a different navigator.
More Detail
If I have the following Navigator structure:
Parent Navigator
Nested ...
- 1,833
122
votes
36
answers
266k
views
How to get current route name in react-navigation?
I want the name of the current route or screen in react-navigation which I want to use inside if condition to make some changes.
- 1,585
121
votes
31
answers
217k
views
Disable back button in react navigation
I'm using react native navigation (react-navigation) StackNavigator.
it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the ...
- 1,640
116
votes
16
answers
226k
views
Resetting the navigation stack for the home screen (React Navigation and React Native)
I've got a problem with the navigation of React Navigation and React Native. It is about resetting navigation and returning to the home screen.
I've build a StackNavigator inside of a DrawerNavigator,...
- 2,069
105
votes
32
answers
171k
views
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 ...
- 1,229
102
votes
21
answers
204k
views
React navigation goBack() and update parent state
I've a page that will render the user's name if s/he is logged in or "Create an account" or "Sign in" option if s/he not. Screen as below
They can navigate to "Sign in" or "Create an account" page. ...
- 2,035
102
votes
28
answers
275k
views
Invariant Violation: "main" has not been registered
New to React Native:
I started a brand new project with Expo init and then I followed the instructions mentioned inhttps://reactnavigation.org/docs/hello-react-navigation
I run the project with expo ...
- 1,011
98
votes
36
answers
131k
views
How can we center title of react-navigation header?
React-navigation docs are still young, and reading through the issues is not working quite much for me (changes on each version) does anyone have a working method to center title in Android using ...
- 6,745
92
votes
3
answers
31k
views
React Navigation vs. React Native Navigation [closed]
What are the technical differences between the main two React Native navigation solutions: React Native Navigation and React Native?
React Navigation
React Native
Navigation
Are there specific ...
- 1,197
89
votes
22
answers
81k
views
However, this package itself specifies a `main` module field that could not be resolved
I am new to react-native but not ReactJs iam going to mad about this error from 2 days
error: bundling failed: Error: While trying to resolve module `@react-navigation/native` from file `C:\XXXXX\...
- 2,243
75
votes
7
answers
93k
views
How to get a height of a Keyboard in React-Native?
I am using React-Navigation in my app and the app consists of StackNavigator with multiple screens, some screens of which have TextInput with autoFocus={true}
Problem: on these screens when the ...
- 8,985
73
votes
9
answers
202k
views
How to Pass Parameters to screen in StackNavigator?
My React Native code:
import React, { Component } from 'react';
import { AppRegistry, ActivityIndicator, StyleSheet, ListView,
Text, Button, TouchableHighlight, View } from 'react-native';
...
- 3,416
70
votes
6
answers
119k
views
react-navigation: Detect when screen, tabbar is activated / appear / focus / blur
Perviously when I wanted to make some actions when screen is opened I put them inside componentDidMount. For example I can fetch some data.
like this.
componentDidMount() {
this.updateData();
}
...
- 3,646
67
votes
10
answers
86k
views
React-Navigation with Login Screen
I am trying to use react-navigation to create an initial LOGIN screen that has no tabbar and header, and once the user has been successfully authenticated will navigate to another screen called ...
- 1,974
65
votes
13
answers
50k
views
react native typescript 'string' is not assignable to parameter of type 'never.' in useNavigation
[I keep getting the error that says 'string' is not assignable to parameter of type 'never' in react native typescript and I don't know why. Can someone help me fix this bug.
Thank you in advance.
...
- 653
63
votes
5
answers
27k
views
React Navigation: Swipe on drawer does not work in Android
I have been searching for a solution for a long time, but surprisingly, I think nobody has faced it yet. So I am posting it.
I have created a simple Drawer Navigator with React Navigation V3. I have ...
- 2,438
60
votes
2
answers
29k
views
What is the difference between @react-navigation/stack vs @react-navigation/native-stack?
What is the difference between @react-navigation/stack vs @react-navigation/native-stack ?
Is @react-navigation/stack is only for react applications and @react-navigation/native-stack is for only ...
- 1,110
59
votes
14
answers
83k
views
Add strong typing for react navigation props
I'm using typescript in my react-native project(expo).
The project uses react-navigation, so on my screens I can set navigationOptions and I have access to the prop navigation.
Now I'm trying to ...
- 1,266
56
votes
12
answers
59k
views
How to disable react navigation's stack navigator transition?
In React Native (iOS), React navigation's stack navigator has a default transition animation to move screens left or right based on the stack order. Is there any way to disable the transition ...
- 781
54
votes
12
answers
107k
views
React-native : Dynamically update header title in stack navigator
I have made a custom component for header title(stack navigator)which shows user name along with some image.
On this page I have to edit the username and on success Update it in header as well
So my ...
- 691
52
votes
39
answers
123k
views
requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app
When running an application on android i get this error. It builds correctly but crashes with exception. I have installed React-native-screens, @React-native/navigation and the dependencies listed on ...
- 667
52
votes
25
answers
30k
views
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....
- 4,598
52
votes
6
answers
65k
views
How to mock React Navigation's navigation prop for unit tests with TypeScript in React Native?
I'm building a React Native app with TypeScript. For my navigation I use React Navigation and for my unit testing I use Jest and Enzyme.
Here is the (stripped down) code for one of my screen (...
- 14.2k
51
votes
20
answers
47k
views
How do I hide the shadow under react-navigation headers?
How do I hide the shadow under react-navigation headers?
They look like this.
- 25.9k
51
votes
11
answers
53k
views
Transparent background for header using createStackNavigator, React Native
I created a project using CRNA that uses React-Navigation. In one of the screen I have a background image that cover the entire screen and I want to including the header.
Like this image :
Should I ...
- 783
50
votes
6
answers
160k
views
React Navigation back() and goBack() not working
I'm trying to go back two screens. The goal is to go from EditPage to Cover. Here is my navigation stack:
Main -> Cover -> EditCover -> EditPage
I read the docs and it says to supply a key ...
- 13.9k
49
votes
20
answers
64k
views
undefined is not an object (evaluating 'RNGestureHandlerModule.State'
I have installed react-navigation in my React Native project. Its a starter project doesn't have any codes. But while running project I am facing error like this.
Here is my Navigation code
import {...
- 7,249
49
votes
4
answers
55k
views
Passing function as a param in react-navigation 5
NOTE: This query is for react-navigation 5.
In react navigation 4 we could pass a function as a param while navigating but in react navigation 5, it throws a warning about serializing params.
...
- 2,908
48
votes
29
answers
119k
views
React Navigation how to hide tabbar from inside stack navigation
I have the following stack navigation and screens:
export const HomeStack = createStackNavigator({
Home: HomeScreen,
Categories: CategoriesScreen,
Products: ProductsScreen,
...
- 1,741
48
votes
16
answers
152k
views
Getting undefined is not an object (evaluating '_this.props.navigation')
I'm using DrawerNavigator and I have 3 pages: Router page, mainScreen and a photos page.
I maked a header navbar area and I used This <TouchableHighlight onPress={() => this.props.navigation....
- 8,796
47
votes
4
answers
35k
views
React-Navigation go to same route with different params
I am using a React-Navigation screen with the name "User" to show info about a particular user. When navigating to this route I pass the param "id" which tells the screen what user it is dealing with. ...
- 4,061
46
votes
4
answers
62k
views
react navigation v6 and v5, Disable swipe back action
I'm working with react navigation 5 :
I created MainStackScreen and AuthStackScreen,
const AuthStack = createStackNavigator();
function AuthStackScreen() {
return (
<AuthStack.Navigator ...
- 1,691
46
votes
8
answers
158k
views
Change app background color in React Native
I'm trying to change the color of the background in my React Native app, from grey to white. I'm using react-navigation to make a TabNavigator after I render it. I tried to put this TabNavigator in a ...
- 1,451
46
votes
5
answers
52k
views
React Navigation V2: Difference between navigation.push and navigation.navigate
I'm new to React Native and I'm currently studying the React Native Navigation Docs. I was wondering:
What is the difference between navigation.push() and navigation.navigate()?
I tried finding it ...
- 14.2k
42
votes
6
answers
16k
views
'Stack.Navigator' cannot be used as a JSX component
There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator
The issue saids that the types dont match with JSX.element at the end of the ...
- 643
38
votes
5
answers
77k
views
React Navigation get stack header height
How do i get the height of the StackNavigator header programmatically?
I need to detect if component A's position is within component B when pan gesture (drag) on A is released. However, the position ...
- 5,156
38
votes
3
answers
28k
views
How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation?
I am working on expo SDK Version: 36, and on all platforms (ios/android/web)
When installing react-navigation for the first time as described in the documentation and running jest --watch while doing ...
- 14k
37
votes
3
answers
35k
views
React native with typescript - how to use the useRoute from @react-navigation/native with typescript
I'm trying to get my incident object from route.params but I don't know how to do it to make typescript recognize this prop.
Here is the function that navigate to my Detail page passing incident to ...
- 373
37
votes
4
answers
28k
views
how to display headers in react navigation with TabNavigation
I noticed that views in StackNavigation show the header title but if I set those same screens in a TabNavigation it doesn't show a header. It only shows a header if I wrap a StackNavigation either ...
- 47.3k
35
votes
6
answers
47k
views
Re-render component when navigating the stack with React Navigation
I am currently using react-navigation to do stack- and tab- navigation.
Is it possible to re-render a component every time the user navigates to specific screens? I want to make sure to rerun the ...
- 3,757
35
votes
11
answers
16k
views
Warning: isMounted(...) is deprecated in plain Javascript Classes
I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page:
Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make ...
34
votes
4
answers
81k
views
Change navigation header background color
Struggling to understand how to change the navigation header bar background color.
I'm Using react navigation and Expo to build my app.
backgroundColor does not seem to do anything. Any idea how to ...
- 2,690
34
votes
7
answers
63k
views
React native clear Stack Navigator stack
I have few screens which I navigate through one by one. Screen1->screen2-screen3->screen4-Home
What I want is when I go to home then the previous history of navigation should be cleared and back ...
- 2,645
33
votes
8
answers
83k
views
React Navigation default background color
I'm using react-navigation and stack-navigator to manage my screens.
Platforms I'm using:
Android
React Native: 0.47.1
React Navigation: 1.0.0-beta.11
Emulator and Device
I have a screen, which ...
- 3,836
33
votes
6
answers
28k
views
Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`
I get the following error when I want to build my APK.
Export namespace should be first transformed by
@babel/plugin-proposal-export-namespace-from
I need to say that I have imported react-native-...
- 467
33
votes
7
answers
41k
views
navigation.navigate('Home') showing some error in typescript
When I use useNavigation or from props { navigation } for navigate between screen using navigation.navigate('Home') the typescript return error Argument of type '"Main"' is not assignable to ...
- 567
32
votes
9
answers
84k
views
Pass Props StackNavigator
i try to pass props on stacknavigator, here my code
const MainCart = StackNavigator({
Cart: {
screen: CartScreen
},
Checkout: {
screen: COScreen
}
/* how to pass '...
- 2,827
31
votes
8
answers
44k
views
How to change the back button label, react-navigation
I'm using react-navigation, and I can't change the locale of the default 'back' button.
In my Stack Navigator, if I write down a title for the main page, and if it's not too long, it will display the ...
- 2,061
31
votes
4
answers
83k
views
Tab navigator icons in React Navigation
I'm using react-navigation v2 and react native vector icons.
I'm trying to add an icon in a react native tab navigator.
The icon shows up if its not in the tab navigator. The icon is not showing up ...
- 1,326