429 questions
29 votes
8 answers
74k views
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 ...
28 votes
3 answers
44k views
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 ...
16 votes
2 answers
17k views
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. <Tab.Navigator labeled={...
15 votes
4 answers
26k views
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 ...
14 votes
5 answers
18k views
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 = ...
12 votes
2 answers
26k views
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 ( ...
11 votes
10 answers
108k views
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 ...
11 votes
2 answers
25k views
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'...
11 votes
1 answer
5k views
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 ...
10 votes
5 answers
17k views
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 ...
10 votes
4 answers
12k views
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: <Tab.Navigator tabBarOptions={{ activeTintColor: '#77dd77', ...
8 votes
3 answers
9k views
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. ...
8 votes
2 answers
20k views
How to pass parameters to routes using tab navigator (createMaterialBottomTabNavigator)?
I am using createMaterialBottomTabNavigator and I want to pass parameters to the routes: return ( <Tab.Navigator initialRouteName="Home"> <Tab.Screen name="Home" ...
8 votes
2 answers
7k views
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, ...
8 votes
2 answers
25k views
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 ...