How would I align two items (icon/text) next to each other?
<TouchableOpacity
key = {index}
onPress = {() => this._onPress(key)}
style = {containerStyle.container}>
<View>
<Icon
name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"}
size = {24}
style = {{ paddingLeft: 10, color: "#108EE9"}} />
<Text
style = {this._createStyleText(key)}>
{key}
</Text>
</View>
</TouchableOpacity>
const containerStyle = StyleSheet.create({
container: {
padding: 8,
backgroundColor: "#ffffff",
},
});
const textStyle = StyleSheet.create({
unselectedText: {
paddingLeft: 45,
color: "#000000",
fontWeight: "normal",
},
});
Right now the are aligned like this:
icon
text
I need them to be like this
icon text
Use textAlign: 'right' on the Text element (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 .)
How to align icon and text in same line in react native? flexDirection: 'row' use for show content in a row. justifyContent: 'center' use for aligning vertically. alignItems: 'center' use for aligning horizontally.
You can use flexDirection to layout items in row. The default is column
<TouchableOpacity
key = {index}
onPress = {() => this._onPress(key)}
style = {containerStyle.container}>
<View style={containerStyle.rowContainer}>
<Icon
name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"}
size = {24}
style = {{ paddingLeft: 10, color: "#108EE9"}} />
<Text
style = {this._createStyleText(key)}>
{key}
</Text>
</View>
</TouchableOpacity>
const containerStyle = StyleSheet.create({
container: {
padding: 8,
backgroundColor: "#ffffff",
},
rowContainer: {
flexDirection: 'row'
}
});
const textStyle = StyleSheet.create({
unselectedText: {
paddingLeft: 45,
color: "#000000",
fontWeight: "normal",
},
});
<View style={{flexDirection:'row'}}>
<Icon
name = {Platform.OS === "ios" ? "ios-checkmark-outline" : "md-checkmark"}
size = {24}
style = {{ paddingLeft: 10}} />
<Text
style = {this._createStyleText(key)}>
{key}
</Text>
</View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With