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
23
votes
3 answers

How should the new context api work with React Native navigator?

I created a multiscreen app using React Navigator following this example: import { createStackNavigator, } from 'react-navigation'; const App = createStackNavigator({ Home: { screen: HomeScreen }, Profile: { screen: ProfileScreen…
Tom
  • 7,515
  • 7
  • 38
  • 54
23
votes
2 answers

How To Use both 'adjustPan' and 'adjustResize' for 'windowSoftInputMode' in React Native Android app

How can I use both 'adjustPan' and 'adjustResize' in AndroidManifest.xml react native app. Use Case My navigation is made upon ReactNavigation with StackNavigator and TabNavigator. I have a text box where the user can type any data. While performing…
Anson Mathew
  • 420
  • 3
  • 10
23
votes
4 answers

How do you disable "Swipe down to close" on the Modal component in React Native?

I'm using the core React Native Modal component. Within the modal content I have a Done button. Pressing Doneis the only way we want users to close the modal. But the Modal component allows swiping down from the top of the screen to close. How do…
GollyJer
  • 23,857
  • 16
  • 106
  • 174
23
votes
4 answers

React Navigation modal height

How do I set the height a React Navigation modal view so once it has appeared it will only cover about half of the screen from the bottom up, and the view below remains visible? Update: I'm trying to create a ux flow similar to the App Store…
matthew
  • 2,156
  • 5
  • 22
  • 38
23
votes
4 answers

React Native - How to open route from push notification

I'm using react-navigation and react-native-push-notification. How can I open a certain StackNavigator's screen in onNotification callback? Should work when: app is closed app is in the foreground app is in the background I only need it working in…
Jacka
  • 2,270
  • 4
  • 27
  • 34
23
votes
5 answers

React Navigation 'navigation' is missing in props validation

React Navigation's introduction page suggests the use of the following destructuring assignment: const { navigate } = this.props.navigation; However, when I implemented React Navigation in my App, ESLint is complaining about this line describing…
Vinícius Figueiredo
  • 6,300
  • 3
  • 25
  • 44
23
votes
6 answers

Show splash screen before show main screen in react native without using 3rd party library

I am a beginner in react native so maybe my question seems silly to all experts. but I am struggling with a basic feature that I want to implement that i want to start my app with a splash screen and after few seconds I want to show the login screen…
Vikas Sharma
  • 579
  • 1
  • 5
  • 15
23
votes
4 answers

Is there a way to change react navigation's default back button Color on IOS header?

static navigationOptions = { headerTitle:'Booking', headerTitleStyle: {color:'white'}, headerStyle: {backgroundColor:'orange'} } My header looks like this. I want to change the color of default back button icon on IOS. I can change…
Saud Punjwani
  • 477
  • 1
  • 4
  • 14
22
votes
3 answers

Custom Tab Bar React Navigation 5

I'm trying to make a tab bar like in the picture bellow, using React Navigation. I tried some codes, but nothing worked. Some codes are from previous React Navigation Version. The really problem is make the tab bar have a margin from from bottom and…
Tony Starkus
  • 556
  • 2
  • 8
  • 25
22
votes
6 answers

React-navigation: Increase height of the bottom tab navigation?

I created a simple tab navigation for a React Native app using react-navigation. It works fine, but I can't seem to adjust the height of it. It'll only go to a max of about 80, I need it to be about 150% of the current height, maybe double. Does…
Rachel Gallen
  • 27,943
  • 21
  • 72
  • 81
22
votes
6 answers

React Native clear the previous screen from the navigation stack

I am developing a React native application for learning purposes. I am now implementing navigation using React Navigation. I am using stack navigation. But I cannot find a way to remove the previous screen from navigation history and kill the app. …
Wai Yan Hein
  • 13,651
  • 35
  • 180
  • 372
22
votes
10 answers

How do you make the react-native react-navigation tab bar transparent

Is there a way to make the tab bar transparent? I tried the following but it just showed a white background. Do I need to implement my own tabBarComponent? If so, is there any documentation on that class and what interface I need to…
MonkeyBonkey
  • 46,433
  • 78
  • 254
  • 460
21
votes
4 answers

React Native header / bottom tabbar jumping on first app load

I have a single application which includes only navigation packages. On IOS, all is fine but on Android, header and/or bottom tabbar seems like jumping (maybe recalculating their positions). This happens only when I use navigation components and…
Basar Sen
  • 349
  • 3
  • 12
21
votes
3 answers

Where to put all the screens which are common in multiple stack navigators? - React Navigation v5

Following is the hierarchy of my app navigators ├── appNavigator ( Bottom Tab Navigator) ├── feed (Stack Navigator) postDetailScreen pageDetailScreen ProfileDetailScreen ...other screens ├── notifications (Stack…
Ayesha Iftikhar
  • 1,028
  • 2
  • 11
  • 27
21
votes
4 answers

How to mock useNavigation hook in react-navigation 5.0 for jest test?

i want to mock useNavigation hook used inside my functional component. Any workaround how to mock it using jest? import React from 'react'; import { useNavigation } from '@react-navigation/native'; import { TouchableOpacity } from…
Renish Ghetia
  • 233
  • 1
  • 3
  • 6
1 2 3
…
99 100