Reputation: 12384
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
Upvotes: 18
Views: 29691
Reputation: 8678
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",
},
});
Upvotes: 26
Reputation: 2927
<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>
Upvotes: 4