Place icon on same line as text

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!