I tried several configurations, but I am unable to vertically center emoji inside a view.
This is the code I am using:
<View style={{width: 200, height: 200, backgroundColor: "red", justifyContent: "center", alignContent: "center"}}>
<Text style = {{fontSize: 100, textAlign: "center", backgroundColor: "black"}}>
🥺
</Text>
</View>
Output: (See gap above and below emoji)
Also, I tried solutions from this question. None seems to work out. Is this expected behavior or bug in react native. Thanks
Related
I have an application that works on native and web via React Native and React Native Web. One screen includes a list with custom bullets as in the image below, although the text often runs to multiple lines. The problem is that when you copy/paste (at least on web), the bullet image winds up on a separate line from the text, and it looks awful. Is there some way to refactor the view so that copy/paste keeps the original appearance?
<View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start', width: '100%' }}>
<Image style={{ height: 10, width: 14, marginTop: 9 }} source={TRIANGLE_BULLET as ImageSourcePropType} resizeMode="contain" />
<View style={{ width: '90%', marginTop: 3, marginBottom: 3, marginLeft: 7 }}>
<Text>Final scoring</Text>
</View>
</View>
Setting padding-left: 14px and text-indent: -14px did the trick. From past experience with React Native, I thought a negative text-indent would cause problems, but it actually works fine.
I have added a Lottie loading animation in my react native app, the animation is working so far but somehow colors are not showing but a white animation only.
Here is the code.
<View style={styles.lottieLoadingWrapper}>
<LottieView
style={styles.lottieLoading}
source={require('../assets/loading-2.json')}
autoPlay
loop
/>
</View>
I have not done anything in the stylesheet. I have tried multiple animations but all are simple white.
What could be the mistake I am doing here?
Update: Following is the styles code
lottieLoadingWrapper: {
width: 50,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'yellow',
alignSelf: 'center',
},
lottieLoading:{
width: 50,
height: 50,
backgroundColor: 'rgba(120, 120, 120, 0.66)',
justifyContent: 'center',
alignItems: 'center',
}
Following is the animation I am using
Lottie Animation Link
<View style={styles.lottieLoadingWrapper}>
<LottieView
style={styles.lottieLoading}
source={require('../assets/loading-2.json')}
autoPlay
loop
/>
</View>
Please Change the Color in JSON file, Find "sc":"#ffffff" and
Replace with your color
Current Behavior
I'm creating my tabs like this (note: Home is a StackNavigator screen):
ProfileTab is rendered this way (items is an array of inputs):
return <ScrollView contentContainerStyle={{flex: 1, backgroundColor: Colors.primaryShade3,
paddingTop: Sizes.paddingTop}}>
<View style={{flexDirection: "row", alignItems: "center", marginBottom: 50}}>
<Image source={{uri: RNStorage.userProfile.user.photo}}
style={{marginRight: 20, resizeMode: "contain", width: 70, height: 70, borderRadius: 50}}/>
<Text style={{color: Colors.white, fontSize: Sizes.h2}}>
Bem vindo, {RNStorage.userProfile.user.givenName}
</Text>
</View>
{items}
</ScrollView>
All inputs follow this structure:
Currently having this behavior (Not scrolling):
Expected Behavior
Scroll should work normally. I also tested using the ScrollView of the react-native-gesture-handler but it didn't work either.
This is unrelated to material-bottom-tabs.
You need to remove flex: 1 from contentContainerStyle. Otherwise your view will fill available scrollable area and won't be scrollable.
Don't misunderstand me. NativeBase is fantastic, but it's feels horrible to change the easiest things... Like when I just want an Icon to wrapped inside a View, then for some reason my Icon will receive a top and bottom margin, and I can't override it :/.
Or when I just tried to put 2 buttons inside a footer. When I wanted to give padding to the Footer component the buttons got pushed down. Native Base is fantastic, but if you want something what not out of the box then the simplest thing can get overwhelming...
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<View style={{ borderColor: 'black', borderWidth: 1, alignContent: 'center' }}>
<Icon style={{ fontSize: 50, height: 'auto'}} name='camera'/>
</View>
</View>
Am I the one who can't use NativeBase properly, or it is really that hard to make little things work?
I just started using react-native so sorry if it's a trivial question.
I'm trying to create a sidebar with multiple links in it. The sidebar works fine but the issue is with the links themselves. Below is the jsx for the link.
<TouchableOpacity style={MenuItemStyles.ItemWrapper} onPress={this.props.onPress}>
<View style={MenuItemStyles.itemIcon}>
<Icon
name={this.props.iconName}
size={this.props.size || 30}
color={Colours.LightGrey}
/>
</View>
<Text style={MenuItemStyles.itemLabel}>
{this.props.label}
</Text>
</TouchableOpacity>
And the style:
const MenuItemStyles = StyleSheet.create({
ItemWrapper: {
flexDirection: 'row',
alignSelf: 'stretch',
marginTop: 10,
width: 100,
marginBottom: 10
},
itemIcon: {
alignItems: 'center',
alignSelf: 'center',
width: 80,
},
itemLabel: {
color: '#000000',
fontSize: 20,
fontFamily: 'sans-serif-light',
textAlign: 'center',
marginLeft: 5,
}
});
The link contains an icon(Material style), follows by the label. The onPress event is registered correctly. However the click area size is very small ie onPress only triggers when pressing on the icon, not the label. I would assume TouchableOpacity covers all nested component?Can I control how wide TouchableOpacity cover?
Thanks
Wrap your <TouchableOpacity/>component in view that has the style you are curenttly assigning on TouchableOpacity like this <View style={MenuItemStyles.ItemWrapper}>
and by adding flex:1 on the <TouchableOpacity/> component it will inherit the size of the <View>
heres a working example of what I think you are trying to accomplish with the solution above implemented:
https://rnplay.org/apps/SW983Q