1
2import React from 'react';
3import {
4  Switch,
5  Text,
6  View,
7} from 'react-native';
8
9import BackgroundGeolocation, {
10  Location,
11  Subscription
12} from "react-native-background-geolocation";
13
14const HelloWorld = () => {
15  const [enabled, setEnabled] = React.useState(false);
16  const [location, setLocation] = React.useState('');
17
18  React.useEffect(() => {
19    /// 1.  Subscribe to events.
20    const onLocation:Subscription = BackgroundGeolocation.onLocation((location) => {
21      console.log('[onLocation]', location);
22      setLocation(JSON.stringify(location, null, 2));
23    })
24
25    const onMotionChange:Subscription = BackgroundGeolocation.onMotionChange((event) => {
26      console.log('[onMotionChange]', event);
27    });
28
29    const onActivityChange:Subscription = BackgroundGeolocation.onActivityChange((event) => {
30      console.log('[onActivityChange]', event);
31    })
32
33    const onProviderChange:Subscription = BackgroundGeolocation.onProviderChange((event) => {
34      console.log('[onProviderChange]', event);
35    })
36
37    /// 2. ready the plugin.
38    BackgroundGeolocation.ready({
39      // Geolocation Config
40      desiredAccuracy: BackgroundGeolocation.DESIRED_ACCURACY_HIGH,
41      distanceFilter: 10,
42      // Activity Recognition
43      stopTimeout: 5,
44      // Application config
45      debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
46      logLevel: BackgroundGeolocation.LOG_LEVEL_VERBOSE,
47      stopOnTerminate: false,   // <-- Allow the background-service to continue tracking when user closes the app.
48      startOnBoot: true,        // <-- Auto start tracking when device is powered-up.
49      // HTTP / SQLite config
50      url: 'http://yourserver.com/locations',
51      batchSync: false,       // <-- [Default: false] Set true to sync locations to server in a single HTTP request.
52      autoSync: true,         // <-- [Default: true] Set true to sync each location to server as it arrives.
53      headers: {              // <-- Optional HTTP headers
54        "X-FOO": "bar"
55      },
56      params: {               // <-- Optional HTTP params
57        "auth_token": "maybe_your_server_authenticates_via_token_YES?"
58      }
59    }).then((state) => {
60      setEnabled(state.enabled)
61      console.log("- BackgroundGeolocation is configured and ready: ", state.enabled);
62    });
63
64    return () => {
65      // Remove BackgroundGeolocation event-subscribers when the View is removed or refreshed
66      // during development live-reload.  Without this, event-listeners will accumulate with
67      // each refresh during live-reload.
68      onLocation.remove();
69      onMotionChange.remove();
70      onActivityChange.remove();
71      onProviderChange.remove();
72    }
73  }, []);
74
75  /// 3. start / stop BackgroundGeolocation
76  React.useEffect(() => {
77    if (enabled) {
78      BackgroundGeolocation.start();
79    } else {
80      BackgroundGeolocation.stop();
81      setLocation('');
82    }
83  }, [enabled]);
84
85  return (
86    <View style={{alignItems:'center'}}>
87      <Text>Click to enable BackgroundGeolocation</Text>
88      <Switch value={enabled} onValueChange={setEnabled} />
89      <Text style={{fontFamily:'monospace', fontSize:12}}>{location}</Text>
90    </View>
91  )
92}
93
94export default HelloWorld;

1import React from 'react';
2import {
3  Switch,
4  Text,
5  View,
6} from 'react-native';
7
8import BackgroundGeolocation, {
9  Location,
10  Subscription
11} from "react-native-background-geolocation";
12
13export default class HelloWorld extends React.Component {
14  subscriptions:Subscription[] = [];
15  state:any = {};
16  constructor(props:any) {
17    super(props);
18    this.state = {
19      enabled: false,
20      location: ''
21    }
22  }
23
24  componentDidMount() {
25    /// 1.  Subscribe to BackgroundGeolocation events.
26    this.subscriptions.push(BackgroundGeolocation.onLocation((location) => {
27      console.log('[onLocation]', location);
28      this.setState({location: JSON.stringify(location, null, 2)})
29    }, (error) => {
30      console.log('[onLocation] ERROR:', error);
31    }))
32
33    this.subscriptions.push(BackgroundGeolocation.onMotionChange((event) => {
34      console.log('[onMotionChange]', event);
35    }))
36
37    this.subscriptions.push(BackgroundGeolocation.onActivityChange((event) => {
38      console.log('[onActivityChange]', event);
39    }))
40
41    this.subscriptions.push(BackgroundGeolocation.onProviderChange((event) => {
42      console.log('[onProviderChange]', event);
43    }))
44
45    /// 2. ready the plugin.
46    BackgroundGeolocation.ready({
47      // Geolocation Config
48      desiredAccuracy: BackgroundGeolocation.DESIRED_ACCURACY_HIGH,
49      distanceFilter: 10,
50      // Activity Recognition
51      stopTimeout: 5,
52      // Application config
53      debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
54      logLevel: BackgroundGeolocation.LOG_LEVEL_VERBOSE,
55      stopOnTerminate: false,   // <-- Allow the background-service to continue tracking when user closes the app.
56      startOnBoot: true,        // <-- Auto start tracking when device is powered-up.
57      // HTTP / SQLite config
58      url: 'http://yourserver.com/locations',
59      batchSync: false,       // <-- [Default: false] Set true to sync locations to server in a single HTTP request.
60      autoSync: true,         // <-- [Default: true] Set true to sync each location to server as it arrives.
61      headers: {              // <-- Optional HTTP headers
62        "X-FOO": "bar"
63      },
64      params: {               // <-- Optional HTTP params
65        "auth_token": "maybe_your_server_authenticates_via_token_YES?"
66      }
67    }).then((state) => {
68      this.setState({enabled: state.enabled});
69      console.log("- BackgroundGeolocation is configured and ready: ", state.enabled);
70    })
71  }
72
73  /// When view is destroyed (or refreshed during development live-reload),
74  /// remove BackgroundGeolocation event subscriptions.
75  componentWillUnmount() {
76    this.subscriptions.forEach((subscription) => subscription.remove());
77  }
78
79  onToggleEnabled(value:boolean) {
80    console.log('[onToggleEnabled]', value);
81    this.setState({enabled: value})
82    if (value) {
83      BackgroundGeolocation.start();
84    } else {
85      this.setState({location: ''});
86      BackgroundGeolocation.stop();
87    }
88  }
89
90  render() {
91    return (
92      <View style={{alignItems:'center'}}>
93        <Text>Click to enable BackgroundGeolocation</Text>
94        <Switch value={this.state.enabled} onValueChange={this.onToggleEnabled.bind(this)} />
95        <Text style={{fontFamily:'monospace', fontSize:12}}>{this.state.location}</Text>
96      </View>
97    )
98  }
99}