Questions tagged [react-navigation-bottom-tab]

422 questions
1
vote
2 answers

How to make Bottom tab transparent @react-navigation/bottom-tabs V6

I am using @react-navigation/bottom-tabs V6. I am trying to have transparent background on bottom. So far I cannot figure it out how to do it. Any ideas? Result so far: Code so far: import { createBottomTabNavigator } from…
1
vote
0 answers

How to use Stack in a Tab Navigator

I'm new to react native. May I know how can I use Stack Navigator in Tab Navigator? I'm trying to hide the 'Add Budget' class component and insert into 'Budget' component but I tried this way it doesn't work it shows TypeError: undefined is not an…
1
vote
1 answer

How do I get navigation and state in bottom tab

I am using react native bottom navigation 6. I want to get the navigation and state but it returns undefined. export default function Navigation() { return (
1
vote
1 answer

React native tab navigation modal options

I have my react tab navigation set up in the following way: export default MainStackScreens = () => { const MainStack = createBottomTabNavigator(); const screenOptions = ({ route }) => ({ tabBarShowLabel: false, tabBarIcon: ({ focused…
1
vote
0 answers

Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? While uisng an animated bottom tab component

I am using the react-native-animated-nav-tab-bar to create bottom navigation tab but it throws the error Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? I have used the code on the usage section of the…
1
vote
0 answers

Trying to create an authentication flow using a React navigation bottom tab whereby some screens are open while some need login

I'm trying to create an authentication flow with React navigation bottom tab, whereby a user can access some screens on the bottom tab navigation while some screens require login. Also i'm trying to make all the screens to be authenticated once a…
1
vote
1 answer

I wonder to make input components above bottom navigation react native expo

Hi I have a problem with components styling. I wonder to make some input components above the bottom navigation similar to I'm new at react native, Maybe you can give some articles or videos to archive that. Thank you so much
1
vote
0 answers

React Native - Keyboard is automatically hiding

I've got a problem with keyboard in react native. I have a component with TextInput inside of it. The problem is when I am touching it - keyboard is starting to show, but immediately hiding back. (Checked with event listeners of Keyboard - event…
1
vote
0 answers

Custom TabBarIcon hidden under DrawerNavigator - React Navigation v5

I am having this issue where a custom made TabBarIcon is not showing fully. I have read the docs, github to try and find a solution for this. What I could make out was that nesting a BottomTabsNavigator in a DrawerNavigator might have repercussions,…
1
vote
1 answer

Proper nesting bottom tab with external screen from stack

I am building an app using react-native 0.64 and react-navigation v5. I am trying to achieve a navigation structure with a Drawer on top, a HomeScreen (WITHOUT bottom tabs) with buttons to navigate to 5 screens -those WITH bottom tabs- and a…
1
vote
2 answers

Redirecting to a Stack navigator page from bottomTabNavigator

I have a project with a Stack and bottomTab navigator and I want to redirect to a stack navigator page from the bottomTabNavigator Here is the code for my project: Routes.js i.e Stack Navigator
1
vote
1 answer

React native : bottom navigation with dynamic initialRouteName implementation

I am a beginner in react native. I have gone through different related topics. But failed. This is my issues, I have a bottom navigator with 4 items, say Dashboard, X, Patient and Y. Here is the optimised bottom navigator code. const Stack =…
1
vote
2 answers

BottomTabNavigator not appearing on bottom of screen

I have bee trying to implement BottomTabNavigator in my app. In the output, Bottom Tab is appearing at the top of the screen, not at the bottom. Kindly help me in identifying the error. App.js import React from 'react'; import { NavigationContainer…
1
vote
0 answers

How to nest stack navigator, bottom tab navigator and drawer navigator?

I have been trying to nest stack navigator inside bottom tab navigator and which has been nested into drawer navigator. In terms of nesting, bottom tab navigator is at the top, then bottom tab navigator and then at the end stack navigator. I have…
1
vote
1 answer

How to resolve the error A navigator can only contain 'Screen' components as its direct children (found ';')?

I have been trying to nest drawer navigator, bottom tab navigator and stack navigator. I am getting two same errors: A navigator can only contain 'Screen' components as its direct children (found ';'). To render this component in the navigator,…