React Native - ListView

In this chapter, we will show you how to create a list in React Native. We will import List in our Home component and show it on screen.

import React, { Component } from 'react'

import { Text, View, ListView, StyleSheet } from 'react-native'

class List extends Component {

constructor (props) {

super (props);

const ds = new ListView.DataSource({

rowHasChanged: (r1, r2) => r1 !== r2 });

this.state = {

dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 2', 'row 2', 'row 2', 'row 2'])

};

}

render() {

return (

<ListView

dataSource = { this.state.dataSource }

renderRow = { (rowData) => <Text>

{ rowData } </Text> }

/>

)

}

}

export default List

const styles = StyleSheet.create ({

container: {

padding: 10,

marginTop: 3,

backgroundColor: '#d9f9b1',

alignItems: 'center',

},

text: {

color: '#4f603c'

}

})