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
43
votes
33 answers

requireNativeComponent: "RNSScreenStackHeaderConfig" was not found in the UIManager when running android app

When running an application on android i get this error. It builds correctly but crashes with exception. I have installed React-native-screens, @React-native/navigation and the dependencies listed on…
Anders Saxrud
  • 577
  • 1
  • 4
  • 8
43
votes
4 answers

react navigation v6 and v5, Disable swipe back action

I'm working with react navigation 5 : I created MainStackScreen and AuthStackScreen, const AuthStack = createStackNavigator(); function AuthStackScreen() { return (
Khaled Boussoffara
  • 1,567
  • 2
  • 25
  • 53
43
votes
4 answers

React Navigation V2: Difference between navigation.push and navigation.navigate

I'm new to React Native and I'm currently studying the React Native Navigation Docs. I was wondering: What is the difference between navigation.push() and navigation.navigate()? I tried finding it out by myself, but they seem to accomplish the exact…
J. Hesters
  • 13,117
  • 31
  • 133
  • 249
42
votes
4 answers

React-Navigation go to same route with different params

I am using a React-Navigation screen with the name "User" to show info about a particular user. When navigating to this route I pass the param "id" which tells the screen what user it is dealing with. When viewing a user it is possible to click…
Gerharddc
  • 3,921
  • 8
  • 45
  • 83
41
votes
6 answers

'Stack.Navigator' cannot be used as a JSX component

There is a type issue using react navigation, when use Stack.Navigation or Stack.Group from createNativeStackNavigator The issue saids that the types dont match with JSX.element at the end of the messages is more specific: Type '{}' is not…
Jerome Bravo
  • 583
  • 2
  • 5
  • 10
40
votes
8 answers

Change app background color in React Native

I'm trying to change the color of the background in my React Native app, from grey to white. I'm using react-navigation to make a TabNavigator after I render it. I tried to put this TabNavigator in a view and set backgroundColor but all screen…
Grigore Budac
  • 1,351
  • 2
  • 15
  • 27
38
votes
3 answers

How to resolve "Animated: `useNativeDriver` is not supported because the native animated module is missing." in react-navigation?

I am working on expo SDK Version: 36, and on all platforms (ios/android/web) When installing react-navigation for the first time as described in the documentation and running jest --watch while doing it, and the following warning appeared: …
Dimitri Kopriwa
  • 13,139
  • 27
  • 98
  • 204
36
votes
5 answers

React Navigation get stack header height

How do i get the height of the StackNavigator header programmatically? I need to detect if component A's position is within component B when pan gesture (drag) on A is released. However, the position from onPanResponderRelease's gesture.moveY is…
Avery235
  • 4,756
  • 12
  • 49
  • 83
36
votes
4 answers

how to display headers in react navigation with TabNavigation

I noticed that views in StackNavigation show the header title but if I set those same screens in a TabNavigation it doesn't show a header. It only shows a header if I wrap a StackNavigation either around each tab, or wrap the TabNavigation nested…
MonkeyBonkey
  • 46,433
  • 78
  • 254
  • 460
34
votes
11 answers

Warning: isMounted(...) is deprecated in plain Javascript Classes

I am implementing 2 screens using react-navigation. But I got the warning below while navigating to the second page: Warning: isMounted(...) is deprecated in plain Javascript Classes. Instead, make sure to clean up subscriptions and pending…
Javascript Hupp Technologies
  • 1,997
  • 2
  • 12
  • 27
32
votes
6 answers

Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`

I get the following error when I want to build my APK. Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from I need to say that I have imported react-native-gesture-handler in the index.js and this is my…
Aazam Heidari
  • 447
  • 1
  • 5
  • 12
32
votes
8 answers

React Navigation default background color

I'm using react-navigation and stack-navigator to manage my screens. Platforms I'm using: Android React Native: 0.47.1 React Navigation: 1.0.0-beta.11 Emulator and Device I have a screen, which acts as a modal form but it is really a full screen.…
Facundo La Rocca
  • 3,786
  • 2
  • 25
  • 47
32
votes
9 answers

Pass Props StackNavigator

i try to pass props on stacknavigator, here my code const MainCart = StackNavigator({ Cart: { screen: CartScreen }, Checkout: { screen: COScreen } /* how to pass 'myprops' in this area? */ }); export default…
Ansyori
  • 2,807
  • 3
  • 29
  • 37
31
votes
3 answers

React native with typescript - how to use the useRoute from @react-navigation/native with typescript

I'm trying to get my incident object from route.params but I don't know how to do it to make typescript recognize this prop. Here is the function that navigate to my Detail page passing incident to params: const navigateToDetail = (incident:…
Christian Prado
  • 313
  • 1
  • 3
  • 5
31
votes
4 answers

Change navigation header background color

Struggling to understand how to change the navigation header bar background color. I'm Using react navigation and Expo to build my app. backgroundColor does not seem to do anything. Any idea how to do this? My code is below: static navigationOptions…
arled
  • 2,577
  • 6
  • 27
  • 49
1 2
3
…
99 100