Stack Overflow
Stack Overflow

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
31
votes
7 answers

React Navigation: Navigate Back To Root using NavigationActions.reset, goBack and getStateForAction

Say I've navigated through 4 screens in my StackNavigator App and now I want to go back to the first screen. There seems to be three different ways to do this and they do navigate to where I want to do, however each way has an animation that cycles…
Turnipdabeets
  • 5,815
  • 8
  • 40
  • 63
30
votes
6 answers

native.createnavigator factory is not a function

I am going to design a Drawer navigation in my project. I installed that by this command: npm install @react-navigation/drawer Then imported that into App.js import { createDrawerNavigator } from '@react-navigation/drawer'; import {…
roz333
  • 695
  • 2
  • 18
  • 30
30
votes
6 answers

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 componentDidMount() every time a specific screen is…
James
  • 3,597
  • 11
  • 41
  • 76
30
votes
6 answers

How to change the direction of the animation in StackNavigator?

How to change the direction of the animation in StackNavigator? Current Behavior When user goes to another screen, the screen flies from bottom to top. Expected Behavior When user goes to another screen, the screen flies from right to left. (Like…
merry-go-round
  • 4,533
  • 10
  • 54
  • 102
30
votes
7 answers

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 pressing back button should not go to last navigated…
Paras Watts
  • 2,565
  • 4
  • 21
  • 46
29
votes
7 answers

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 parameter of type '{ key: string; params?: undefined;…
Umar Alfaruq
  • 507
  • 1
  • 6
  • 8
29
votes
4 answers

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 in the tab navigator and I can't find a solid…
jrocc
  • 1,274
  • 2
  • 18
  • 48
28
votes
3 answers

What are the differences between different implementations of SafeAreaView?

A component called SafeAreaView is exported by react-native, react-navigation, react-native-safe-area-context and react-native-safe-area-view. What are the differences and which one should I use in which cases?
Sampo
  • 4,308
  • 6
  • 35
  • 51
28
votes
8 answers

React navigation 5 hide tab bar from stack navigator

I wanted to know how to hide the bottom tab bar from a specific screen inside my stack navigator that is nested on a material bottom tab bar This is my code for my stack navigator import React from 'react'; import { createStackNavigator } from…
Andrew
  • 592
  • 1
  • 7
  • 17
28
votes
7 answers

How to close a React Navigation modal with multiple screens in it

I'm using https://reactnavigation.org/ for navigation in a React Native app with a tab navigator as the main stack and a modal with two screens in it (for logging in and configuring the app). I can't for the life of me figure out how to close the…
Alex Dunae
  • 1,290
  • 3
  • 17
  • 28
28
votes
7 answers

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 page title instead of 'back'. export const Root =…
FR073N
  • 2,011
  • 4
  • 29
  • 42
28
votes
8 answers

React Navigation - navigating to another tab and reset stack

I'm trying to route from one StackNavigator to another, both of which are inside a TabNavigator. I'm currently able to get there by simply doing: this.props.navigation.navigate('Screen3') But I also want to reset that tab when I go to it. Here is…
AHinson
  • 661
  • 2
  • 7
  • 15
27
votes
2 answers

how to use react-native-web and react-navigation together and access from web url

UPDATE: react-navigation web support is done. follow this: https://reactnavigation.org/docs/en/web-support.html ORIGIN: I try to share my code between react-native and web. when I try react-native-web, it works well. but there is only one question,…
GeminiYellow
  • 1,016
  • 2
  • 12
  • 34
26
votes
8 answers

How to get previous route name from React Navigation

I am trying to get previous route name to my current screen. Because based on the previous screen name, I have to show/hide few objects in current screen. To get previous screen name, I have tried following componentDidMount() { const {…
Anilkumar iOS - ReactNative
  • 3,543
  • 9
  • 54
  • 109
26
votes
5 answers

how to check if goBack() function is doable in react navigation?

I have a back button that takes the user a screen back, but when there are no screens left to go back, I want it to do something else so this is my code:
Reza Shoja
  • 887
  • 2
  • 11
  • 24
1 2 3
…
99 100