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
26
votes
5 answers

React-navigation: Deep linking with authentication

I am building a mobile app with react-native and the react-navigation library for managing the navigation in my app. Right now, my app looks something like that: App [SwitchNavigator] Splash [Screen] Auth [Screen] MainApp…
Zuma
  • 806
  • 1
  • 7
  • 10
25
votes
2 answers

set dynamic 'initialRouteName' in react-native

question is simple I know there are lots of answers available for the same question but I have differently set my own App.js file i tried almost all but no success. so my App.js looks like this import React, { Component } from 'react'; import { …
Kishan Oza
  • 1,707
  • 1
  • 16
  • 38
25
votes
5 answers

NavigationActions.reset is not a function?

I created a project has a Welcome screen navigate to MainActivity screen. I want that when the user clicks the back button it will close the app in MainActivity not back to Welcome screen. I use the library react-navigation, so I looked for some…
Morton
  • 5,380
  • 18
  • 63
  • 118
25
votes
2 answers

How to pass props to component inside a React Navigation navigator?

I'm trying to pass props to a component that has been wrapped through a call to create...Navigator call, i.e. // Search.js const Navigator = createMaterialTopTabNavigator({ Wines, Stores, Vineyards, Restaurants }); // Somewhere in…
James Ko
  • 32,215
  • 30
  • 128
  • 239
25
votes
6 answers

Modifying back button with react-navigation on specific screen

Here I'm using react-navigation as my navigation library. How can I change the back button (that is added automatically by react-navigation) functionality for a specific screen? I mean instead of going one step in the stack of screens I want it to…
greW
  • 1,248
  • 3
  • 24
  • 49
25
votes
8 answers

Remove top navigation bar for certain screens

Is there a way of removing the top navigation bar for specific screens only? I am using react-navigation. I already tried the following: header: { visible: false } but it only hides the navbar. The space of the navbar is still cannot be…
Jed
  • 1,054
  • 1
  • 15
  • 34
25
votes
6 answers

React Native, change React Navigation header styling

I'm implementing React Navigation in my React Native app, and I'm wanting to change the background and foreground colors of the header. I have the following: /** * Sample React Native App * https://github.com/facebook/react-native * @flow …
user818700
24
votes
1 answer

React navigation 5 error Binding element 'navigation' implicitly has an 'any' type.ts

I am new to react-native. I am trying to implement navigation using react-navigation 5. I have two screens Home and profile. These both components have received a navigation prop but typescript is giving me follwoing error Binding element…
pratik jaiswal
  • 1,855
  • 9
  • 27
  • 59
24
votes
3 answers

React Navigation route.params typescript

I'm creating a Expo managed React Native app with TypeScript and having some problems with React Navigation and TypeScript. I want to specify the icon for the Bottom Tab Navigator on the Tab.Screen component. This code works but complains because…
Dainel vdM
  • 253
  • 1
  • 2
  • 5
24
votes
8 answers

How to set the background color of Tab.Navigator?

As you can see below, I've tried many ways of setting the background color to green, all to no avail. The background remains blue like the image. The inactiveColor and activeColor are working (white and red respectively). …
RandomCoder
  • 1,358
  • 5
  • 20
  • 35
24
votes
4 answers

Get the height of SafeAreaView from within BottomTabBar

I am attempting to use react-native-keyboard-spacer in conjunction with react-navigation. I am currently setting the topSpacing of the keyboard spacer to be -49 which is the height of the tab bar from react-navigation, but the tab bar is within a…
00a5
  • 241
  • 1
  • 2
  • 3
24
votes
2 answers

How do i pass eslint checking for this.props.navigation.navigate (react-navigation)?

I am using eslint airbnb in my react native project. The eslint throw error linting if i didn't validate the props, especially the props from react-navigation. How do i validate this using PropTypes? I am trying to validate it like…
dehamzah
  • 1,373
  • 1
  • 11
  • 19
23
votes
15 answers

React Native Navigation Error: The action navigate with payload {"name": 192.168.100.189:19000", "params":{}} was not handled by any navigator

I am using react-navigation with my React Native application. I keep on getting an error that is supposedly a development-only warning and won't be shown in production. How do I fix the error below? console.error: "The action 'NAVIGATE' with…
preston
  • 3,721
  • 6
  • 46
  • 78
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
23
votes
5 answers

TypeError : props.navigation.getParam is not a function. In(props.navigation.getParam('name')

I am facing issue on TypeError : props.navigation.getParam is not a function. In (props.navigation.getParam('name'). I am using reactNavigation version 5.x. this code is working in reactNavigation 3. What am I doing wrong? Here is my code export…
Raushan Singh
  • 1,070
  • 1
  • 9
  • 18
1 2 3
…
99 100