Questions tagged [react-navigation-bottom-tab]
422 questions
24
votes
3 answers
React Navigation route.params typescript
I'm creating a Expo managed React Native app with TypeScript and having some problems with React Navigation and TypeScript.
I want to specify the icon for the Bottom Tab Navigator on the Tab.Screen component.
This code works but complains because…
Dainel vdM
- 253
- 1
- 2
- 5
24
votes
8 answers
How to set the background color of Tab.Navigator?
As you can see below, I've tried many ways of setting the background color to green, all to no avail. The background remains blue like the image.
The inactiveColor and activeColor are working (white and red respectively).
…
RandomCoder
- 1,358
- 5
- 20
- 35
16
votes
2 answers
React native navigation v5 tab press not working
As seen on the code, tabPress is not called, am i doing it wrong or am i missing something, unfortunately i have not found any code samples for react navigation version 5.
Karli Ots
- 729
- 1
- 8
- 22
14
votes
3 answers
Passing params to tab navigator React Navigation 5
I’m using materialTopTabs and it seems like this loads all the screens in the navigator once its mounted. I have a screen List and inside it a tab navigator with 2 screens: Posts and Users. These two screen both depend on params passed from List.…
abdi
- 519
- 1
- 5
- 16
11
votes
5 answers
Is there a option to disable tabbar buttons
In my react native app, I have a router component which uses react-navigation-material-bottom-tabs.
In that component I have created it like this.
const tabNavigator = createMaterialBottomTabNavigator({
home: {
screen: Home,
…
Buwaneka Sudheera
- 1,277
- 4
- 17
- 35
10
votes
1 answer
Type error in getting route params within nested navigator using Typescript [react-navigation v6]
Having a navigation type definition as bellow, when I navigate from e.g AOne to BTwo with id:99 the console log of props.route.params shows correct info. But props.route.params.id throws type error
TypeError: undefined is not an object (evaluating…
Amir-Mousavi
- 4,273
- 12
- 70
- 123
10
votes
1 answer
How do navigate to a tab from another tab using react navigation v5
I have 3 tabs and each tab contains a set of stack navigators.
Home Stack
const HomeNavigator = createStackNavigator();
const HomeStackNavigator = ({ navigation, route }) => {
return (
…
Vineel
- 235
- 2
- 4
- 10
10
votes
4 answers
How to handle back button behavior in bottom tabs in React Native?
I have a @react-navigation/bottom-tabs navigator when my app opens whose contents are like:
szskdgi
- 295
- 2
- 17
9
votes
2 answers
Navigate to the screen when Tab on BottomTabNavigator is pressed
I would like to navigate to the screen when the particular tab on the BottomTabNavigator is pressed.
Normally, when the tab is pressed, it navigates to the configured screen automatically. But I don't want to have that behaviour. I want to hide…
TTCG
- 8,805
- 31
- 93
- 141
8
votes
3 answers
How to add an indicator under the active bottom tab?
I need to add an indicator for the active tab I tried to add a borderBottom with tabStyle but we can't check focused with that.
Using react-navigation v5 and createBottomTabNavigator for bottom tabs.
Here's my code:
sakshya73
- 5,570
- 5
- 22
- 41
8
votes
2 answers
warn Package undefined has been ignored because it contains invalid configuration. Reason: Cannot find module 'undefined/package.json'
In my app.json folder, I have everything bundled nicely, but I have one undefined package at the bottom of the install list:
"undefined": "react-navigation/bottom-tabs"
I tried running an "npm install react-navigation/bottom-tabs" but it threw…
MK_Pierce
- 916
- 2
- 10
- 26
8
votes
4 answers
How to reset tab stack when you come back to a tab from another tab react navigation v5
I have 3 tabs and each tab contains a set of stack navigators.
Home Stack
const HomeNavigator = createStackNavigator();
const HomeStackNavigator = ({navigation, route}) => {
return (
…
Vineel
- 235
- 2
- 4
- 10
7
votes
0 answers
react-navigation BottomTabNavigator VERY slow on some Android devices
I've got a minimal test ReactNative test in Expo running. 2 screens, both just have Text within a View.
This is run on a MBP, and tested on my Android device (Note10+) via QR code.
It is not just slow, it's unresponsive most of the time, when it…
Rich
- 970
- 2
- 16
- 42
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.
Danh Nguyen
- 91
- 1
- 5
7
votes
6 answers
How to show loading progress or spinner in the middle of the screen with React Native?
I am developing React Native app.
I was able to solve all problems by myself but this is exception.
I am going to load another screen with bottom tab navigator.
For example, after user login to the app, it should show main home screen which has many…
Happy Smile
- 167
- 1
- 3
- 8