Question: I Want To Render A `<Flatlist />` After I Make A Request And Resolve It Then Render The `<Flatlist />`
Here Is The `<Flatlist />` that I Want To Render  `<FlatList data={DATA} renderItem={renderItem} keyExtractor={item => item.id} />`
Please Help

Answer: 
React rendering cannot be asynchronous.

If you need to depend on data acquired asynchronously then the render function should read the data from the *state*.

You need to be prepared for when the data doesn't exist yet (e.g. `if (state.data) { return <Flatlist data={state.data} /> } else { return <LoadingSpinner />` }`.

Trigger the asynchronous code inside `componentDidMount` or a `useEffect` function, and when the promise resolves: Set the state with the new data.
Try this way

```
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { data: [] };
    }

    componentDidMount() {
        fetch('http://api/..', {
            method: 'GET',
        }).then((response) => response.json())
            .then((responseJson) => { return this.setState({ data: responseJson }) })
            .catch((error) => { alert(error) }
            );
    }

    render() {
        const data = this.state.data;
        return (
            <View>
                {data.length != 0 ?
                    <FlatList
                        data={data}
                        keyExtractor={(x, i) => x + i}
                        renderItem={({ item }) => <Text>{item.name}-DATA</Text>}
                    />
                    : <View>
                        <Text>No data found</Text>
                     </View>
                }

            </View>
        );
    }
}

export default App;

```