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

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 added a Menu icon, and when I click it, the drawer…
Sadman Muhib Samyo
  • 2,438
  • 2
  • 10
  • 16
55
votes
2 answers

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 react native application ? @react-navigation/stack -…
John Stuart
  • 950
  • 5
  • 11
  • 28
54
votes
13 answers

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 strongly type these so I get hints for what properties…
Mellet
  • 1,196
  • 1
  • 10
  • 14
52
votes
11 answers

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 animation?
Suresh Murali
  • 731
  • 1
  • 6
  • 10
50
votes
5 answers

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 (LoadingScreen.tsx): import styles from "./styles"; import…
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
50
votes
17 answers

How do I hide the shadow under react-navigation headers?

How do I hide the shadow under react-navigation headers? They look like this.
GollyJer
  • 23,857
  • 16
  • 106
  • 174
49
votes
20 answers

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 { createStackNavigator } from…
Anamul Haque
  • 7,069
  • 5
  • 23
  • 38
49
votes
6 answers

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 of the screen you want to go back from, here's my…
Dev01
  • 13,292
  • 19
  • 70
  • 124
48
votes
12 answers

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 question is How to change/update title…
shwetap
  • 621
  • 1
  • 6
  • 14
48
votes
16 answers

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 this.props.navigation.navigate('DrawerOpen')}> to open Drawer menu in mainScreen…
Saeed Heidarizarei
  • 8,406
  • 21
  • 60
  • 103
47
votes
11 answers

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 just hide the header and use a View that contains…
t97
  • 721
  • 1
  • 7
  • 19
46
votes
9 answers

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. code snippet : const loadReport = (id: string) =>…
BattleVlog
  • 463
  • 1
  • 4
  • 5
45
votes
4 answers

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. Basically, what I am trying to do is, navigate to a…
Ayan
  • 2,738
  • 3
  • 35
  • 76
45
votes
23 answers

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.containerBgColor } in the StackNavigation…
haxpanel
  • 4,402
  • 4
  • 43
  • 71
45
votes
30 answers

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, ProductDetails: ProductDetailsScreen, }) I want to hide…
Ahmad Abdullah
  • 1,645
  • 1
  • 16
  • 25
1
2
3
…
99 100