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' }}
/>
Related
I have following component:
<TouchableOpacity style={styles.event} onPress={onPress}>
<View style={styles.dateContainer}>
<Text style={styles.eventDate}>Sent at : {event.sentAt}</Text>
</View>
<View style={styles.eventTextContainer}>
<Text style={styles.eventText}>{event.text}</Text>
</View>
</TouchableOpacity>
then in my styles:
event: {
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
...Platform.select({
android: {
elevation: 5,
},
}),
eventTextContainer: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
eventText: {
fontSize: 20,
fontWeight: '700',
}
The shadow is being applied to the text, which I dont want, only want it applied to the touchable opacity, what am I doing wrong?
This is similar to another stackoverflow question, the key to avoid this problem is applying a background color to the container with the shadow styles, in your case is the event style.
event: {
shadowColor: "#000",
shadowOffset: {
width: 5,
height: 5,
},
shadowOpacity: 0.75,
shadowRadius: 3.84,
...Platform.select({
android: {
elevation: 5,
},
backgroundColor: "#FFF",
}),
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 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,
},
}}
Using react-navigations - createBottomTabNavigator, im trying to push the icons down a bit but its getting cut off and im not sure as to why.
Is there a way to fix this by any chance? or if you could direct me to some info about this.
The icon style is below:
<Icon
name="heart"
color={tintColor}
size={28}
style={{ marginTop: '20' }}
/>
And heres the tab bar options:
tabBarOptions: {
showLabel: false,
activeTintColor: '#e91e63',
indicatorStyle: {
height: 100
},
style: {
position: 'absolute',
backgroundColor: 'transparent',
height: 50,
width: DEVICE_WIDTH * 0.94,
borderTopColor: 'transparent',
borderBottomLeftRadius: 33,
borderBottomRightRadius: 33,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
bottom: 0,
margin: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 0.3
},
shadowRadius: 5,
shadowOpacity: 0.1
},
tabStyle: {}
}
Many thanks in advance
Thanks for Samitha, had to set the icon height:
<Icon
name="heart"
color={tintColor}
size={28}
style={{ marginTop: 30 , height: 28 }}
/>
The bottom of the iPhone X is reserved for the home swipe bar
react-navigation like allot of other libraries implement the new SafeAreaView or add their own padding to the bottom of the iPhone X to stop you from putting content in that zone.
It's unlikely your buttons will work properly if placed that low so there's not much you can do here.
How to add custom shape buttons , for example a pentagon shaped button on react native application. Any help or input would be appreciated.
Here is one way to achieve it (View Snack):
export class PentagonButton extends Component {
render() {
return (
<TouchableOpacity onPress={() => { }}>
<View style={styles.pentagon}>
<View style={styles.pentagonInner} />
<View style={styles.pentagonBefore} />
</View>
</TouchableOpacity>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
pentagon: {
backgroundColor: 'transparent'
},
pentagonInner: {
width: 90,
borderBottomColor: 'red',
borderBottomWidth: 0,
borderLeftColor: 'transparent',
borderLeftWidth: 18,
borderRightColor: 'transparent',
borderRightWidth: 18,
borderTopColor: 'red',
borderTopWidth: 50
},
pentagonBefore: {
position: 'absolute',
height: 0,
width: 0,
top: -35,
left: 0,
borderStyle: 'solid',
borderBottomColor: 'red',
borderBottomWidth: 35,
borderLeftColor: 'transparent',
borderLeftWidth: 45,
borderRightColor: 'transparent',
borderRightWidth: 45,
borderTopWidth: 0,
borderTopColor: 'transparent',
}
});
This example is using views in different shapes to build your button. Credit to #browniefed who has made a lot of different shapes here.
Another way to solve it is using React ART wich is a great way of creating shapes in React Native. Here are the unofficial docs.