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
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 (
21
votes
3 answers

How do I force a component to unmount when I navigate to a new page in react native?

I want to make sure the lifecycle method ComponentWillUnmount fires when I navigate to a new page. I found this post, but that doesn't seem to mention anything about navigating to a new page. I also found this post but I'm using react-navigation. …
VK1
  • 1,676
  • 4
  • 28
  • 51
21
votes
10 answers

Command Failed: gradlew.bat installDebug error whenever installing dependencies like navigation, firebase, icons etc in React-Native

When ever i install any dependency in my react native project and when ever i use link command for e.g react-native link react-native-gesture-handler this causes me an error shown in the image [1]. It doesn't build the project shows the error…
21
votes
3 answers

React Native - There is no route defined for Login

I'm learning react native with configuring tabNavigator, DrawerNavigator, and StackNavigator into one without NativeBase or Expo with a single react-navigation library. I achieved it but there comes an error when I perform some specific sequence in…
ravi
  • 1,130
  • 16
  • 29
21
votes
6 answers

Change Button Font Size on React Native

I'm trying to change Button font-size on my react native app, but I got an error. Does anyone know how to properly do it? Thank you.
webprogramming13
  • 243
  • 1
  • 2
  • 6
21
votes
5 answers

Remove screen from stack navigator

I’ve observed Back button logic works seeing the sequence of screens in the stack. I’ve a Drawer navigator placed inside stack navigator. On top of the stack I’ve Splash screen. On Dashboard when I press back button it takes me to splash screen.…
devedv
  • 562
  • 2
  • 15
  • 45
21
votes
8 answers

Margin Top for Header Bar in React Native Navigation

I'm new in React Native. I'm using React-Navigation. But, on my device has problem with header navigation. This overlay by status bar like this. This issue occur both on my code and from React Navigation showcase example. How to fix it? Thanks
Pham Minh Tan
  • 2,076
  • 7
  • 25
  • 37
21
votes
8 answers

React Navigation: StackNavigator transition for Android

I am using this library https://reactnavigation.org/docs/intro/ to build android by react-native. I can make the navigation happens on android device but how I can make the screen slide in from the right and fade in from the left. It seems that this…
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523
20
votes
6 answers

react native createbottomtabnavigator hide tab bar label

I need to know how to hide the bottom label. I've tried the following: tabBarShowLabels: 'hidden', tabbarlabelvisible: false. I also removed the tabbarlabel: 'Home' and it still shows Any help would be appreciated or if someone could point me to…
endlessCode
  • 1,255
  • 4
  • 21
  • 36
20
votes
1 answer

What is the difference between react-navigation's StackNavigator and SwitchNavigator?

As of this writing, the Docs don't provide a description of SwitchNavigator's purpose. I've tried using both StackNavigator and SwitchNavigator interchangeably and I personally cannot spot a difference. Although I'm certain there is. Can anyone…
JJT
  • 407
  • 5
  • 12
20
votes
3 answers

React Native error message: Trying to add a root view with an explicit id already set

I am currently developing an application with React Native. The basis was Ignite. At the moment, very often when I start the application, I get an error message that I do not understand. Maybe someone can tell me about what it says or how to fix the…
Daniel
  • 1,999
  • 4
  • 15
  • 27
20
votes
1 answer

Testing component that uses react-navigation with Jest

I'm working on a React Native application that also use Redux and I want to write tests with Jest. I'm not able to mock the "navigation" prop that is added by react-navigation. Here is my component: import React from 'react'; import { connect } from…
alex.ac
  • 1,053
  • 2
  • 9
  • 23
20
votes
7 answers

How to finish current component while navigating to next component in react native

Hi I am trying to navigate to next component using navigate function. I am using react-navigation for the navigation among multiple components. Suppose I have index.android.js and DashboardScreen.js component. I am trying to navigate to…
N Sharma
  • 33,489
  • 95
  • 256
  • 444
20
votes
11 answers

go two screen back with single press event using react-navigation in react native app

I am using reactnavigation component from https://reactnavigation.org and using the code below i am going one screen back
Abhishek Kumar
  • 2,136
  • 3
  • 24
  • 36
19
votes
3 answers

non-serializable values were found in the navigation state when passing a function in params

I have two screens: Screen A import React, { useState } from "react"; import { Text, View, Button } from "react-native"; const ViewA = ({ navigation }) => { const [val, setVal] = useState(null); const [val2, setVal2] = useState(null); const…
Amin
  • 195
  • 1
  • 1
  • 6