Align next to each other in <View/> react native
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>