Использование Flatlist в React Native

Как мой плоский список может теперь отображать любой список, он просто отображается пустым внутри некоторых контейнер:

здесь данные json:

{
    "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"
        }
    ]
}

из regres.in, чтобы проверить фиктивные данные, и вот мой код:

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.info);

    //use async
    const response = await api.get('/api/users?page=2');  
   // console.info(response.data.data);
    this.setState({ apiAreLoaded: true, data: response.data });




   // console.info(this.state.data);  






}

render() {




    if (!this.state.apiAreLoaded)
    {
        return  <AppLoading />;

    }



    return(
        <Container>
            <Content>

                <FlatList
                    data = {this.state.data}
                    renderItem = {({ item }) => {
                        console.info(data.avatar)
                        return(
                                <ListItem>
                                    <Text>{item.id}</Text>
                                </ListItem>



                        )
                    }}
                />

            </Content>
            </Container>



    );

}


}



export {UserList};

Для информации я использую эту версию:

"expo": "^27.0.1", "native-base": "^2.6.1", "react": "^16.4.1", "react-native": "~0.55.2"

любое предложение ?