React Native 'Unordered'-style List

Question

How would one go about creating a list in React Native that looked similar to an unordered list (<ul>) in HTML? Does it require a flex based layout with two Views (one to contain the 'bullet' & the other the list item text) or is their an easier, less cumbersome way?

Answer 1

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>   ); }