React native elements Overlay not opening in iOS

Hi I am trying to open an overlay by clicking on a touchable inside another overlay. While it works perfectly in android it is not working in iOS. When I try and open the same overlay from a touchable on my screen it works again.Has anyone come across something like this? Thanks in advance

Code

<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>