how to add BoxShadow at the bottom of the MapView in react-native for both ios and android?

Question

I want to achieve as image has attached below at the end.

Most of the help is for View element but I need it in MapView. I tried everything in this link below but none of them works in MapView

How do I render a shadow?

and I am using expo

here is my code below:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Image,
  TouchableOpacity,
  ActivityIndicator,
  Icon,
  Platform,
  ImageBackground,
  StatusBar
} from 'react-native';
import MapView,{PROVIDER_GOOGLE}  from 'react-native-maps';
import { Constants, Location, Permissions } from 'expo';

export default class Map extends Component {
  static navigationOptions = {
    title: 'Dummy title',
    headerStyle:{
      backgroundColor: 'green',
    },
    headerTitleStyle:{ color: 'white'},
  }
  componentWillMount() {
    if (Platform.OS === 'android' && !Constants.isDevice) {
      this.setState({
        errorMessage: 'Oops, this will not work on Sketch in an Android emulator. Try it on your device!',
      });
    } else {
      this._getLocationAsync();
    }
  }
  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }
    let location = await Location.getCurrentPositionAsync({});
    this.setState({ location });
    this.setState({ 
      markers: this.state.markers.concat({
        title: "Current Location",
        coordinates: {
          latitude: location.coords.latitude,
          longitude: location.coords.longitude
        }
      })
    })
  };

  constructor(props) {
    super(props)
    this.state = {
      location: null,
      errorMessage: null,
      heading: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form",
      raw_text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
      region: {
        latitude: ****,
        longitude: ****,
        latitudeDelta: **,
        longitudeDelta: **,
      },
      markers: [
      ]
    }
  }
  getLocations = () => {
    return fetch('*******', {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
    .then((response) => response.json())
    .then((responseJson) => {

    })
    .catch((error) => {
      Alert.alert(error);
    });
  }
  componentDidMount() {
    StatusBar.setHidden(true);
  }
  render() {
    return (
      <ImageBackground source={{uri: 'https://******/shadedbg.png'}}
        style={styles.backgroundImage}
        resizeMode={'cover'}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={this.state.region}
        >
          {this.state.markers.map((marker, index) => (
            <MapView.Marker  key={index}
              coordinate={marker.coordinates}
              title={marker.title}
              image={require('../../assets/pin.png')}
            />
          ))}
        </MapView>
        <View style={styles.headingContainer}>
          <Text style={styles.headingText}>{this.state.heading}</Text>
        </View>
        <View style={styles.maptext}>
          <Text style={styles.text}>{this.state.raw_text}</Text>
        </View>
      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    flex: 1
  },
  backgroundImage: {
    flex: 1,
    backgroundColor:'#4FE39D',
  },
  headingContainer:{
    backgroundColor: 'white',
    paddingBottom: 8,
  },
  headingText:{
    fontSize: 16,
    fontWeight: '700'
  },
  maptext:{
    flex: 1,
    backgroundColor:'white',
  },
  text:{
    fontSize: 14
  }
});

Thanks in advance!