How can i have multiple modals on the same view ? / Ho wcan i assign an id to a Modal ?

[PManager1]

Here's my code, I wanna fire second modal upon clicking the modal 2.

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

import Modal from 'react-native-simple-modal';

export default class App extends React.Component {

state = {open: false};

render() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>

  <TouchableOpacity onPress={() => this.setState({open: true})}>
    <Text>Open modal 1 </Text>
  </TouchableOpacity>


  <TouchableOpacity onPress={() => this.setState({open: true})}>
    <Text>Open modal 2 </Text>
  </TouchableOpacity>


  <Modal
    offset={this.state.offset}
    open={this.state.open}
    modalDidOpen={() => console.log('modal did open')}
    modalDidClose={() => this.setState({open: false})}
    style={{alignItems: 'center'}}>

    <View>
      <Text style={{fontSize: 20, marginBottom: 10}}>Hello world!</Text>
      <TouchableOpacity
      style={{margin: 5}}
      onPress={() => this.setState({offset: -100})}>
        <Text>Move modal up</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{margin: 5}}
        onPress={() => this.setState({offset: 0})}>
        <Text>Reset modal position</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{margin: 5}}
        onPress={() => this.setState({open: false})}>
        <Text>Close modal</Text>
      </TouchableOpacity>
    </View>

  </Modal>


</View>
);

}

}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

[Abdillah99]

this.state={
open:false,
modalID:null,
}

just make function
openModal(id) =>{
this.setstate({modalID: id})
this.setState({open:true}}
}

call the function
<Button onpress={() => this.openModal(1)} // open modal 1
and then inside modal tag

{this.state.modalID == 1 && }
{this.state.modalID == 2 && }