How to implement a Listview inside Modal in reactnative

Question

Amateur ReactNative developer: I am trying to implement a hardcoded data listview inside Modal of react native but unable to find any proper solution. And I don't want to use third party plugins. Please help!
Here is my code.

export default class ActionSheetMenu extends React.PureComponent {   
constructor(props){
    super(props); 

    const ds = new ListView.DataSource({
        rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
        dataSource: ds.cloneWithRows(['row 1', 'row 2']),
    };
}

state = {
    visibleModal : false,
};
// data = [
// {
//     "name": {
//         "first": "aiden",
//         "last": "lucas"
//     },
// } ];

_renderButton = (text, onPress) => (
    <TouchableOpacity onPress={onPress}>
        <View>
            <Text>{text}</Text>
        </View>
    </TouchableOpacity>
);

_renderModalContent = () => (
    <View> style = {styles.modalContent}>
        <Text>Hello</Text>
        {this._renderButton('Close', () => this.setState({ visibleModal: false }) )}
    </View>
);

render(){
    return(
        <View style={[styles.container,{backgroundColor: this.state.visibleModal ? 'rgba(0, 0, 0, 0.4)': 'white'}]}>
            <Text>Text Behind Modal</Text>
            {this._renderButton('BUTTON', () => this.setState({ visibleModal: true }))}


            <Modal animationType="slide"
                   transparent
                   visible={this.state.visibleModal}>

                <View style={styles.modalContent}>

                    <ListView 
                        style={styles.listview}
                        dataSource = {this.state.dataSource}
                        renderRow={ (data) => <Text>{data}</Text> }
                    />
                    <Text style={styles.textModal}>text inside modal</Text>

                </View>
            </Modal>

        </View>
    );
}

}

Answer 1

check your syntax for the below code:

<Modal
    animationType={'slide'}
    transparent={false}
    visible={this.props.visibleModal}
    onRequestClose={() => { this.changeVisibility(false); } }
>

Fly.. dont forget to change state value of visibleModal to false otherwise it wiil be rendered directly