Unable to align text to the right of the row - css

Question

I'm looking to set the position of the date on the right of my row.
Here is the code:
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 64,
},
row: {
flexDirection: 'row',
alignItems: 'center',
margin: 5,
backgroundColor: 'green',
},
horizontalAlign: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'red',
},
rowTitle: {
fontFamily: 'Helvetica',
fontSize: 17,
marginLeft: 10,
flex: 1,
textAlign:'center'
},
rowDate: {
textAlign: 'right',
},
rowText: {
fontFamily: 'Helvetica',
fontSize: 17,
marginLeft: 10,
},
rowImage: {
width: 35,
height: 35,
borderRadius: 17.5,
},
});
renderRow(rowData, sectionID, rowID, _highlightRow) {
return (
<TouchableHighlight onPress={ () => { this.rowPressed(rowData.recordID || null); }}>
<View style={styles.row}>
<Image source={ require('myImage.png') } style={styles.rowImage} />
<View>
<View style={styles.horizontalAlign}>
<Text style={styles.rowTitle}>{rowData.title}</Text>
<Text style={styles.rowDate}>{rowData.date}</Text>
</View>
<Text style={styles.rowText}>{rowData.text}</Text>
</View>
</View>
</TouchableHighlight>
);
}
render() {
return (
<View style={styles.container}>
<ListView
dataSource={this.state.dataSource}
renderRow={::this.renderRow}
/>
</View>
);
}
A screenshot:
Any suggestion?

Answer 1

You need to add a flex:1 property to the view containing the rowData.title and rowData.date. I've set up an example with your data here.
<View style={{flex:1}}>
<View style={styles.horizontalAlign}>
<Text style={styles.rowTitle}>{rowData.title}</Text>
<Text style={styles.rowDate}>{rowData.date}</Text>
</View>
<Text style={styles.rowText}>{rowData.text}</Text>
</View>
https://rnplay.org/apps/mWO0LQ

Answer 2

I'm not familiar with React, but in standard CSS, apply margin-left: auto to the date item.
You could also apply justify-content: space-between to the flex container which would align both flex items on opposite edges.
(These solutions assume that the line on which the flex items exist is free to extend the full width of the container.)