Map Component with RN

MapComponent.js

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Alert,
  Platform,
  StyleSheet,
} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
import CustomMarker from './marker';
import CustomMapStyle from './mapStyle';

class Map extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      region: {
        latitude: this.props.marker.coordinate.latitude,
        longitude: this.props.marker.coordinate.longitude,
        latitudeDelta: 0.0486419504430344,
        longitudeDelta: 0.040142817690068,
      },
    };
  }

  map = null;

  // We should move to marker if user changes region (map center)
  onMarkerPress = e => {
    this.map.animateToRegion(this.state.region, 400);
  };

  componentDidMount() {}

  render() {
    if (this.state.mapReady === false) {
      return (
        <View>
          <Text>Loading</Text>
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          customMapStyle={CustomMapStyle}
          ref={ref => (this.map = ref)}
          region={this.state.region}
          rotateEnabled={false}
          loadingEnabled
          showsUserLocation={true}
          followUserLocation={false}
          showsMyLocationButton={true}
          zoomEnabled={this.props.zoomEnabled}
          maxZoomLevel={45}>
          <Marker
            ref={marker => {
              this.marker = marker;
            }}
            coordinate={{
              latitude: this.props.marker.coordinate.latitude,
              longitude: this.props.marker.coordinate.longitude,
            }}
            title={this.props.marker.title}
            description={this.props.marker.description}
            onPress={e => {
              e.stopPropagation();
              this.onMarkerPress();
            }}>
            <CustomMarker
              amount={this.props.marker.amount}
              currency={this.props.marker.currency}
            />
          </Marker>
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    zIndex: 0,
    flex: 1,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  container: {
    flex: 1,
  },
  row: {
    height: 56,
    justifyContent: 'center',
    alignItems: 'center',
  },
  scrollView: {
    marginTop: Platform.OS === 'ios' ? 0 : 0,
    backgroundColor: '#fff',
  },
  scrollViewContent: {
    paddingTop: 120,
  },
});

Map.defaultProps = {
  zoomEnabled: true,
  marker: {
    id: 1,
    time: '2020-01-14T04:20:00.000Z',
    title: 'Mersin Tantuni POS',
    description: '2 X Tantuni + İçecek',
    city: 'İstanbul',
    county: 'Kadıkoy',
    amount: '120',
    currency: '₺',
    coordinate: {
      latitude: 40.9798711,
      longitude: 29.0428413,
    },

    created_at: '2020-03-05T14:54:06.650Z',
    updated_at: '2020-03-05T14:54:06.650Z',
  },
};

export default Map;