Open maps when user clicks on map icon marker

Question

Following is my code for onpress handle

<TouchableOpacity style={{right: 45,}} onPress={()=>changeVisible(true)}>
                <Icon name="map-pin" size={20} />
 </TouchableOpacity>

This is my modal

<Modal
        transparent={true}
        animationType="fade"
        visible={isModalVisible}
        onRequestClose={() => changeVisible(false)}
        style={{flex:1}}>

        <Mymap />
        {/* <MapView style={{flex:1}}/> */} // manually putting in here works
 </Modal>

Then this is my 'Mymap' component

const Mymap = () => {
  const initialLocation = {
    latitude: 70,
    longitude: 70,
    latitudeDelta: 0.0022,
    longitudeDelta: 0.0021,
  };
  return (
    <View style={styles.mapcontainer}>
      <MapView
        provider={PROVIDER_GOOGLE} // remove if not using Google Maps
        style={styles.map}
        region={initialLocation}
      />
     </View>
  );
};
const styles = StyleSheet.create({
  mapcontainer: {
    // height: windowHeight,
    // width: windowWidth,
    flex: 1,
  },
  map: {
    // ...StyleSheet.absoluteFillObject,
    // marginBottom: 20,
    flex: 1,
  },
});

if I just put the '' inside modal it works but otherwise doesn't. I've tried using various styles inside the 'styles.map' and 'styles.container' but it is not working