1import React from 'react';
2import { Alert, ScrollView, Text } from 'react-native';
3import { Pedometer } from 'expo';
4import ListButton from '../components/ListButton';
5
6interface State {
7  stepCount?: number;
8}
9
10export default class PedometerScreen extends React.Component<{}, State> {
11  static navigationOptions = {
12    title: 'Pedometer',
13  };
14
15  readonly state: State = {};
16
17  listener?: Pedometer.PedometerListener;
18
19  render() {
20    return (
21      <ScrollView style={{ padding: 10 }}>
22        <ListButton
23          onPress={async () => {
24            const result = await Pedometer.isAvailableAsync();
25            Alert.alert('Pedometer result', `Is available: ${result}`);
26          }}
27          title="Is available"
28        />
29        <ListButton
30          onPress={async () => {
31            const end = new Date();
32            const start = new Date();
33            start.setDate(end.getDate() - 1);
34            const result = await Pedometer.getStepCountAsync(start, end);
35            Alert.alert(
36              'Pedometer result',
37              `Number of steps for the last day: ${result.steps}`
38            );
39          }}
40          title="Get steps count"
41        />
42        <ListButton
43          onPress={async () => {
44            this.listener = Pedometer.watchStepCount(data => {
45              this.setState({ stepCount: data.steps });
46            });
47          }}
48          title="Listen for step count updates"
49        />
50        <ListButton
51          onPress={async () => {
52            if (this.listener) {
53              this.listener.remove();
54              this.listener = undefined;
55            }
56          }}
57          title="Stop listening for step count updates"
58        />
59        {this.state.stepCount !== undefined && (
60          <Text>Total steps {this.state.stepCount}</Text>
61        )}
62      </ScrollView>
63    );
64  }
65}
66