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
<Tab.Navigator
tabBarOptions={{
showLabel:false,
activeBackgroundColor: COLORS.reddish,
inactiveBackgroundColor: COLORS.transparent,
style:{
position:'absolute',
bottom:0,
right:0,
left:0,
elevation:0,
height:55,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon:({focused })=> (
<View style={{
alignItems:'center',
justifyContent:'center',
}}>
<Image
source={icons.home}
resizeMode='contain'
style={{
width:30,
height:30,
tintColor:focused?COLORS.white: COLORS.reddish
}}
/>
<Text style={{
color:focused?COLORS.white:COLORS.reddish,
}}>HOME</Text>
</View>
)
}}
/>
//code for other Tab.Screen
</Tab.Navigator>
Kindly assist
I was able to figure out after going through React Navigation documentation.
To styles an individual tab I've added tabStyle in tabBarOptions props as seen in below code.
<Tab.Navigator
tabBarOptions={{
showLabel:false,
activeBackgroundColor: COLORS.reddish,
inactiveBackgroundColor: COLORS.transparent,
tabStyle:{ //Add this
borderTopRightRadius:20,//add border top right radius
borderTopLeftRadius:20,//add border top left radius
paddingVertical:3
},
style:{
position:'absolute',
bottom:0,
right:0,
left:0,
elevation:0,
height:60,
},
}}
>
The results are as per below just as I wanted
Thank you #Ankit Patel.
I have not tried your method but i'll definitely try it
I Added border radius to each tab item like this :
<Tab.Navigator
screenOptions={{
tabBarActiveBackgroundColor: 'red',
headerShown: false,
tabBarItemStyle: {
borderRadius: 200,
},
}}
tabBarOptions={{
tabStyle: {
borderTopRightRadius: 8,
borderTopLeftRadius: 8,
backgroundColor: colors.white,
},
}}
activeBackgroundColor: COLORS.reddish, First remove this and
<View style={{
alignItems:'center',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
backgroungColor:focused?COLORS.reddish: COLORS.white
justifyContent:'center',
}}>
in Tab.screen View Change this
Related
Problem: Grey Background when clicking/Long Press on items.
Requirement: How to change grey background to orange color when I press items?
<Drawer.Navigator
drawerContent={(props)=><CustomDrawer {...props}/>}
screenOptions={
{
drawerStyle:{
width:300,
borderBottomEndRadius:15,
},
drawerLabelStyle:{
fontSize:18,
marginLeft:-10,
},
drawerItemStyle:{
marginLeft:0,
marginRight:0,
paddingLeft:10
},
drawerActiveBackgroundColor:'orange',
drawerActiveTintColor:'black',
}
}
>
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: 'red',
activeBackgroundColor: 'grey',
inactiveTintColor: 'blue',
inactiveBackgroundColor: 'white',
labelStyle:{
fontSize: 15,
marginLeft:5
}
}}>
</Drawer.Navigator>
also follow the link
https://github.com/react-navigation/react-navigation/issues/9079
I suggest you to try this.
<Drawer.Navigator
screenOptions={{
drawerActiveBackgroundColor: ‘orange’
drawerActiveTintColor: ‘fff’
drawerInactiveTintColor: ‘#333’
}}
>
I have searched a lot about Navigation in React Native. I saw a lot of possibilities but I never found something like on Instagram. I did found a Bottom Tab bar Navigation, but there is always:
a) An animation
b) A Text
c) A color
d) .........
But I never found a bar like this. Do I have to use React Navigation for Nativgation or is it just helpful? What if I don't use it? :) And how could I do a menu bar like this (I think you all know how Instagram Navigation works):
Btw. I don't use expo :)
I use import { createMaterialTopTabNavigator } from '#react-navigation/material-top-tabs'; because I was having many problems with the #react-navigation/bottom-tabs.
To use on bottom you can do this:
const Tab = createMaterialTopTabNavigator();
...
<Tab.Navigator
initialRouteName="Home"
tabBarPosition="bottom"
lazy={true}
tabBarOptions={{
activeTintColor: colors.orange,
inactiveTintColor: 'gray',
showIcon: true,
indicatorStyle: { backgroundColor: 'transparent' },
labelStyle: {
fontFamily: 'GothamRounded-Bold',
fontSize: widthPercentageToDP('3%'),
bottom: 1.5,
alignSelf: 'flex-start'
},
activeTintColor: colors.orange,
inactiveTintColor: colors.greyLight,
style: {
elevation: 5,
shadowColor: '#000',
shadowOpacity: 0.2,
shadowOffset: {
height: 1,
width: 0
},
position: 'absolute',
width: widthPercentageToDP('100%'),
zIndex: 8,
borderTopColor: 'transparent',
bottom: keyboard,
justifyContent: 'center'
},
upperCaseLabel: false
}}>
...
And then you can customize as you want
To change icon I do this:
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarIcon: ({ focused }) => (
<FastImage
source={focused ? homeOrange : homeGrey}
style={{ flex: 1, width: null, height: null }}
resizeMode="contain"
/>
),
tabBarLabel: 'Home'
}}
/>
I have a issue with my costume tab bar and that is when I select other screens icons lose their position a little bit and shift to for example right. for better understanding consider these two images:
you can see this compass icon is not centered perfectly:
but when I tap on screen this become perfectly centered:
here's my styles on custom bottom tab bar :
const TabComponent = ({label, accessibilityState, onPress}) => {
const focused = accessibilityState.selected;
const icon = focused ? ICONS[`${label}Active`] : ICONS[label]
return (
<TouchableWithoutFeedback onPress={onPress}>
<View focused={focused} style={[styles.container, focused ? styles.focused : null]}>
<Image style={styles.icon} source={icon} />
</View>
</TouchableWithoutFeedback>
)
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginHorizontal: 20
},
focused: {
backgroundColor: '#3170FF',
borderRadius: 25,
width: 46,
height: 75,
position: 'relative',
bottom: 20
},
icon: {
width: 24,
height: 24,
}
})
and below is my styles on bottom tab itself:
<Tab.Navigator tabBarOptions={{
style: {
borderTopLeftRadius: 23,
borderTopRightRadius: 23,
height: 64,
alignItems: 'center',
}
}} >
<Tab.Screen name="Home" component={Home} options={{
tabBarButton: (props) => <TabComponent label='home' {...props} />,
}}/>
...
how can I fix this issue? any help would be great.
Hi can somebody plz help with header styling in expo and react native. I want my header to look like this:
right now I only get this:
<Stack.Navigator
screenOptions={{
headerShown: true,
headerTitle: (props) => (
<Image
resizeMode='center'
style={{width: 180, height: 60, resizeMode: 'contain'}}
source={require('../assets/images/audienz_ws_no_slogan.png')}
/>
),
headerTintColor: 'transparent',
headerTitleContainerStyle: {justifyContent: 'center', alignItems: 'center'},
headerStyle: {
backgroundColor: Colors.pink,
borderBottomLeftRadius: 300,
borderBottomRightRadius: 300,
height: 120
},
headerBackTitleStyle: {
color: 'transparent',
},
headerBackTitleVisible: false,
}}
>
I want to apply radius on bottom tab bar, but on background I have a white view. How can I remove this white view?
const BottomTabNavigator = createBottomTabNavigator({
HomeScreenStack,
// ArchiveScreenStack,
// SettingsScreenStack,
},
{
tabBarOptions: {
style:{borderRadius:21, backgroundColor:"#000000"}
}
}
)
Screen of bottom bar
You can remove the white space using style
const DEVICE_WIDTH = Dimensions.get('window').width;
const BottomTabNavigator = createBottomTabNavigator({
HomeScreenStack,
},
{
tabBarOptions: {
style:{
borderTopLeftRadius:21,
borderTopRightRadius:21,
backgroundColor:"#000000",
position:'absolute',
bottom: 0,
padding:10,
width: DEVICE_WIDTH,
height: 54,
zIndex: 8
}
}
}
)
Hope this helps
In the screenOptions of <BottomTabs.Navigator> there is a option of tabBarStyle, define it like this
tabBarStyle: {
backgroundColor: GlobalStyles.colors.accent500,
paddingTop: 7,
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
borderLeftWidth: 0.2,
borderRightWidth: 0.2,
position: 'absolute',
overflow: 'hidden',
},
Now you will have rounded corners in bottom tab and also there won't be any background white color
NOTE: screenOptions prop is present in React Navigation v6, for other versions there is prop but with different name, so explore the doc for other versions
Hope this will help you or somebody else...
Thanks!
Here is how I do it:
<Tab.Navigator
tabBarOptions={{
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
marginTop: -40,
}}
This will make the background be the screen. However you will also need to add a marginBottom:40 to each of your screens so that any components can be fully viewed.
Wrap <Tab.Navigator> with a view and style it with the backgroundColor you want ex.:
<View style={{flex: 1, backgroundColor: 'green'}}>
<AppTabs.Navigator
screenOptions={{
headerShown: false,
tabBarStyle: {
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
backgroundColor: 'black',
height: 68
}
}}>
<AppTabs.Screen name="Home" component={Home} />
</AppTabs.Navigator>
</View>
tabBarOptions={{
showLabel: false,
activeTintColor: 'white',
inactiveTintColor: 'gray',
style: {
backgroundColor: 'blue',
borderTopLeftRadius: 25,
borderTopRightRadius: 25,
position: "absolute",
bottom: 0,
},
}}