Questions tagged [react-navigation-bottom-tab]
422 questions
1
vote
0 answers
Two tabs (Tab.Navigator) using one component to display lists, only data is different, Back button for the details page works wrong
when I tried to refactor the mobile app of 'Notes' from ‘JavaScript Everywhere’ book, a problem
The structure is like this:
RootNavigator(Stack.Navigator)
---AuthLoading(Screen)
---Auth(Stack.Navigator)
--SignIn(Screen)
…
JeremyQin
- 31
- 4
1
vote
1 answer
React native bottom tabs tabBardBadge does not work
I am trying to put a badge head on a tab bar in React Native but it is not working.
Below is an example of my code:
These are my module versions :
"@react-navigation/native": "^6.0.14",
"@react-navigation/bottom-tabs": "^6.4.1",
This is my code :
…
Alihaydar
- 91
- 3
- 9
1
vote
3 answers
How to set the background color of Tab.Navigator in 2023?
The below code is for bottom tab navigator how do I change color of it!
I tried many things like changing the color of the background using style options tried screen options color but it was not working I even activetint color and other but it was…
Mujtaba Sarwar
- 41
- 4
1
vote
0 answers
React Native - use bottom sheet to navigate to screens in BottomTabNavigator
I want to make last Tab as Show More tab and when i clicked on it, bottom sheet open which has remaining tab. I can make bottom sheet, and it is working but how can i go to the screen on bottom sheet after clicking on it like by clicking on setting…
Syed Aoun
- 11
- 1
- 4
1
vote
2 answers
How to go back from nested stack screen to other nested stack screen in React Navigation - React Native
I have a React Native app with React Navigation. My current navigation is two Tab navigators, and both of those have a Stack navigation with multiple screens.
My tabs look like this:
Jaakko Saranpää
- 51
- 1
- 5
1
vote
0 answers
Using both DrawerNavigator and BottomTabNavigator with the same screens
I'm writing a React Native app, while using react-navigation package for navigating through the app screens.
On my app's home screen, there is a bottom tab bar with about 4-5 buttons, each leading to a different screen. Besides that, all of my app's…
Ido Naveh
- 2,442
- 3
- 26
- 57
1
vote
0 answers
headerRight button misaligned
I am having trouble aligning the headerRight consistently across Screens.
I have a StackNavigator with a nested TabNavigator:
const Tabs = ({navigation}) => {
return (
(
…
Shawn Northrop
- 5,826
- 6
- 42
- 80
1
vote
0 answers
How to navigate between different nested stacks in react navigation without changing the state of bottom navigator
Current Behavior
My react-native application consists of a BottomTabNavigator that contains several StackNavigators. A simplified example of my structure looks like this
BottomTab
Tab 1 (default screen A)
Stack
Screen A
Screen B
Tab 2…
Nilupul Manodya
- 32
- 5
1
vote
3 answers
MaterialCommunityIcons showing incorrect icon in react native bottom tab navigator
I'm following the guide from https://reactnavigation.org/docs/bottom-tab-navigator/
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from…
Vincensiu
- 125
- 8
1
vote
1 answer
MaterialBottomTab not appearing on ios simulator
This is my file that I am trying to create a demo of a bottom-tab. The problem is, I only get a blank page, no sign of a bottom tab. There is no error that I can point to. I don't know what is causing it, I deleted and reinstalled the relevant…
landingburn
- 11
- 3
1
vote
1 answer
Show Bottom Tab Bar on Stack Screen React Native
I have a Nested Navigation in my React App
There are some stack screen in which i want to show bottom tab bar also
like 1st stack screen is clear & the 2nd has a bottom tab within it
Code
const Tab = createBottomTabNavigator();
const Stack…
newdevv2
- 201
- 3
- 10
1
vote
0 answers
Hiding tab bar on screens inside a nested stack navigator
I want to hide the tab bar on certain screens inside a nested stack navigator. I have a bottom tab bar, using a CUSTOM tab bar, set up like so:
const MainAppBottomTabs = createBottomTabNavigator();
const…
pfinferno
- 1,779
- 3
- 34
- 62
1
vote
2 answers
How can I navigate to a nested stack screen inside a sibling tab while preserving its initial screen? (React Navigation)
The Code:
I'm using React Navigation 6 with the following hierarchy:
MainTabNavigator
HomeStack
HomeScreen (HomeStack initial screen, contains a "Pay" button)
OtherScreen
MembershipStack
MembershipHomeScreen…
Okkult
- 71
- 1
- 7
1
vote
1 answer
Problem with React Navigation Bottom Tabs and Stack
I have 5 pages in bottomTab, and I want to navigate to others from these 5 pages. I looked at the docs in the official site of React navigation, wrote my code the same way, but it doesnt work.. I'm putting my code below, so you can have a look at…
Jean Vitor Vieira
- 11
- 1
1
vote
2 answers
Prevent Tab Bar from being pushed up by keyboard in react Native
I have a problem similar to this in which the bottom Tab Bar is a custom component passed to React Navigation bottom Tab Navigator and I want to prevent it from being pushed up when the virtual keyboard pops up, which means the opposite to…
Someone
- 350
- 3
- 13