ReactNativeExamples/GPS.js at master · eddequincey/ReactNativeExamples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, Alert, AsyncStorage} from 'react-native';

export default class GPS extends Component {

  constructor(props) {
    super(props);
      this.state = {
      latitude: null,
      longitude: null,
      storedLoc: 'Empty',
    }
    // Reset AsyncStorage
    let keys = ['storedLat', 'storedLong'];
    AsyncStorage.multiRemove(keys, (err) => {
      ('Local storage long,lat removed!');
    });
  }

  onPressSet = () => {

    AsyncStorage.multiSet([['storedLat', this.state.latitude.toString()], ['storedLong', this.state.longitude.toString()]]);

    Alert.alert(
      'Location',
      'Stored',
      [
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ],
      { cancelable: false }
    )

  }

  onPressGet = () => {

    AsyncStorage.multiGet(["storedLat", "storedLong"]).then(response => {
      if(response[0][1] !== null){
       this.setState({
          storedLoc: response[0][1]+','+response[1][1],
        })
      }
      Alert.alert(
        'Your stored location is:',
        this.state.storedLoc,
        [
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ],
        { cancelable: false }
      )
    })

  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude ,
          longitude: position.coords.longitude,
        })
      },
      (error) => { console.log(error); },
      { enableHighAccuracy: true, timeout: 30000 }
    )
  }

  render() {
    return  (
      <View style={styles.container}>
        <Text style={styles.myText}>Latitude: {this.state.latitude}</Text>
        <Text style={styles.myText}>Longitude: {this.state.longitude}</Text>
        <TouchableHighlight
          style={styles.button}
          onPress={this.onPressSet}
        >
        <Text>Set Location</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={styles.button}
          onPress={this.onPressGet}
        >
        <Text>Get Location</Text>
        </TouchableHighlight>

    </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
   marginTop: 22,

  },
  myText: {
    backgroundColor: 'skyblue',
    padding: 10,
    fontSize: 20,
    marginBottom: 2,
    textAlign: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 2,
  }
})