Place icon on same line as text - flexbox

Question

I'm trying to place my icon on the same line as 2 Replies.
Here's a screenshot of how it looks:
I'd like to have it to the right of the line, as the arrow shows.
Here's how my Component's render function looks:
render: function() {
return (
<TouchableHighlight onPress={this.props.onSelect}>
<View style={styles.container}>
<Image source={{uri: this.state.image}}
style={styles.image} />
<View style={styles.postDetailsContainer}>
<Text style={styles.postTitle}>
{this.state.name}
</Text>
<Text style={styles.postDetailsLine}>
{this.state.comment}
</Text>
<View>
<Text style={styles.postChildrenDetails}>
{this.props.comment.child_comments_count} Replies
</Text>
<Icon
name='fontawesome|comments-o'
size={25}
color='#D6573D'
style={styles.icon}
/>
</View>
<View style={styles.separator} />
</View>
</View>
</TouchableHighlight>
)
}
Here's how my StyleSheet looks:
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFD',
},
image: {
height: 48,
width: 48,
borderRadius: 25,
marginTop: 10,
alignSelf: 'center',
marginRight: 15,
marginLeft: 15
},
postDetailsContainer:{
flex: 1,
},
postTitle: {
fontSize: 15,
textAlign: 'left',
marginTop: 10,
marginBottom: 4,
marginRight: 10,
color: '#D6573D'
},
postDetailsLine: {
fontSize: 12,
marginRight: 10,
color: 'gray',
},
postChildrenDetails: {
fontSize: 12,
marginTop: 5,
marginBottom: 10,
marginRight: 10,
color: 'gray',
textAlign: 'right',
flex: 1
},
separator: {
height: 0.5,
backgroundColor: '#CCCCCC',
},
icon: {
flex: 1,
textAlign: 'right',
width: 25,
height: 25
}
})

Answer 1

I had the same challenge and for anyone having the same issue, here is how I went about solving it.
Wrap the Icon and the Text in a View like #Colin Ramsey said above in the comments
It will look like this:
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Icon name="ios-chat" size={20} />
<Text>
2 replies
</Text>
</View>
Shalom!

Answer 2

TRY THIS
<View
style={{
backgroundColor: "#ffc8cc",
borderRadius: 30,
margin: 5,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingRight : 25
}}
>
<Text style={styles.title}>Leagues</Text>
<MaterialIcons name="sports-baseball" size={26} color="#cd000f" />
</View>
css for title :
title: {
fontSize: 18,
margin: 20,
color: "#cd000f",
},

Answer 3

Center image and text same line in props reactjs
<div style={{ alignItems: "center", display: "flex", justifyContent: "center" }} >
<img src={this.props.location.state.image} style={{ height: "100px", width: "100px", border: "4px solid white", verticalAlign: 'middle' }} />
<span style={{ fontSize: '40px', fontWeight: 'bolder', textAlign: 'center', verticalAlign: 'middle' }}>
{this.props.location.state.subject}</span>
</div>