Multiple Overlays not working in react native iOS - react-native

Question

I am using multiple overlays in my react native component. It is working great in android but in iOS my second overlay doesn't open when it is under my first overlay. When I move my second overlay over my first overlay my second overlay opens but first doesn't. How can I make it so that my second overlay opens irrespective of the first overlay? I am facing this issue only in iOS.
<Overlay isVisible={clientdeetsoverlay} overlayStyle={{height:'100%'}} fullScreen={true} animationType="slide">
<SafeAreaView>
<TO style={{alignSelf:'flex-end'}} onPress={()=>{setClientdeetsoverlay(false)}}>
<Icon name="times" color="#140F79" size={50} />
</TO>
{
isclientdeetloading?
<View>
<ActivityIndicator size="large" color="red" />
</View>
:
<Address ValidateDetails={ConfirmDetails.bind(this)} editClientData={editClientData.bind(this)} clientdata={clientdata} />
}
</SafeAreaView>
</Overlay>
<Overlay animationType="slide" isVisible={addressoverlay} overlayStyle={{height:'50%',width:'90%',borderRadius:20,padding:20}} onBackdropPress={toggleOverlay}>
{
!addressesloading?
<View>
<Text style={{fontSize:20,fontFamily:'Montserrat-Bold'}}>
Select or add an address
</Text>
<ScrollView horizontal={true} contentContainerStyle={{flexGrow:1,marginTop:20,alignItems: 'center',justifyContent: 'center',alignSelf:'center'}}>
<TouchableWithoutFeedback key="new" onPress={()=>{ValidateDetails("New")}}>
<View style={{margin:10,height:200,width:200,borderWidth:1,borderColor:'black',borderRadius:1,borderStyle:'dotted',alignItems:'center',justifyContent: 'space-evenly',}}>
<Image source={require("../Assets/mail.jpg")} style={{height:150,width:150,resizeMode:'contain'}} />
<Text style={{fontSize:15,fontFamily:'Montserrat-Regular'}}>Add new address</Text>
</View>
</TouchableWithoutFeedback>
{
addresses.map((item)=>{
return(
<TouchableWithoutFeedback key={item.id} onPress={()=>{selectaddress(item)}}>
<View style={selectedaddress.id==item.id?styles.selectedAddressStyle:styles.notselectedaddress}>
{
selectedaddress.id==item.id?
<Icon name="check-square" color="#4B53F2" size={30} style={{position:'absolute',right:1}} />
:
null
}
<Text style={{flex:1,fontFamily:'Montserrat-Bold'}}>Address {item.index}</Text>
<Text style={{flex:3,fontFamily:'Montserrat-Regular'}}>{item.data.add}</Text>
<Text style={{flex:1,fontFamily:'Montserrat-Regular'}}>Phone : {item.data.Phone}</Text>
<View style={{flex:1,alignItems:'flex-start',justifyContent:'space-between',flexDirection:'row',width:'100%'}}>
<TO style={styles.controlbuttonContainerStyle} onPress={()=>ValidateDetails(item.id)}>
<Icon name="edit" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Edit</Text>
</TO>
<TO onPress={()=>{removeAddress(item.id)}} style={styles.controlbuttonContainerStyle}>
<Icon name="trash-alt" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Remove</Text>
</TO>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
</ScrollView>
<TO onPress={()=>{PlaceOrder()}} style={{alignItems: 'center',justifyContent: 'center',width:'80%',height:40,backgroundColor:'#4B53F2',marginVertical:10,alignSelf:'center'}}>
<Text style={{color:'white',fontFamily:'Montserrat-Bold',fontSize:15}}>Place Order</Text>
</TO>
</View>
:
<View style={{flex:1,backgroundColor:'white',alignItems: 'center',justifyContent: 'center',}}>
<ActivityIndicator size={15} color="red" />
</View>
}
</Overlay>

Answer 1

The easiest way to do it is to nest them. Then it should work properly, just don't close the first one just open the second one above it.
<Overlay isVisible={open} overlayStyle={{height:'50%'}}>
<SafeAreaView>
</SafeAreaView>
//second overlay inside the first one
<Overlay isVisible={open1} overlayStyle={{height:'60%'}}>
<SafeAreaView>
</SafeAreaView>
</Overlay>
</Overlay>