Questions tagged [react-navigation-v5]

729 questions
7
votes
3 answers

Async testing React Navigation 5 in Jest: NavigationContainer causes console error

I'm using react-native-testing-library and after upgrading react-navigation from 4 to 5, I followed these instructions: https://callstack.github.io/react-native-testing-library/docs/react-navigation to upgrade most of my test suite. So far so good.…
7
votes
3 answers

Highlight Current Active Drawer menu in React navigation v5

I have created a custom drawer navigator using react navigation version: 5.X, But the current active tab is not getting highlighted in custom drawer menu. I have added 'activeTintColor' in DrawerItem element, but it's not getting applied to active…
7
votes
4 answers

How to handle the SafeArea's background color with Bottom Tab Navigation?

Current Behavior Hi everyone, I want to set the background color for the Bottom Tab. So I did as below.
7
votes
4 answers

Remove Header React Navigation v5

I can't seem to configure header to be null in the new version of React Navigation. I can set it to transparent, using the headerTransparent option, but this it looks like the header is still there, as the screen still requires a name. Here is…
7
votes
5 answers

React Navigation 5, block back navigation after login

I am using React Navigation 5 in a project, and I'm having trouble trying to block a user from navigating back after a certain point. The app uses a nested navigation structure similar to this: ROOT (STACK) |-- LoginScreens (STACK - options={{…
cristian
  • 866
  • 3
  • 8
  • 26
7
votes
4 answers

Where is placed createSwitchNavigator in react-navigation 5.x for migrating from react-navigation 4 to 5.x

I'm migrating a React Native application from react-navigation 4 to 5.x and i can't find which package contains createSwitchNavigation. Specifically i have doubts with the auth token check part. With react-navigation 4 i had: const switchNavigator =…
6
votes
5 answers

how to hide label in bottom tab navigator react navigation v5

im trying to hide the Label. and showLabel: false is not working. import React, {useLayoutEffect} from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import {useNavigation} from '@react-navigation/native'; import…
6
votes
2 answers

How to pass parameters to routes using tab navigator (createMaterialBottomTabNavigator)?

I am using createMaterialBottomTabNavigator and I want to pass parameters to the routes: return (
6
votes
2 answers

How to make a Header that Animates from Transparent to Opaque Color on Scrolling down in React-Native React Navigation 5?

I'm trying to make header that will animate from transparent to solid opaque color upon scrolling down using in React-Native React Navigation 5. Starts to transition to opaque when scrolling halfway Becomes fully opaque when reach the maximum…
kaizen
  • 1,580
  • 4
  • 26
  • 50
6
votes
2 answers

Attempted import error: 'EasingNode' is not exported from 'react-native-reanimated'

I am using @react-navigation/stack in my expo app and everything has been working fine. I wanted to start to add tab/drawer navigation to my app and keep running into the following 2 errors when I try to import import {…
6
votes
1 answer

React (Native) Context API Causes Stack Navigator (React Navigation 5) to re-render after state update

Thanks in advance for helping with this question. Some Context (No Pun Intended) I'm working on a company's project that will restrict me from putting all the code on here, but I will try and put as much relevant code as I can without revealing…
6
votes
1 answer

How to use StackNavigator with DrawerNavigator (ReactNavigation v5)? I'm using classes for every screen

P.S: Most of the Youtube videos or articles on the web aren't using ReactNavigation v5, they are using older versions. Can someone show a dummy project when user can click button to navigate to a different screen (using StackNavigator) and…
6
votes
0 answers

React navigation 5 custom header component

I am trying to make custom header in React Navigation v5 which I've been using since v3 but somehow it doesn't work in v5. my header is successfuly shown with its animation on scroll down but i cannot click anything inside the header and also i…
ishadif
  • 721
  • 2
  • 8
  • 20
6
votes
1 answer

Is it possible to present modals with the UIModalPresentationPageSheet or UIModalPresentationFormSheet style with react-navigation (v5)?

According to the Apple documentation, presenting a modal on iOS 13 defaults to the UIModalPresentationAutomatic, which typically maps to the UIModalPresentationPageSheet style. Similarly, react-native-screens appears to support the various options,…
bensie
  • 5,373
  • 1
  • 31
  • 34
6
votes
4 answers

Hide createBottomTabNavigator Tabbar in React Native

In React Native 0.62 is it possible to hide on scroll the tabbar created with createBottomTabNavigator from reactnavigation.org ? I'm curious if it's possible in a similar way that LinkedIn has, when you scroll down the page the tabbar disappears…
1 2
3
48 49