I am new to react native and I am using react-navigation & react-navigation-material-bottom-tabs.
All I want to do is curve the top-right corner and top-left corner of bottom tab bar.
My Code:
const screen1 = createMaterialBottomTabNavigator(
{
Home: {
screen: HomeScreen,
style : {
backgroundColor: 'black'
}
},
About: AboutScreen,
Scan: ScanScreen,
Fav: AllScreen
},
{
initialRouteName: "Home",
activeColor: 'red',
inactiveColor: 'blue',
barStyle: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor: 'white',
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
borderTopColor: '#000',
borderBottomColor: '#000',
borderLeftColor: '#000',
borderRightColor: '#000',
},
}
);
Sorry, I'm not react-native pro but after debugging for some time i came up with solution by adding overflow: 'hidden' to barStyle. The problem lies in child div as it inherits background color which overlaps with your rounded border.
barStyle: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor:'orange',
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
borderColor: 'transparent',
overflow: 'hidden',
},
see working snack.expo
Related
I'm using "#react-navigation/material-top-tabs": "^5.1.7" in my React Native app, and have the following top tab navigator:
The individual tabs are equal width, but each word is a different length, which means that there's unequal space between each word. I want to make it so that there is equal spacing around each word. Here is my code that I'm using for the navigator. The style property in tabBarOptions is the parent container with the red border, and the tabStyle property is the child containers with the yellow borders:
const CallsRequestsNavigatorOuter = () => createMaterialTopTabNavigator(
{
'Waiting': {screen: Waiting},
'Active': {screen: Active},
'Cleared': {screen: Cleared},
'All': {screen: All},
},
{
initialRouteName: "All",
tabBarOptions: {
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
width: Math.round(Dimensions.get('window').width) - 100,
left: 50,
right: 0,
shadowOpacity: 0,
elevation: 0,
borderWidth: 1,
borderColor: 'red'
},
upperCaseLabel: false,
tabStyle: {
padding: 0,
justifyContent: 'center',
height: 0.45*topSwooshAspectRatio*Math.round(Dimensions.get('window').width),
borderWidth: 1,
borderColor: 'yellow',
},
labelStyle: {
fontSize: normalizeFontSize(13)
},
indicatorStyle: {
backgroundColor: 'transparent',
},
activeTintColor: Color.lightBlueOpaque,
inactiveTintColor: 'white'
}
}
)
SOLVED: add contentContainerStyle: {alignItems: 'center', justifyContent: 'space-around'} to tabBarOptions, and add width: 'auto' to tabStyle. The key is that contentContainerStyle rather than style is the direct parent of tabStyle. So now I have this:
I am trying to create a view with LeftArrowTriangle, View and RightArrowTriangle, but whenever I am trying add content inside View, I am getting 1px borderWidth either on left or right side of view.
Here is my styleSheet for body content and left/right triangle
bodyContent: ({ primaryColor }, theme) => ({ padding: 4, backgroundColor: primaryColor, alignItems: 'center', overflow: 'hidden' }),
triangleRight: ({ color }, theme) => ({
height: ARROW_TRANGLE_HEIGHT,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: ARROW_TRAINGLE_WIDTH,
borderBottomWidth: 13,
borderTopWidth: 13,
borderLeftColor: color,
borderTopColor: 'transparent',
borderBottomColor: 'transparent'
}),
triangleLeft: ({ color }, theme) => ({
height: ARROW_TRANGLE_HEIGHT,
position: 'relative',
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: ARROW_TRAINGLE_WIDTH,
borderBottomWidth: 13,
borderTopWidth: 13,
borderRightColor: color,
borderTopColor: 'transparent',
borderBottomColor: 'transparent'
})
I am trying to add border radius to bottom bar but with this
i want to change container color from default to purple.
how can i do that ?
What i have done so far
What i want
Code:
tabBarOptions: {
activeTintColor: colors.primary,
inactiveTintColor: colors.black,
showLabel: false,
style: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor: 'white',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
borderColor: colors.lightGrayText,
},
},
Anyone can help ?
thanks
You have to add a position absolute which will make the tabbar stay inside the border
tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'black',
showLabel: false,
style: {
borderWidth: 0.5,
borderBottomWidth: 1,
backgroundColor: 'red',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
borderColor: 'grey',
position: 'absolute'
},
}}>
Reference
https://github.com/react-navigation/react-navigation/issues/5928
If you have nested bottom tab into stack you should change color in stack screen , like code bellow
<Stack.Screen
options={{
headerShown: false,
cardStyle: {
backgroundColor: "white",
},
}}
name={mainStack.homeTab}
component={HomeTabs}
/>
I wanna to fit the indicator of navigation bar, to the tab. but it only fits for the 1st tab. for all other tabs, the indicator is slipped a bit for right side.
I have used margins for both left and right in the style section of navigation. Below images show the scenario.
Here is the code of the navigation component
const Navigation = createMaterialTopTabNavigator(
{
S: Screen1,
S2: Screen2,
S3: Screen3,
},
{
swipeEnabled: false,
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "blue",
upperCaseLabel: false,
scrollEnabled: false,
inactiveBackgroundColor: "white",
indicatorStyle: {
height: null,
top: 0,
backgroundColor: 'red',
width:110,
},
style: {
marginLeft: 15,
marginRight:15,
borderWidth: 1,
height: 30,
borderColor: "blue",
backgroundColor: "white",
},
tabStyle: {
borderWidth:1,
borderColor:"blue",
justifyContent: "center"
},
labelStyle: {
marginTop: -4
}
}
}
);
export default createAppContainer(Navigation);
How can i fix this ?
The problem is that your marginLeft and marginRight propagates through your whole tabBar.
You can fix this by introducing the following:
import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const tabBarWidth = width - 30; // Subtract margins from your screen width. In your case 2*15= 30
and updating your tabBarOptions:
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "blue",
upperCaseLabel: false,
scrollEnabled: false,
inactiveBackgroundColor: "white",
indicatorStyle: {
height: null,
top: 0,
backgroundColor: 'red',
//width:110, remove width here
},
style: {
marginTop: 60, // quick hack for iphone X
marginLeft: 15,
marginRight:15,
borderWidth: 1,
height: 30,
borderColor: "blue",
backgroundColor: "white",
},
tabStyle: {
borderWidth:1,
borderColor:"blue",
justifyContent: "center",
width: tabBarWidth/4, // divided by amount of screens you have
},
labelStyle: {
marginTop: -4
}
}
As you can see the result works also with for example 4 Tabs:
Im just having an issues with creating a custom navigation tab bar and centering the icons vertically. It looks like it been pushed up a bit as per below screenshot:
This is the style i have for the tab navigation:
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},
style: {
position: 'absolute',
backgroundColor: 'white',
width: DEVICE_WIDTH * 0.94,
borderBottomLeftRadius: 33,
borderBottomRightRadius: 33,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
bottom: 12,
marginLeft: '2.8%',
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0.3
},
shadowRadius: 5,
shadowOpacity: 0.1
}
Many thanks!
Was able to fix this by specifying a style for the icon:
<Icon
name="user"
color={tintColor}
size={28}
style={{ textAlignVertical: 'center' }}
/>