React Native: Flat List not rendering

Question

I am trying to load a Flat List with some items fetched from firebase. I have been able to validate that I am getting the data from firebase.

After data is fetched I update an state key "isLoading" to false, to show the flatList.

Just to test I have set data as a static set of values, but still it does not render.

Any ideas why?

export default class ListScreen extends Component {

    state = {
        posts: [],
        isLoading: true
    }

    componentDidMount() {

        fetch('https://test.firebaseio.com/posts.json', {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            return response.json();
        })
        .then(items => {

            this.setState({
                posts: items,
                isLoading: false
            })

        }).catch(err => {
            alert(JSON.stringify(err));
        });

    }

    render() {

        const activityIndicator = <ActivityIndicator />

        let list;
        if(this.state.isLoading) {
            list = activityIndicator
        } else {
            list = <FlatList style={{flex: 1}} data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => {
                return <Text>{item.key}</Text>
            }} keyExtractor={(item) => { return item.key; }} />
        }

        return (
            <View style={styles.container}>
                <Text>Posts</Text>
                <Button title="Add Post" onPress={() => {
                    this.onAddPost();
                }} />

                <View>{list}</View>

            </View>
        )

    }

    onAddPost = () => {
        this.props.navigation.navigate('create');
    }

}

Answer 1

Just remove style={{flex: 1}} from the FlatList