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.
Related
My goal is to render an image with a shadow, I usually generate my shadows using this website: https://ethercreative.github.io/react-native-shadow-generator/
I tried this and it works fine in iOS but I cannot see any shadow in android, this website automatically generates with the elevation property so I don't know what the issue is, here is my code:
Main js file
<View style={styles.coverImageContainer}>
<Image
source={{
uri: coverUrl,
}}
style={styles.coverImage}
/>
</View>
Styles
coverImageContainer: {
shadowColor: '#000',
backgroundColor: 'transparent',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.32,
shadowRadius: 5.46,
elevation: 9,
},
coverImage: {
height: 243,
width: 150,
marginTop: '5%',
alignSelf: 'center',
resizeMode: 'cover',
borderRadius: 4,
},
Any help would be appreciated,
Thanks
I am using react-native-gifted-chat in my react-native application. Chat Bubble style is not same on all bubble. I have used borderRadius: 30, For first message bubble shape is properly shown, from second message bubble shape of bubble is getting differed. I have added the following code:
<Bubble
{...props}
wrapperStyle={{
right: {
backgroundColor: colors.chatPurple,
borderRadius: 30,
borderBottomRightRadius: 30,
marginBottom: 10,
padding: 5,
right: 15,
justifyContent: "flex-end",
alignSelf: 'stretch',
marginLeft: 0,
alignSelf: "center"
},
left: {
backgroundColor: colors.lightGreen,
borderRadius: 30,
marginBottom: 20,
padding: 5,
left: -30
}
}}/>
I would like to get the Bubble shape as same on all Bubbles.
Setting the borderRadius for each corner separately (e.g. borderBottomRightRadius) works for me.
Simply setting borderRadius won't work because the borderBottomRightRadius, borderTopRightRadius etc. in the react-native-gifted-chat code overrides it, since the more exact style (separate for each corner) always overrides the more general style (same for every corner).
I faced a similar issue where I wanted a radius on 3 out of 4 corners, but it only worked for the first bubble:
After setting the BorderRadius properties on the containerToPreviousStyle, containerToNextStyle and containerStyle props, I got it to work as expected:
The code is as follows:
const renderBubble = props => {
return (
<Bubble
{...props}
{/* copy what you have in wrapperStyle */}
wrapperStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
{/* and paste it into the follow 3 */}
containerToPreviousStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
containerToNextStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
containerStyle={{
right: { borderTopRightRadius: 15 },
left: { borderTopLeftRadius: 15 },
}}
/>
);
};
add this bubble with a BordeRadius
or just add container style
<Bubble
{...props}
wrapperStyle={{
right:
{
height: 200,
backgroundColor: 'blue',
},
}}
/>
Use this code
<Bubble
{...props}
wrapperStyle={{
right: {
backgroundColor: '#EFE5D9',
borderBottomRightRadius: 0,
borderBottomLeftRadius: 15,
borderTopRightRadius: 15,
borderTopLeftRadius: 15,
},
left: {
backgroundColor: '#F9F5F0',
borderBottomRightRadius: 15,
borderBottomLeftRadius: 15,
borderTopRightRadius: 15,
borderTopLeftRadius: 0,
}
}}
/>
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,
},
}}
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' }}
/>
I'm trying to create a little floating "vote up/down" widget in the bottom of my app screen. I'm using React Native with Nativebase and Entypo Icons.
The problem is the icons just dont seem to be vertically aligned very well, at least not through the center as I'd expect/hope. See below:
(dotted lines added to show the issue, I'd expect those to align with their counterparts)
When hovering the icon itself in the element inspector it appears to be equally padded (or lack there of) on every side, so I'm not sure that it's a code issue:
Here is the code:
<View style={{flexDirection:'row', borderWidth: 0.5, borderColor: '#d8d8d8', borderRadius: 50, backgroundColor: 'rgba(255, 255, 255, .7)', shadowColor: "#000", shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 1.5, elevation: 3,alignItems:'center', marginBottom: 10, position: 'absolute', left: '50%', marginLeft: -87, width: 174, paddingLeft: 5, paddingRight: 5, bottom: 0,justifyContent:'space-between'}}>
<Icon name='triangle-down' onPress={ this.swipeLeft} active color="white" style={{fontSize: 60, marginTop:0, paddingTop:0, paddingBottom: 0, marginBottom: 0, alignSelf: 'center', height: 60,color: '#FF003C',backgroundColor:'transparent'}} />
<Icon name='cw' style={{fontSize: 26, lineHeight: 26, height: 26, borderRadius: 50, color: '#d8d8d8',backgroundColor:'transparent'}} />
<Icon name='triangle-up' onPress={ this.swipeRight} active color="white" style={{fontSize: 60, marginTop:0, paddingTop:0, paddingBottom: 0, marginBottom: 0, alignSelf: 'center',color: '#00C176', height: 60, backgroundColor:'transparent'}} />
</View>
(complete with way too many inline styles but this is pre-cleanup so try to bear with me)
Is there any way I can get the icons to align better? Also, is there any way to shrink the padded space around the icon (highlighted blue) without shrinking the actual icon?