Multiple Overlays not working in react native iOS

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>