React Native ‘Unordered’-style List

by

Potentially, the easiest way would be just to use a unicode character for the bullet. That way you don’t have wrap a bunch of components together.

For example, the following component that uses a ListView (see the renderRow function for the bullet):

class TestProject extends React.Component {

  constructor() {
    super();
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }).cloneWithRows(['string1', 'string2', 'string3']),
    };
  }

  renderRow(data) {
    return (
      <Text>{`\u2022 ${data}`}</Text>
    );
  }

  render() {
    return (
      <ListView
        style={{margin: 40}}
        dataSource={this.state.dataSource}
        renderRow={this.renderRow}
      />
    );
  }
}

If you need to keep the text from wrapping around the bullet, you will actually need to use multiple components, as suggested in the question. For example:

renderRow(data) {
  return (
    <View style={{flexDirection: 'row'}}>
      <Text>{'\u2022'}</Text>
      <Text style={{flex: 1, paddingLeft: 5}}>{data}</Text>
    </View>
  );
}

Leave a Comment