Align next to each other in <View / ">
How would I align two elements (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 they are aligned like this:
icon
text
I need them to be like this
icon text
+3
source to share
2 answers
You can use flexDirection on inline layout items. The default is the 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",
},
});
+3
source to share