Questions tagged [react-navigation-bottom-tab]
422 questions
3
votes
5 answers
The action POP with payload was not handled by any navigator
I have no idea what is causing this bug in my react native app. I'm using version 5 of the React Navigation library.
It randomly crashes the app sometimes. Google searching hasn't helped me understand what this is. It's very selective though which…
Ali
- 484
- 3
- 5
- 16
3
votes
5 answers
Passing params in React Navigation 5
I'm trying to pass a few params between a Tab Navigator. Below is the structure of my program. In bold are the routes
App(Tab Navigator): { Main(stack) & Filter(screen) }
Main(Stack Navigator): { Home(screen) & MediaDetails(screen) }
I have a button…
Ali
- 484
- 3
- 5
- 16
2
votes
1 answer
React Native BottomTabs navigator not lazy loading initial screen
I just added Suspense to my BottomTabNavigator in my React Native app. The problem is that the first screen (HomeScreen) is not displaying - all others do. I see just white background when I navigate to Home Screen.
Here's what my code looks…
Arkadi
- 1,153
- 1
- 14
- 35
2
votes
1 answer
Navigating in BottomTabBar within nested Stack Navigator causes more renders than previous
I have a bottom tab bar, with a screen that I need to be 'hidden' from the tabs (e.g. no tab shown). So I created a Native Stack and have the initial screen of that stack set to the bottom tab stack. However - when I navigate using the bottom tabs,…
Joel Hager
- 2,990
- 3
- 15
- 44
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
1 answer
React-Native tabs navigation bug: automatically returns to the first bottomtab visited
if I navigate in a top tab inside the bottom tab 1, and then I try to go to the bottom tab2, after a few seconds it brings me back to the initial bottom tab 1
these are my dependencies:
"dependencies": {
"@react-native-async-storage/async-storage":…
Steelkeeper
- 21
- 1
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
2
votes
1 answer
React-Native V6 How to remove SafeArea from Bottom Tabs
enter image description here
I am new to programming. I have make the Bottom Tab's position "absolute" and can't align my Tab Icons to center.
It seems like a SafeAreaView blocking the bottom half of the Bottom-Tab.
import React from…
Ziloong Tan
- 21
- 2
2
votes
1 answer
Why does the React navigation bottom bar cover the layout?
I have a bottom bar like in the picture, but this bar prevents the bottom of my pages from appearing. How can I give the bottom of the page as much space like the height of the bottom bar? Thanks in advance.
OyeeRatio
- 205
- 3
- 13
2
votes
0 answers
Material Bottom Tabs Go to any tab using index
I am using this code and this is working fine it created tabs as i want. But i want that i can change tabs using index so that i can add some index or screen in the redux and i can redirect to that tab. I am not able to find anything related to it…
Rambler
- 267
- 1
- 12
2
votes
1 answer
React Native - Bottom Tab Navigator - error - Passing an inline function will cause the component state to be lost on re-render?
I have a stack navigator which contains a Bottom tab navigator.
The first tab of the bottom tab navigator further contains a TopTab Navigator .
This is being done to display a Top Tab as well as a Bottom tab.
Each of the other bottom tab screens…
satish marathe
- 1,073
- 5
- 18
- 37
2
votes
0 answers
Is nesting drawer navigation inside of tab navigation possible?
These are the imports I have on my 'Navigation.js'.
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { NavigationContainer } from "@react-navigation/native";
I have started to search through the documents and came…
localhost.3030
- 21
- 1
2
votes
0 answers
How to add outside box shadow in react navigation bottom tabs?
I would like to add a outside box shadow in react-native-navigation.
The desired effect should look like this:
Currently when I apply styles the outside box shadow does not change:
import React, { FunctionComponent } from 'react'
import…
twboc
- 1,452
- 13
- 17
2
votes
2 answers
React navigation 5 bottom tab bar android keyboard ISSUE
There is huge problem with bottom tab navigation on android that I'm struggling with and can't find any solution!!
on Android when keyboard shows the bottom tab bar goes upon the keyboard, which is obviously not a desired behaviour!
This happens…
Med Elbayoumi
- 21
- 2
2
votes
2 answers
React Navigation v5 update localization for tabBarLabel is not working
My React navigation version has just upgraded from v4 to v5.
Here is my nested navigation :
Stack Navigation
Main (Tab.Navigator)
home (Stack Navigation)
screen A (initial route screen)
screen B (screen)
settings (Stack Navigation)
Web …
Amy K
- 21
- 3