CODEWITHSUNDEEP
cssflexboxreact-native
Jean Lebrument
Jean Lebrument

Reputation: 5169

Unable to align text to the right of the row

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:

enter image description here

Any suggestion?

Upvotes: 1

Views: 88

Answers (2)

Nader Dabit
Nader Dabit

Reputation: 53681

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

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371113

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.)

Upvotes: 1

Related Questions