text: /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   *
   * @format
   * @flow
   * @lint-ignore-every XPLATJSCOPYRIGHT1
   */
  
  import React from "react";
  import {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    Platform,
    PermissionsAndroid
  } from "react-native";
  import MapView, {
    Marker,
    AnimatedRegion,
    Polyline,
    PROVIDER_GOOGLE
  } from "react-native-maps";
  import haversine from "haversine";
  
  // const LATITUDE = 29.95539;
  // const LONGITUDE = 78.07513;
  const LATITUDE_DELTA = 0.009;
  const LONGITUDE_DELTA = 0.009;
  const LATITUDE = 37.78825;
  const LONGITUDE = -122.4324;
  
  class Map extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        routeCoordinates: [],
        distanceTravelled: 0,
        prevLatLng: {},
        coordinate: new AnimatedRegion({
          latitude: LATITUDE,
          longitude: LONGITUDE,
          latitudeDelta: 0,
          longitudeDelta: 0
        })
      };
    }
  
  //   componentDidMount() {
  //     // this.requestCameraPermission();
  //     navigator.geolocation.getCurrentPosition(
  //       position => {
  //         this.setState({
  //           latitude: position.coords.latitude,
  //           longitude: position.coords.longitude,
  //           error: null
  //         });
  //       },
  //       error => this.setState({ error: error.message }),
  //       { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 }
  //     );
  //     const { coordinate } = this.state;
  //     this.watchID = navigator.geolocation.watchPosition(
  //       position => {
  //         const { routeCoordinates, distanceTravelled } = this.state;
  //         const { latitude, longitude } = position.coords;
  
  //         const newCoordinate = {
  //           latitude,
  //           longitude
  //         };
  //         console.log({ newCoordinate });
  
  //         if (Platform.OS === "android") {
  //           if (this.marker) {
  //             this.marker._component.animateMarkerToCoordinate(
  //               newCoordinate,
  //               500
  //             );
  //           }
  //         } else {
  //           coordinate.timing(newCoordinate).start();
  //         }
  
  //         this.setState({
  //           latitude,
  //           longitude,
  //           routeCoordinates: routeCoordinates.concat([newCoordinate]),
  //           distanceTravelled:
  //             distanceTravelled + this.calcDistance(newCoordinate),
  //           prevLatLng: newCoordinate
  //         });
  //       },
  //       error => console.log(error),
  //       {
  //         enableHighAccuracy: true,
  //         timeout: 20000,
  //         maximumAge: 1000,
  //         distanceFilter: 10
  //       }
  //     );
  //   }
  
    componentWillUnmount() {
      navigator.geolocation.clearWatch(this.watchID);
    }
  
    getMapRegion = () => ({
      latitude: this.state.latitude,
      longitude: this.state.longitude,
      latitudeDelta: LATITUDE_DELTA,
      longitudeDelta: LONGITUDE_DELTA
    });
  
    calcDistance = newLatLng => {
      const { prevLatLng } = this.state;
      return haversine(prevLatLng, newLatLng) || 0;
    };
  
    requestCameraPermission = async () => {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.CAMERA,
          {
            title: "Location Access Permission",
            buttonNeutral: "Ask Me Later",
            buttonNegative: "Cancel",
            buttonPositive: "OK"
          }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          console.log("You can use the camera");
        } else {
          console.log("Camera permission denied");
        }
      } catch (err) {
        console.warn(err);
      }
    };
  
    render() {
      return (
        <View style={styles.container}>
          <MapView
            style={styles.map}
            provider={PROVIDER_GOOGLE}
            showUserLocation
            followUserLocation
            loadingEnabled
            region={this.getMapRegion()}
          >
            {/* <Polyline coordinates={this.state.routeCoordinates} strokeWidth={5} />
            <Marker.Animated
              ref={marker => {
                this.marker = marker;
              }}
              coordinate={this.state.coordinate}
            >
              <Image
                source={require("./car.png")}
                style={{ height: 35, width: 35 }}
              />
            </Marker.Animated> */}
          </MapView>
          <View style={styles.buttonContainer}>
            <Text style={styles.bottomBarContent}>
              {parseFloat(this.state.distanceTravelled).toFixed(2)} km
            </Text>
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      ...StyleSheet.absoluteFillObject,
      justifyContent: "flex-end",
      alignItems: "center"
    },
    map: {
      ...StyleSheet.absoluteFillObject
    },
    bubble: {
      flex: 1,
      backgroundColor: "rgba(255,255,255,0.7)",
      paddingHorizontal: 18,
      paddingVertical: 12,
      borderRadius: 20
    },
    latlng: {
      width: 200,
      alignItems: "stretch"
    },
    button: {
      width: 80,
      paddingHorizontal: 12,
      alignItems: "center",
      marginHorizontal: 10
    },
    buttonContainer: {
      flexDirection: "row",
      marginVertical: 20,
      backgroundColor: "transparent"
    }
  });
  
  export default Map;