SHARE
TWEET

Untitled

a guest May 25th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // React dependencies
  2. import React, { Component } from "react";
  3. import { View, StyleSheet } from "react-native";
  4.  
  5. // Provides native map implimentation
  6. import MapView from "react-native-maps";
  7.  
  8. // Stateless components
  9. import Loading from "../Components/UI/States/Loading";
  10.  
  11. // Supermarket data
  12. import Locations from "../../supermarkets.json";
  13.  
  14. // Styled-Components can provide this so a custom react-native view needed to be provided.
  15. const styles = StyleSheet.create({
  16.   container: {
  17.     ...StyleSheet.absoluteFillObject,
  18.     justifyContent: "flex-end",
  19.     alignItems: "center"
  20.   },
  21.   map: {
  22.     ...StyleSheet.absoluteFillObject
  23.   }
  24. });
  25.  
  26. export default class ItemTracking extends Component {
  27.   state = {
  28.     latitude: 0,
  29.     longitude: 0,
  30.     latitudeDelta: 0,
  31.     longitudeDelta: 0,
  32.     isLoading: true,
  33.     isDark: false
  34.   };
  35.  
  36.   calculateDeltas = () => {
  37.     navigator.geolocation.getCurrentPosition(
  38.       position => {
  39.         const oneDegreeOfLongitudeInMeters = 111.32 * 1000;
  40.         const circumference = (40075 / 360) * 1000;
  41.  
  42.         const latDelta =
  43.           position.coords.accuracy *
  44.           (1 / (Math.cos(position.coords.latitude) * circumference));
  45.  
  46.         const lonDelta =
  47.           position.coords.accuracy / oneDegreeOfLongitudeInMeters;
  48.  
  49.         this.setState({
  50.           latitude: position.coords.latitude,
  51.           longitude: position.coords.longitude,
  52.           latitudeDelta: Math.max(0, latDelta),
  53.           longitudeDelta: Math.max(0, lonDelta)
  54.         });
  55.       },
  56.       error => this.setState({ error: error.message }),
  57.       { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
  58.     );
  59.   };
  60.  
  61.   // Filter function (NOT WORKING)
  62.   checkSupermarketLocations = async () => {
  63.     const copyOfSuperMarkets = [...Locations];
  64.  
  65.     copyOfSuperMarkets.filter(
  66.       location =>
  67.         location.Lat <= this.state.longitude &&
  68.         location.Lng <= this.state.longitude
  69.     );
  70.  
  71.     console.log(copyOfSuperMarkets);
  72.   };
  73.  
  74.   async componentDidMount() {
  75.     navigator.geolocation.watchPosition(
  76.       async position => {
  77.         this.setState({
  78.           latitude: position.coords.latitude,
  79.           longitude: position.coords.longitude
  80.         });
  81.       },
  82.       error => console.log(`Error ${error}`),
  83.       { enableHighAccuracy: true, maximumAge: 300000 },
  84.       this.setState({
  85.         latitudeDelta: 0.009,
  86.         longitudeDelta: 0.009,
  87.         isLoading: false
  88.       })
  89.     );
  90.    
  91.     // The check occurs on component mount (This is where the filter function is called)
  92.     this.checkSupermarketLocations();
  93.   }
  94.  
  95.   render() {
  96.     if (this.state.isLoading) {
  97.       return <Loading isDark={this.state.isDark} />;
  98.     }
  99.  
  100.     return (
  101.       <View style={styles.container}>
  102.         <MapView
  103.           style={styles.map}
  104.           region={{
  105.             latitude: this.state.latitude,
  106.             longitude: this.state.longitude,
  107.             latitudeDelta: this.state.latitudeDelta,
  108.             longitudeDelta: this.state.longitudeDelta
  109.           }}
  110.           showsUserLocation={true}
  111.           loadingEnabled={true}
  112.           minZoomLevel={8}
  113.           maxZoomLevel={19}
  114.           onRegionChange={this.calculateDeltas} // when the device goes to a different regios recalculate
  115.           // onUserLocationChange={this.checkSupermarketLocations} // Checks for supermarkets
  116.         />
  117.       </View>
  118.     );
  119.   }
  120. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top