Questions tagged [react-navigation-bottom-tab]
422 questions
6
votes
1 answer
React Navigation stop back button behaviour on bottom bar
Hey I am using the createBottomTabNavigator() from React Navigation and I have a custom topbar which I update with my own states. The problem is when I click on a Tab the listener gets called with every navigation so the topbar gets into the wrong…
Lucas Goldner
- 617
- 9
- 29
6
votes
5 answers
how to hide label in bottom tab navigator react navigation v5
im trying to hide the Label. and showLabel: false is not working.
import React, {useLayoutEffect} from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {useNavigation} from '@react-navigation/native';
import…
Кріс
- 147
- 1
- 2
- 7
6
votes
2 answers
How do you make rounded corners on a tab bar on React Native with React Navigation?
Stack:
React Native
React Navigator
Core components only
I have this style on TabNavigator.tsx:
const styles = StyleSheet.create({
tabStyle: {
backgroundColor: colors.background,
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
…
Xiiryo
- 3,021
- 5
- 31
- 48
6
votes
2 answers
How to pass parameters to routes using tab navigator (createMaterialBottomTabNavigator)?
I am using createMaterialBottomTabNavigator and I want to pass parameters to the routes:
return (
showtime
- 1
- 1
- 17
- 48
6
votes
4 answers
Hide createBottomTabNavigator Tabbar in React Native
In React Native 0.62 is it possible to hide on scroll the tabbar created with createBottomTabNavigator from reactnavigation.org ?
I'm curious if it's possible in a similar way that LinkedIn has, when you scroll down the page the tabbar disappears…
Shury
- 468
- 3
- 15
- 49
5
votes
1 answer
How to render a Modal within a Tab Screen in React Navigation
I need to render a modal when the user press in the middle button. I'm using react-native-raw-bottom-sheet library to provide a Modal to my application.
I tried to pass a prop isFocused={props.navigation.isFocused} inside the but the…
bsantoss
- 427
- 6
- 17
5
votes
2 answers
Change bottom bar container color of react navigation tabs in react native
I am trying to add border radius to bottom bar but with this
i want to change container color from default to purple.
how can i do that ?
What i have done so far
What i want
Code:
tabBarOptions: {
activeTintColor: colors.primary,
…
Muhammad Ashfaq
- 2,359
- 5
- 20
- 46
5
votes
4 answers
How can i create a transparent background in react navigation 5.x?
I changed the background color to make it more obvious. I want the red container to become transparent.
Is there any way to achieve this?
I am using react-navigation 5 and I created a custom bottom tab bar according to
Bottom-tab-navigator
The code…
user3009752
- 164
- 2
- 9
- 24
5
votes
1 answer
tabBarOnPress Not Available in React Navigation v5
I'm using React Navigation v5 with @react-navigation/bottom-tabs and my tabs look something like this.
Muhammad Yaqoob
- 94
- 1
- 6
5
votes
1 answer
React Navigation 5 pass params to screen inside nested navigator
We are migrating an app in React Navigation 4 to React Navigation 5.
The project has a BottomTabNavigator which has for one of its routes a nested TopTabNavigator with three tabs. One of the tabs in the BottomTabNavigator when pressed navigates to a…
Dieguinho
- 758
- 2
- 14
- 31
4
votes
1 answer
stack from NativeStackNavigator (nested in BottomTabNavigator) resets everytime the BottomTabNavigator changes tabs
Situation:
The react native app has a BottomTabNavigator (react-navigation/material-bottom-tabs) and one of the tabs has a NativeStackNavigator (react-navigation/native-stack).
BottomTabNavigator:
tab1
tab2
tab3:
…
bieboebap
- 320
- 3
- 18
4
votes
1 answer
How can you add slide transition when switching between tabs on React Bottom Tab Navigator?
I am using React Native with bottom tabs doing switches between native-stack tab screens. For the most part it is okay, but the tab switch is a bit jarring and sometimes gets a bit laggy for more complex screens.
How do I introduce some form of…
Archimedes Trajano
- 35,625
- 19
- 175
- 265
4
votes
1 answer
React Native Tab Navigator: empty space at bottom of tab bar
I'm using react-navigation@4.0.10 and react-native@0.63.5 in my React Native app, and when I use createBottomTabNavigator, there's a gap underneath the tab labels on iPhone 11 Pro. It does not do the same on iPhone 12. My code for the…
gkeenley
- 6,088
- 8
- 54
- 129
4
votes
2 answers
How to play a Lottie animation only once in LottieView?
I have developed a bottom tab navigator and used Lottie animations as icons. I want them to autoplay and get played only once when it's in focus (like the Binance app). I have tried with loop={false} but that stops it from animating altogether. The…
Ibtsam Ch
- 383
- 1
- 8
- 22
4
votes
3 answers
Whenever I am moving to different tab screens it shows the error "Accessing the state property of the route object is not supported"
I am making a food delivery app whenever I am switching to different screens in tab bar it shows the error
Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the…
Ayush Kumar
- 494
- 1
- 6
- 21