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
343
votes
38 answers

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}, userVerified: { screen: TabNavigator({ …
Avijit Dutta
  • 3,651
  • 3
  • 13
  • 16
123
votes
17 answers

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 Navigator 1 screen A screen B Nested Navigator…
izikandrw
  • 1,703
  • 3
  • 14
  • 23
115
votes
15 answers

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, and the navigation between home screen and other…
Daniel
  • 1,999
  • 4
  • 15
  • 27
115
votes
30 answers

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 Login screen. Does anyone know how it can be hidden…
EyalS
  • 1,530
  • 2
  • 11
  • 25
114
votes
35 answers

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.
Eshant Bist
  • 1,485
  • 3
  • 12
  • 22
101
votes
18 answers

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. After successfully signing in or registering, it…
Darren Lau
  • 1,995
  • 4
  • 25
  • 40
91
votes
3 answers

React Navigation vs. React Native Navigation

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 technical limitations that would require the use of…
91
votes
36 answers

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 react-navigation in React Native?
jsdario
  • 6,477
  • 7
  • 41
  • 75
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
83
votes
21 answers

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 start and I get this error. Invariant Violation:…
Pankaj Sharma
  • 821
  • 1
  • 5
  • 3
80
votes
19 answers

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\Example\src\Router.jsx`, the package…
Jogi Prasad Pakki
  • 2,013
  • 2
  • 11
  • 21
71
votes
8 answers

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'; import { StackNavigator } from…
Somename
  • 3,376
  • 16
  • 42
  • 84
69
votes
6 answers

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(); } But with react-navigation componentDidMount occurs…
rendom
  • 3,417
  • 6
  • 38
  • 49
68
votes
5 answers

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 component renders, the height of the screen is being…
Eduard
  • 8,437
  • 10
  • 42
  • 64
67
votes
10 answers

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 LISTRECORD which has a tabbar, header and no back…
Hendry Lim
  • 1,929
  • 2
  • 21
  • 45
1
2 3
99 100