FlatList (or ListView) inside Modal white until touch

[jarnove]

Hi,

My modal contains a FlatList with a couple of cells but when I open the modal, my list is totally white until I touches (scroll) the view a little bit.

It's the same problem with a ListView.

Anybody an idea?

[iqlpi]

@jarnoverreyt I have the same problem，Did you fix it ?

[iqlpi]

ScrollView keyboardShouldPersistTaps="always"

[Allaude]

In my case, I have a flatlist inside a modal. But, when I run the emulator the flatlist don't load any data from my database.

import React, { Component } from 'react';
import { 
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    CheckBox, TouchableOpacity,
    ActivityIndicator, Dimensions, FlatList,
    Modal } from 'react-native';

export default class List extends Component {
    constructor()
    {
        super()
        this.state = {
            dataSource: [],
            showMe: false
        }
    }

    renderItem = ({ item }) => {
        return (
            <View style = {{flex: 1, flexDirection: 'row'}}>
                <View style = {{flex: 1, justifyContent: 'center'}}>
                    <Text>
                        {item.menu_desc}
                    </Text>
                    <Text>
                        {item.menu_price}
                    </Text>
                </View>
            </View>
        )
    }

    componentDidMount() {
        const url = 'http://192.168.254.***:****/foods/Pasta_Cmb_Meal'

        fetch(url)
        .then((response) => response.json())
        .then((responseJson) => {
            console.log(responseJson); 
            this.setState({
                dataSource: responseJson.data
            })
        })
        .catch((error) => {
            console.log(error)
        })
    }

    render() {
        console.log(this.state.dataSource)
        return (
            <View style = {styles.container}>
                <TouchableOpacity onPress = {() => {
                    this.setState({
                        showMe: true
                        })
                    }}>
                    <Text style = { styles.closeText }>Open Modal</Text>
                </TouchableOpacity>

                <Modal visible={this.state.showMe}
                 onRequestClose = {() => console.warn("This is a close request.")}>
                    <View style = { styles.modalView }>
                    <FlatList style = { styles.Flat }
                        data = { this.state.dataSource }
                        renderItem = {this.renderItem}
                        keyExtractor={item => item.id}
                        />

                        <TouchableOpacity onPress = {() => {
                            this.setState({
                                showMe: false
                            })
                        }}>
                            <Text style = { styles.closeText }>Close Modal</Text>
                        </TouchableOpacity>
                    </View>
                </Modal>
            </View>
        );
    }
}

/*
*/

const styles = StyleSheet.create({
    modalView: {
        backgroundColor: "#aaa",
        height: 180,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
        borderWidth: 1
    },
    closeText: {
        backgroundColor: "#333",
        color: '#bbb',
        padding: 5,
        margin: 160
    },
    Flat: {
        backgroundColor: "#aaa"
    }
})

[ritesh-somani1999]

@jarnove Did you find any fix for this issue?