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.
Related
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
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.
const styles = StyleSheet.create({
container: {
fontSize: 15,
alignItems: 'center',
justifyContent: 'center',
},
insideText: {
width: 30,
height: 30,
alignSelf: 'center',
},
})
<Text style={styles.container}>
<Image style={styles.insideText} source={myImage} />
test
</Text>
When I implement this functionality with Swift
Fixed by setting NSAttachment bounds.
But React Native does not know how to access those parameters.
The output of my code.
How do I center text and images?
can not divide a view into several.
Because the content is flexible, it is not known how many it will be.
Smaller image sizes will center them
The image is too small.
I want to keep the image size.
It's probably not the nicest way but you could do this:
const styles = StyleSheet.create({
container: {
fontSize: 15,
height: 30,
paddingTop: (30 - 15) / 2,
paddingLeft: 30
},
insideText: {
width: 30,
height: 30,
position: 'absolute',
left: 0,
top: 0,
},
})
Not exactly sure what you mean by the requirement of flexible content, but nesting an Image within a text does not seem like the way to go.
You'll have less styling flexibility, and are very limited.
To affect what you want without setting absolute positioning, just wrap it and have the icon and text as siblings of a parent View:
<View
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<Image style={styles.insideText} source={snackIcon} />
<Text style={styles.container}>test</Text>
</View>
Fortunately your styles for insideText and container are fine for this example :)
Here's a snack of the code:
https://snack.expo.io/#paullyfire/centered-image-text-container
Let me know if you have any issues.
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?