Questions tagged [react-navigation-bottom-tab]
422 questions
1
vote
1 answer
How to make complicated designs like bottom tab bar in react native?
I want to make a tabbar like below in the application. How can I do that?
sdD
- 21
- 3
1
vote
1 answer
Have a shared profile screen for multiple tab screens in react native
I have a react native app with expo that uses react navigation v6 with a bottom tab navigator and I want to have a Profile Screen in the same stack without showing up on the bottom tab, and only accessible when manually navigated.
export function…
Someone
- 350
- 3
- 13
1
vote
0 answers
How to wrap each Tab.Screen in the same component
when using react-navigation's BottomTabNavigator, how can I wrap each screen with a component? For example, say I have some tabs like so:
pfinferno
- 1,779
- 3
- 34
- 62
1
vote
1 answer
Force the screen defined in initialRouteName to be displayed when the tab button is pressed
I have a problem with bottom tab navigation. This is screen structure:
Main Tab:
Tab A
Screen A1
Tab B
Screen B1
Screen B2
I can navigate from Screen A1 to Screen B2 (changing tab).
I can navigate from Screen B1 to Screen B2.
This is the…
Jon
- 891
- 13
- 32
1
vote
0 answers
How do I change background color of bottom tabs when tab has stack on it?
Currently I have set the background color in the tab navigator.
Jukka Koivu
- 269
- 4
- 15
1
vote
1 answer
Navigate to first screen in bottom tab navigation in reat native
I have 2 screens in one Bottom stack navigator and 2 more screens in one of the bottom stack navigator screen.
Order of screens
Home Bottom Tab
Home Screen
Record Screen
About Bottom Tab
About screen
If I am on the record screen and I…
Ghayas Ud Din
- 315
- 2
- 14
1
vote
1 answer
Custom Header not displaying for StackNavigator in React Native
I am fairly new to react native, but I have some experience. I am creating my own app for both iOS and Android by following along with a tutorial course that I had already completed and making my own modifications. I am having an issue with…
Tamira Bell
- 21
- 4
1
vote
0 answers
backBehavior is not working in react native for current version
react native BackBehavior ="history" or "order" is not working in react native bottom tab for current version what can i do to fix this..suppose from stories if i go to some other page then in their back navigation it should go back to stories tab…
afshana zaman
- 21
- 6
1
vote
2 answers
When using both: Stack Navigator and BottomTab Navigator how do I hide the bottom tab when inside a Stack Navigation Screen?
I am having a Bottom Navigation with 2 Tabs so far (Home & Messages). When inside Messages I can press on a User to get navigated to the ChatScreen which is a Screen from the Stack Navigator. In that ChatScreen I want to hide the BottomTab. I know…
alobre
- 85
- 7
1
vote
0 answers
How to play a Lottie animation only once in LottieView in material-bottom-tabs
I am making an app i have made a bottom navigation bar.I have used material-bottom-tabs.
I added Lottie animation But when i click on tab the tab animate.it animates contentiously.
Here is the code
const Tab =…
Akrash Nadeem
- 96
- 2
- 11
1
vote
1 answer
How can I pass props to individual with React Navigation?
I have the following stack navigator code in my React Native app using @react-navigation/bottom-tabs:
const Tab = createBottomTabNavigator();
const TabNavigator = () => (
gkeenley
- 6,088
- 8
- 54
- 129
1
vote
1 answer
How to add a button on the bottomTabNavigator rather than navigating to a screen in react native?
I am using react-navigation 6. my requirement is to add a signout button in the bottom tab, I have a bottomTabNavigator. So, I want to add that button on the bottom tabs so as soon as it is pressed the user is logged out. is there a way this can be…
Yus
- 124
- 2
- 15
1
vote
1 answer
How to add header left on Tab.Screen using "@react-navigation/bottom-tabs"
I'm using @react-navigation/bottom-tabs Package but I don't understand how to add a header left on Tab.Screen tag?
And also can I add an image on the header left?
Here is my code:
import React from "react";
import { createBottomTabNavigator } from…
Talha Akbar
- 462
- 3
- 15
1
vote
1 answer
Disable navigation to top of stack in @react-navigation/bottom-tabs
I have a main bottom tabs navigator in my app which contains three screens and every one of these pages contains a stack navigator. The problem is, whenever i press The icon in bottom tab when it is focused, the stack will go back to the first page…
Ardalan
- 723
- 9
- 26
1
vote
0 answers
how to customize width as per label on @react-navigation/material-bottom-tabs
I had bottom bar I need it to be like that
but I can't update width for each item
fatma mahmoud
- 133
- 1
- 9