Stack Overflow
Stack Overflow

Questions tagged [react-navigation-v6]

Version 6 of the routing and navigation library for Expo and React Native apps.

Only use this tag for when V6 specific cases are involved.

See the official docs for changes compared to : https://reactnavigation.org/docs/6.x/upgrading-from-5.x#general-changes

251 questions
3
votes
2 answers

How can I set the header height in React Navigation?

It seems like except backgroundColor nothing else has an effect in headerStyle. const defaultNavOptions = { headerBackTitle: 'Back', headerStyle: { backgroundColor: colors.secondary, height: 100, }, Then I'm passing the options: …
Fotios Tsakiris
  • 1,310
  • 1
  • 18
  • 24
3
votes
5 answers

screenOptions:{{tabBarHideonKeyboard: true}} not Working

When I am using custom tab bar through tabBar function tabBarHideOnKeyboard does not work but without tabBar function it works fine, any ideas on how I can make it work using tabBar function as well.
Adeel Yousaf
  • 31
  • 1
  • 2
3
votes
0 answers

How can I align bottom tab navigation to bottom?

I am currently making custom bottom tab navigator because I had issues with the react native safe context where the black bar on the phone goes on top of the text on the bottom tab. And I would like to have it on bottom. I have also basic bottom…
Jukka Koivu
  • 269
  • 4
  • 15
3
votes
1 answer

React Navigation 6.x Header problem in bottom-tab

I have updated my dependencies to React Navigation 6.x React Navigation 6.x says, "Headers by default in Bottom Tabs & Drawer# Developers often want to show a header for screens inside of drawers and bottom tabs. To do this, we had to nest a stack…
Shailendra
  • 31
  • 3
2
votes
1 answer

React Native - How to handle error The action 'NAVIGATE' with payload .. was not handled by any navigator?

Im trying to handle the error The action 'NAVIGATE' with payload .. was not handled by any navigator tried having a no route match. the documentation says: const config = { screens: { Home: { initialRouteName: 'Feed', screens:…
learncode
  • 127
  • 6
2
votes
0 answers

React Navigation 6 - Header Title moves to opposite direction as Screen. Why?

I changed the direction the screen moves to move from left to right. However, while the screen moves from left-right, the header title moves still from right to left which looks of course weird. Is there a way to make the header also move from left…
learncode
  • 127
  • 6
2
votes
1 answer

Type of route name, route params in React Navigation Typescript

I am using ReactNavigation v6 along with typescript I have created a helper functions as export function navigate(routeName, routeParams) { navigationRef.current?.navigate(routeName, routeParams); } What type should I specify for routeName &…
kashif-sk
  • 51
  • 1
  • 9
2
votes
2 answers

React-Native: tabLongPress event listener on react-navigation bottom tabs

I'm using @react-navigation/material-bottom-tabs and it works great! How can I add the listener for the long press event on tab icons? ( …
Capella
  • 881
  • 3
  • 19
  • 32
2
votes
0 answers

Is it possible to create a component property from within a useEffect or Lifecycle method?

For example I could have a component class HomeDefault extends PureComponent { ... } and I could add a property after the instance like so before the export HomeDefault.someProperty = {test: 'test'} Now if I were to use something like a higher…
Pradeep Dhema
  • 87
  • 8
2
votes
2 answers

Deeplinking multiple paths for a screen in react-navigation 6+

I have some screens that need to support multiple deep linking paths like this: export const navigationConfig = { prefixes: supportedDeepLinkURLs, config: { screens: { Root: { path: '', screens: { Article: { …
Florin Dobre
  • 9,872
  • 3
  • 59
  • 93
2
votes
2 answers

Properly typing route.params in custom bottom tab bar

I cannot properly type route.params for a bottom tab navigator. For example, I have the navigator and params type like this: export type BottomTabParamList = { ListScreen: { i18nKey: string }; DetailsScreen: { i18nKey: string }; …
pfinferno
  • 1,779
  • 3
  • 34
  • 62
2
votes
0 answers

React Navigation - Dynamic Height of Container

I am trying to achieve a bottom sheet for a mobile app, with a navigation. I am using react-native-bottom-sheet and react-navigation v6. The react-native-bottom-sheet works fine with dynamic height, however the issue i have is with…
Eden Eliel
  • 21
  • 1
2
votes
0 answers

Type Annotation in react-navigation

I am quite new to typescript and so I am struggling a bit with type annotating. I am using react-navigation and adding a custom header. Everything works fine. But I am unable to add types for custom header props. My code looks like this: import {…
WhoAmI
  • 21
  • 1
2
votes
3 answers

"Undefined symbols for architecture x86_64 error" when migrating from React Navigation 5 to 6 on iOS

I am developing an app with React Native and trying to migrate from React Navigation 5 to 6. For this I have followed the steps that come in the Upgrading from 5.x guide. The versions of React and React Native are these: "react":…
Jon
  • 891
  • 13
  • 32
2
votes
4 answers

How to prevent going back in React Native using React Navigation and 'beforeRemove' eventListener with custom modal?

What I want to achieve is straightforward. I want the user to be forced to confirm exiting a tab navigator called 'checkout'. I read on React Navigation docs about preventing going back about the 'beforeRemove' event which seems neat and the right…
Max
  • 73
  • 2
  • 9
1 2
3
…
16 17