A center aspect designed for efficient representation of vertically scrolling lists of changing data. The simplest way is to create a List dataArray, populate it with an easy array of data chunks, and instantiate a ListItem component with that chunk of data and a renderRow callback which takes a chunk from the whole data array and returns a renderable component.
| iOS | Android |
}}) |
}}) |
|---|
Syntax
import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base/ui';
export default class DynamicListExample extends Component {
render() {
var items = ['Simon Mignolet','Nathaniel Clyne','Dejan Lovren','Mama Sakho','Emre Can'];
return (
<Container>
<Content>
<List dataArray={items}
renderRow={(item) =>
<ListItem>
<Text>{item}</Text>
</ListItem>
}>
</List>
</Content>
</Container>
);
}
}
For more advanced implementation of rendering list dynamically, take a look at nativebase-tutorial.