Questions tagged [react-navigation-bottom-tab]
422 questions
2
votes
3 answers
React Navigation 5 Handling Modals, Bottom Tabs, and Stacks
How do you handle different navigation when I want to combine stack navigator, bottom tabs, and modal? Right now, things are working, but the issue is that I only want specific links to be a modal, instead, adding mode: 'modal' will make everything…
hellomello
- 8,219
- 39
- 151
- 297
2
votes
2 answers
How to add top border to tab that is active using react native bottom tabs
I'm using react navigation v5. I am using the bottom tab navigator. I want to add a border to the top of the active tab. So far everything I've tried has not worked. Here is my navigation file (minus the imports):
const AuthStack =…
Jo Momma
- 1,126
- 15
- 31
2
votes
2 answers
How to customize material bottom tab navigator in react native?
I am trying to customize the colour of the material bottom tab navigator to LinearGradient.
To achieve this I am using expo- linear-gradient, and I am using props to pass the methods, but I don't know how to access these props in the customTabBar…
Ayush Kumar
- 494
- 1
- 6
- 21
2
votes
0 answers
React Navigation force a tab to load when lazy loading is on
I'm lazy loading tabs (using the built in bottom tab navigator) on my React Native app that uses React Navigation, to make my app launch faster. But I also have a frequently used tab that loads a bit slow due to the nature of its contents, and I…
Can Poyrazoğlu
- 33,241
- 48
- 191
- 389
2
votes
4 answers
React Native add border Radius to active tab bar
I want to implement a top border radius to the active tab bar navigator to be like below image.
My code below is implementing a border radius to the whole createBottomTabNavigator but not as I expected above
jeffngugi
- 66
- 1
- 10
2
votes
2 answers
Is there a way to check if a specific bottom tab is active before showing another component?
I'm using react navigation 5 and used createBottomTabNavigator() to create a bottom tab to render the body with different components when tapped. The problem now is that I also need to show a text component only when 'Settings' tab is active and…
zosozo
- 393
- 2
- 5
- 16
2
votes
0 answers
Using createBottomTabNavigator not displaying anything
I am trying to create a simple app, where my home screen has the option to tab between two other screens. I use createBottomTabNavigator as suggested in the documentation here , however when I run npm start I have blank screen and nothing more. I…
newbie coder
- 644
- 5
- 18
2
votes
1 answer
How to create a bottom tab bar with complex shapes in react native
I would like to achieve a specific view shape for my bottom navigation in my react-native project. It's a rectangle shape with a center circle shape, with the circle a little bit suspended from the rectangle and also intersecting the rectangle. Here…
Isaac Oluwatemilorun
- 566
- 5
- 16
2
votes
1 answer
Modifying the tabBarBadge color in react native bottom tab navigator
I have a react-native app that uses createBottomTabNavigator for navigation. I have set custom icons for the 2 tabs that comprise the navigator and I have added badges to them using navigation.setOptions like so:
navigation.setOptions({ tabBarBadge:…
O8eiosSam
- 78
- 1
- 9
2
votes
1 answer
Opening the Drawer navigator from the bottom tab
I'm upgrading my App from react-navigation 4 to 5.
In version 4 I have a tab that open the drawer using the following code
const MainNavigator = createBottomTabNavigator(
{
More: {
screen: AdminNavigator,
navigationOptions: {
…
Butri
- 339
- 8
- 22
2
votes
4 answers
React Native Vector Icons won't show in Bottom Tab Navigation in Android
the icon shows in a screen/page, but won't show in the bottom navigation. Solutions that I've tried:
Follow the installation guide from github, I've tried both the GRADLE & MANUAL options, but same result
Have tried to ./gradlew clean then npx…
Muhammad Haekal
- 477
- 6
- 22
2
votes
2 answers
How to conditionaly change screen buttons in React Native bottom tab?
I have a bottom tab with buttons A,B,C,D,E.
When I'm on screen A I want the tab to show B,C,D,E buttons but not button A.
When I'm on screen B I want the tab to show A,C,D,E buttons but not button B.
When I'm on other screens I want to show …
Fitim Zenuni
- 35
- 4
2
votes
0 answers
Top level stack navigator doesn't see screen options for grandchild stack navigator (react-navigation 5)
My app is set up nearly identical to this code snippet in the docs: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state:
const FeedStack = createStackNavigator();
function…
alishaevn
- 73
- 7
2
votes
1 answer
How to disable tabBarBadge in navigation v5 createbottomtabNavigator?
To display notifications badge, I found out I can use tabBarBadge from react-navigation. tabBarBadge accepts only a number or a string and not a function, so I couldn't figure out a way to disable it when the user is focused on the notifications…
Siddharamesh
- 83
- 1
- 12
2
votes
2 answers
How to find current screen/route in nested Tab.Navigator
I have a custom TabBar for a Tab.Navigator that needs to have a different action when one of the tabs is selected based on what the current route is in the Stack Navigator component for that tab.
How can I inspect the currently displayed…
airowe
- 794
- 2
- 9
- 29