Using Flatlist in react native - reactjs

Question

How can my flatlist now showing any list, it just show blank inside some
container:
here the json Data :
{
"page": 2,
"per_page": 3,
"total": 12,
"total_pages": 4,
"data": [
{
"id": 4,
"first_name": "Eve",
"last_name": "Holt",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
},
{
"id": 5,
"first_name": "Charles",
"last_name": "Morris",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
},
{
"id": 6,
"first_name": "Tracey",
"last_name": "Ramos",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
}
]
}
from regres.in to test the dummy data, and here my code :
class UserList extends React.Component {
state = {
apiAreLoaded: false,
};
constructor(props) {
super(props);
this.state.data = [];
}
async componentDidMount() {
// define the api
const api = create({
baseURL: 'https://reqres.in/',
headers: {
Accept: 'application/json'
}
})
// start making calls
//api.get('/api/users?page=2').then((response) => response.data).then(console.log);
//use async
const response = await api.get('/api/users?page=2');
// console.log(response.data.data);
this.setState({ apiAreLoaded: true, data: response.data });
// console.log(this.state.data);
}
render() {
if(!this.state.apiAreLoaded)
{
return <AppLoading />;
}
return(
<Container>
<Content>
<FlatList
data={this.state.data}
renderItem={({ item }) => {
console.log(data.avatar)
return(
<ListItem>
<Text>{item.id}</Text>
</ListItem>
)
}}
/>
</Content>
</Container>
);
}
}
export {UserList};
For information I am using this version :
"expo": "^27.0.1", "native-base": "^2.6.1",
"react": "^16.4.1",
"react-native": "~0.55.2"
any suggestion ?

Answer 1

It works now... and here how it works...
Make sure you format the api response as the doc say like this :
data={[{title: 'Title Text', key: 'item1'}, ...]}
note :
if you use https://reqres.in as dummy data make sure you get the response like this.
this.setState({ data: response.data.data });
Use Flatlist and keyExtractor here the code sample :
<FlatList
data={this.state.data}
keyExtractor={this._keyExtractor}
renderItem={({item}) =>
<Text>{item.first_name}</Text>
}
/>
See the _keyExtractor, the extractor key used to make virtualized key and here the code :
._keyExtractor = (item, index) => index.toString();