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 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 want to style a line text in the same row as another text. Then I put 2 texts in the same view and make flexDirection: 'row'.
<View style={{ flexDirection: 'row', width: 300, justifyContent: 'center' }}>
<Text style={styles.headerDetail}>{t('Certificate by')}: </Text>
<Text style={styles.detail}>{selectedFileInfo.certificate}</Text>
</View>
But the problem is the second text is long and when it's overflow, it will rearrange at the new line like this.
I want it to be at the center of this view. Any way I can do this?
Or if I put textAlign: 'center' to the second text, it will be like this.
How can I do this?
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
I have an element that I want to float right, for example
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD"}}>Hello</Text>
</View>
How can the Text be floated / aligned to the right? Also, why does the Text take up the full space of the View, instead of just the space for "Hello"?
why does the Text take up the full space of the View, instead of just the space for "Hello"?
Because the View is a flex container and by default has flexDirection: 'column' and alignItems: 'stretch', which means that its children should be stretched out to fill its width.
(Note, per the docs, that all components in React Native are display: 'flex' by default and that display: 'inline' does not exist at all. In this way, the default behaviour of a Text within a View in React Native differs from the default behaviour of span within a div on the web; in the latter case, the span would not fill the width of the div because a span is an inline element by default. There is no such concept in React Native.)
How can the Text be floated / aligned to the right?
The float property doesn't exist in React Native, but there are loads of options available to you (with slightly different behaviours) that will let you right-align your text. Here are the ones I can think of:
1. Use textAlign: 'right' on the Text element
<View>
<Text style={{textAlign: 'right'}}>Hello, World!</Text>
</View>
(This approach doesn't change the fact that the Text fills the entire width of the View; it just right-aligns the text within the Text.)
2. Use alignSelf: 'flex-end' on the Text
<View>
<Text style={{alignSelf: 'flex-end'}}>Hello, World!</Text>
</View>
This shrinks the Text element to the size required to hold its content and puts it at the end of the cross direction (the horizontal direction, by default) of the View.
3. Use alignItems: 'flex-end' on the View
<View style={{alignItems: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
This is equivalent to setting alignSelf: 'flex-end' on all the View's children.
4. Use flexDirection: 'row' and justifyContent: 'flex-end' on the View
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<Text>Hello, World!</Text>
</View>
flexDirection: 'row' sets the main direction of layout to be horizontal instead of vertical; justifyContent is just like alignItems, but controls alignment in the main direction instead of the cross direction.
5. Use flexDirection: 'row' on the View and marginLeft: 'auto' on the Text
<View style={{flexDirection: 'row'}}>
<Text style={{marginLeft: 'auto'}}>Hello, World!</Text>
</View>
This approach is demonstrated, in the context of the web and real CSS, at https://stackoverflow.com/a/34063808/1709587.
6. Use position: 'absolute' and right: 0 on the Text:
<View>
<Text style={{position: 'absolute', right: 0}}>Hello, World!</Text>
</View>
Like in real CSS, this takes the Text "out of flow", meaning that its siblings will be able to overlap it and its vertical position will be at the top of the View by default (although you can explicitly set a distance from the top of the View using the top style property).
Naturally, which of these various approaches you want to use - and whether the choice between them even matters at all - will depend upon your precise circumstances.
You can directly specify the item's alignment, for example:
textright: {
alignSelf: 'flex-end',
},
For me setting alignItems to a parent did the trick, like:
var styles = StyleSheet.create({
container: {
alignItems: 'flex-end'
}
});
You are not supposed to use floats in React Native. React Native leverages the flexbox to handle all that stuff.
In your case, you will probably want the container to have an attribute
justifyContent: 'flex-end'
And about the text taking the whole space, again, you need to take a look at your container.
Here is a link to really great guide on flexbox: A Complete Guide to Flexbox
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end' }}>
<Text>
Some Text
</Text>
</View>
flexDirection: If you want to move horizontally (row) or vertically (column)
justifyContent: the direction you want to move.
Use flex: 1 and alignItems: 'flex-end' in View styling. Make sure to include flex: 1. That is the key to make the element float right
using flex
<View style={{ flexDirection: 'row',}}>
<Text style={{fontSize: 12, lineHeight: 30, color:'#9394B3' }}>left</Text>
<Text style={{ flex:1, fontSize: 16, lineHeight: 30, color:'#1D2359', textAlign:'right' }}>right</Text>
</View>
You can float:right in react native using flex:
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
for more detail: https://facebook.github.io/react-native/docs/flexbox.html#flex-direction
const styles = StyleSheet.create({
flowRight: {
flex:1,
justifyContent: 'end',
alignContent: 'end',
},
});
Then call styles.flowRight in your style
You can just style the text with alignSelf: 'flex-end':
<View style={{width: 300}}>
<Text style={{backgroundColor: "#DDD", alignSelf: 'flex-end'}}>Hello</Text>
</View>