I've been struggling to apply the proper styling so that my Top Tab Navigator is horizontally centered on the screen. I've tried applying AlignItems: center to the different style props but that does not seem to work. Any tips?
Here is the documentation I have been following: https://reactnavigation.org/docs/material-top-tab-navigator/
import React from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
import Creators from "../../screens/Creators/Creators";
import Feed from "../../screens/Feed/Feed";
import Profile from "../../screens/Profile/Profile";
const Tab = createMaterialTopTabNavigator();
function TabNav() {
return (
<Tab.Navigator
tabBarOptions={{
labelStyle: {
fontSize: 12,
color: "white",
},
tabStyle: {
width: 100,
height: 40,
marginTop: 50,
},
indicatorStyle: {
backgroundColor: "white",
},
style: {
backgroundColor: "#03182d",
},
}}
>
<Tab.Screen name="Creators" component={Creators} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
);
}
export default TabNav;
remove tabStyle and it will work perfectly like this
<Tab.Navigator
tabBarOptions={{
labelStyle: {
fontSize: 12,
color: "white",
},
//remove this
//tabStyle: {
// width: 100,
// height: 40,
// marginTop: 50,
},
indicatorStyle: {
backgroundColor: "white",
},
style: {
backgroundColor: "#03182d",
},
}}
>
<Tab.Screen name="Creators" component={Creators} />
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>
or remove only width as it is smudging your tabs
Related
I'm working on a react-native app using react-navigations createMaterialTopTabNavigator. I've read through the docs, but I cannot seem to find what props I need to modify to change the bottom border color of the active tab.
Does anyone have any advice?
FWIW here is my current Navigator code:
const TopTab = createMaterialTopTabNavigator()
function ProgressNavigator() {
const themes = useThemes()
return (
<TopTab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: themes.lightBackground,
},
tabBarLabelStyle: {
paddingTop: 10,
fontSize: 14,
fontWeight: "bold",
},
tabBarActiveTintColor: themes.secondary.color,
tabBarInactiveTintColor: "#FFF",
}}
>
<TopTab.Screen name="Table" component={ProgressTable} />
<TopTab.Screen name="Chart" component={ProgressChart} />
</TopTab.Navigator>
)
}
Use tabBarIndicatorStyle to style an indicator. Below example sets label (and possible icon) and indicator to red.
<Tab.Navigator
screenOptions={{
tabBarIndicatorStyle: {
backgroundColor: 'red'
},
tabBarActiveTintColor: 'red',
}}>
...
</Tab.Navigator>
My goal is to copy WhatsApp UI. However, I am having trouble making the camera icon smaller while keeping the others flexed in the row direction. Below is code
<Tab.Navigator
screenOptions={{
tabBarPosition: 'top',
tabBarIndicatorStyle: {
backgroundColor: colors.text,
height: 4,
},
tabBarStyle: {
backgroundColor: colors.foreground,
},
tabBarContentContainerStyle: {
flexDirection: 'row',
flex: 1,
justifyContent: 'space-between',
// alignItems: 'center',
},
tabBarLabelStyle: {
fontWeight: '600',
},
tabBarActiveTintColor: colors.text,
tabBarInactiveTintColor: colors.secondaryText,
}}
initialRouteName="chats">
<Tab.Screen
name="Camera"
component={Camera}
options={{
tabBarIcon: ({ color }) => (
<AntDesign name="camera" size={24} color={color} />
),
tabBarLabel: () => null,
tabBarItemStyle: { width: 50 },
tabBarIconStyle: { width: 75 },
}}
/>
<Tab.Screen
name="Chats"
component={Chats}
/>
<Tab.Screen
name="Status"
component={Status}
/>
<Tab.Screen
name="Calls"
component={Calls}
/>
</Tab.Navigator>
After messing around with the width of tabBarItemStyle, I noticed that on click, it changes other tabs widths as well. In the documentation for tabBarItemStyle, it says it changes the individual styling, but it is not what I am experiencing. I get the following when I click the camera icon:
and when I click other tabs this:
I can't change the style of the tab individually, I tried lots of different variations. What am I missing? Thanks in advance.
I added tabStyle: { width: "auto" } to fit the tabs of MaterialTopTabNavigator to the width of the text, but by adding this, the tabs are moved to the left side as shown in the image below.
Tabs are too far to the left.
The answer to this question says to remove tabStyle, but if I remove tabStyle, all tabs will have the same width.
I thought about using my own component in the tabBar, but I gave up because I couldn't reproduce the animation when moving the tab.
I thought about using paddingHorizontal to force it to be centered, but I decided against it because it might not be centered if the font size is changed in the OS.
If you know more about this, please let me know how to solve it.
The design I want to implement (edited in Paint)
import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";
import React, { useRef } from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
const Tab = createMaterialTopTabNavigator();
const Page = () => {
return (
<Tab.Navigator
tabBarOptions={{
labelStyle: {
fontSize: 14,
fontWeight: "bold",
},
activeTintColor: "#ffffff",
inactiveTintColor: "#000000",
pressOpacity: 1,
indicatorStyle: {
backgroundColor: "black",
height: 30,
borderRadius: 30,
top: 9,
},
tabStyle: {
width: "auto",
},
}}
>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Message" component={Message} />
<Tab.Screen name="Store" component={Store} />
</Tab.Navigator>
);
};
export default Page;
I think this should definitely work. If not, let me know.
import { View, Text, StyleSheet, Button, SafeAreaView } from "react-native";
import React, { useRef } from "react";
import { createMaterialTopTabNavigator } from "#react-navigation/material-top-tabs";
const Tab = createMaterialTopTabNavigator();
const Page = () => {
return (
<Tab.Navigator
tabBarOptions={{
labelStyle: {
fontSize: 14,
fontWeight: "bold",
},
activeTintColor: "#ffffff",
inactiveTintColor: "#000000",
pressOpacity: 1,
indicatorStyle: {
backgroundColor: "black",
height: 30,
borderRadius: 30,
top: 9,
},
tabStyle: {
width: "auto",
},
}}
>
<View style={{flexDirection:"row", justifyContent:"center"}}>
<View>
<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Message" component={Message} />
<Tab.Screen name="Store" component={Store} />
</View>
</View>
// If the above does not work than use the below one and comment the above part
// <View style={{flexDirection:"row", justifyContent:"center"}}>
// <Tab.Screen name="Home" component={Home} />
// <Tab.Screen name="Message" component={Message} />
// <Tab.Screen name="Store" component={Store} />
// </View>
</Tab.Navigator>
);
};
You can add tabBarContentContainerStyle attribute below, it works well for me：
<Tab.Navigator
initialRouteName="Attention"
screenOptions={{
lazy: true,
tabBarPressOpacity: 1,
tabBarPressColor: 'rgba(0,0,0,0)',
tabBarInactiveTintColor: Style.unActiveText,
tabBarActiveTintColor: Style.mainColor,
tabBarContentContainerStyle: {
alignItems: 'center',
justifyContent: 'center',
},
tabBarIndicatorStyle: {
display: 'none',
},
tabBarItemStyle: {
width: 70,
paddingHorizontal: 0,
position: 'relative',
padding: 0,
height: 45,
},
tabBarLabelStyle: {
fontSize: 15,
},
tabBarStyle: {
width: 'auto',
height: 45,
borderBottomColor: 'red',
backgroundColor: '#fff',
},
}}>
</Tab.Navigator>
Just apply those styles to screenOptions parameter in your navigator and you're done:
tabBarStyle: {
alignSelf: "center",
flexDirection: "row",
},
tabBarItemStyle: {
width: "auto",
}
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:
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: colors.brown,
labelPosition: 'below-icon',
}}>
<BottomTab.Screen
name="Home"
component={HomeTabNav}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({focused}) => {
return focused ? (
<HomeSelectedIcon height={ms(24)} width={ms(24)} />
) : (
<HomeIcon height={ms(24)} width={ms(24)} />
);
},
}}
/>
...
</BottomTab.Navigator>
);
};
Thanks in advance!
I figured it out myself by making a custom tabbar icon if someone needs to achieve this using the bottom-tab bar only.
Here's the code.
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: colors.brown,
showLabel: false,
tabStyle: styles.tabStyle,
style: styles.tabContainerStyle,
}}>
<BottomTab.Screen
name="Home"
component={HomeTabNav}
options={{
tabBarLabel: 'Home',
tabBarIcon: ({focused}) => {
return focused ? (
<View style={styles.labelFocusedContainer}>
<HomeSelectedIcon height={24} width={24} />
<Text style={styles.labelFocusedStyle}>Home</Text>
</View>
) : (
<View style={styles.labelContainer}>
<HomeIcon height={24} width={24} />
<Text style={styles.labelStyle}>Home</Text>
</View>
);
},
}}
/>
...
</BottomTab.Navigator>
const styles = StyleSheet.create({
labelContainer: {
alignItems: 'center',
width: '100%',
},
labelFocusedContainer: {
alignItems: 'center',
width: '100%',
borderBottomWidth: 3,
borderBottomColor: colors.brown,
},
labelFocusedStyle: {
textAlign: 'center',
marginVertical: 8,
color: colors.brown,
backgroundColor: 'transparent',
fontSize: 10,
},
labelStyle: {
textAlign: 'center',
marginVertical: 8,
color: colors.veryDarkgray,
backgroundColor: 'transparent',
fontSize: 10,
},
});
But the best and easy way to do this is by using createMaterialTopTabNavigator and using these props.
tabBarPosition="bottom"
tabBarOptions={{
showIcon: true,
pressOpacity: 1,
iconStyle: styles.iconStyle,
showLabel: true,
activeTintColor: colors.brown,
indicatorStyle: {
borderWidth: 2,
borderColor: colors.brown,
},
This does not seem to be possible / easily achievable with bottom-tabs, but you could use the material version - #react-navigation/material-top-tabs and configure it to match your needs, specifically using tabBarPosition="bottom" and tabBarOptions={{ indicatorStyle: { backgroundColor } }}.
You can check more options in the docs: https://reactnavigation.org/docs/material-top-tab-navigator/#tabbaroptions
import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs';
const Tabs = createMaterialTopTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tabs.Navigator tabBarPosition="bottom" tabBarOptions={{ indicatorStyle: { backgroundColor: 'red' } }}>
<Tabs.Screen name="screen 1" component={View} />
<Tabs.Screen name="screen 2" component={View} />
</Tabs.Navigator>
</NavigationContainer>
);
}
The best answer would be to use the tabBarButton prop to override and add your own custom styles to the container of the tab button.
https://reactnavigation.org/docs/bottom-tab-navigator#tabbarbutton
const CustomTabButton = (props) => (
<Pressable
{...props}
style={
props.accessibilityState.selected
? [props.style, styles.activeTab]
: props.style
}
/>
)
styles.activeTab is the custom style you want to add, be careful to spread the props.style to get the default styles from the library like width, padding, height etc
props.accessibilityState.selected will add styles according to condition if you want styles for all the tabs you can remove the condition.
Inside screeenOptions prop on navigator or the option props of each screen.
tabBarButton: CustomTabButton
Using material top tab is not a good solution because it does not support well with a keyboard. But bottom tabs do work well with the keyboard.
I am building a bottom tab navigator with react-navigation (react-native).
As you can see in the screen shot i have a borderTopLeftRadius & borderTopRightRadius being applied to my Tab container via tabBarOptions.tabStyle but behind the tab bar itself is a grey background so it's not clear that my tab bar container is in fact curved.
Is there a way to change the background of the container containing my tab bar ?
function RootNavigator() {
return (
<NavigationContainer linking={deeplinkConfig} fallback={<Loading />}>
<Stack.Navigator initialRouteName={routeConfig.mainApp}>
<Stack.Screen name={routeConfig.mainApp} component={AppNavigator} />
</Stack.Navigator>
</NavigationContainer>
);
}
const Tab = createBottomTabNavigator();
export function CustomTabNavigator({tabBarOptions = {}, ...props}) {
return (
<Tab.Navigator
{...props}
tabBarOptions={{
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
labelStyle: [styles.labelStyle],
tabStyle: [styles.tabContainer],
style: [styles.tabBarContainer],
...tabBarOptions,
}}
/>
);
}
export const CustomTabScreen = Tab.Screen;
const styles = StyleSheet.create({
tabBarContainer: {
backgroundColor: '#f4f4f4',
marginBottom: 15,
borderWidth: 1,
borderBottomWidth: 0,
borderColor: '#D5D5D5',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
tabContainer: {
height: 55
},
labelStyle: {
fontSize: 12,
}
});