working on StepsDemo example app... wip

examples/StepsDemo/app/app.js

+/**
+ * Created by greg on 2016-06-30.
+ */
+
+import React, { Component } from 'react';
+import {
+    AppRegistry,
+    StyleSheet,
+    Navigator,
+    Text,
+    View
+} from 'react-native';
+
+
+let Home = require('./components/home/index');
+let Add = require('./components/add/index');
+
+
+class StepsDemoApp extends Component {
+    render() {
+        return (
+            <Navigator
+                style={{ flex:1 }}
+                initialRoute={{ name: 'Home' }}
+                renderScene={ this.renderScene } />
+        );
+    }
+
+    renderScene(route, navigator) {
+        if(route.name == 'Home') {
+            return <Home navigator={navigator} />
+        }
+        if(route.name == 'Add') {
+            return <Add navigator={navigator} />
+        }
+    }
+}
+
+module.exports = StepsDemoApp;
+export default StepsDemoApp;

examples/StepsDemo/app/components/add/index.js

+/**
+ * Created by greg on 2016-06-30.
+ */
+
+import React, { Component } from 'react';
+import {
+    Navigator,
+    TouchableOpacity,
+    ScrollView,
+    Text,
+    View
+} from 'react-native';
+import TimerMixin from 'react-timer-mixin';
+var reactMixin = require('react-mixin');
+import styles from '../../styles/styles';
+
+
+class Add extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    _onPressItem(key) {
+        console.log('_onPressItem() ==> ', key);
+        let self = this;
+        this.requestAnimationFrame(() => {
+            this.props.navigator.push({
+                name: key
+            });
+        })
+    }
+
+
+    render() {
+        return (
+            <Navigator
+                renderScene={this.renderScene.bind(this)}
+                navigator={this.props.navigator}
+                navigationBar={
+                    <Navigator.NavigationBar style={styles.navigationBar}
+                                             routeMapper={NavigationBarRouteMapper} />
+                }/>
+        );
+    }
+
+    renderScene(route, navigator) {
+        return (
+            <View style={styles.sceneContainerWithNavbar}>
+                <Text>Add Steps</Text>
+            </View>
+        );
+    }
+}
+
+reactMixin(Add.prototype, TimerMixin);
+
+var NavigationBarRouteMapper = {
+    LeftButton(route, navigator, index, nextState) {
+        return (
+            <TouchableOpacity style={styles.navbarTitleTouchable} onPress={() => {navigator.parentNavigator.pop()}}>
+                <Text style={styles.navbarTitle}>
+                    Back
+                </Text>
+            </TouchableOpacity>
+        );
+    },
+    RightButton(route, navigator, index, nextState) {
+        return null;
+    },
+    Title(route, navigator, index, nextState) {
+        return (
+            <TouchableOpacity style={styles.navbarTitleTouchable}>
+                <Text style={styles.navbarTitle}>
+                    Add Steps
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+};
+
+
+module.exports = Add;
+export default Add;
\ No newline at end of file

examples/StepsDemo/app/components/home/history.js

+/**
+ * Created by greg on 2016-06-30.
+ */
+
+import React, { Component } from 'react';
+import {
+    Navigator,
+    TouchableOpacity,
+    TouchableHighlight,
+    ScrollView,
+    ListView,
+    RecyclerViewBackedScrollView,
+    Text,
+    View
+} from 'react-native';
+import _ from 'lodash';
+//import TimerMixin from 'react-timer-mixin';
+//var reactMixin = require('react-mixin');
+import styles from '../../styles/styles';
+
+
+class History extends Component {
+
+    constructor(props) {
+        super(props);
+        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
+        if(_.isArray(this.props.data)){
+            ds = ds.cloneWithRows(this.props.data);
+        }
+        this.state = {
+            dataSource: ds,
+        };
+    }
+
+    componentDidMount() {}
+
+    componentWillUnmount() {}
+
+
+    componentWillReceiveProps(newProps) {
+        if(newProps && newProps.data && _.isArray(newProps.data)){
+            this.setState({
+                dataSource: this.state.dataSource.cloneWithRows(newProps.data),
+            });
+        }
+    }
+
+
+    render() {
+        return (
+            <ListView
+                dataSource={this.state.dataSource}
+                renderRow={this._renderRow}
+                renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
+            />
+        );
+    }
+
+    _renderRow(rowData: Object, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
+        return (
+            <TouchableHighlight onPress={() => {
+              //this._pressRow(rowID);
+              highlightRow(sectionID, rowID);
+            }}>
+                <View>
+                    <View style={styles.listViewRow}>
+                        <Text style={{flex:1,}}>
+                            {rowData.value + ' - ' + rowData.startDate}
+                        </Text>
+                    </View>
+                </View>
+            </TouchableHighlight>
+        );
+    }
+
+}
+
+//reactMixin(History.prototype, TimerMixin);
+
+
+module.exports = History;
+export default History;

examples/StepsDemo/app/components/home/index.js

+/**
+ * Created by greg on 2016-06-30.
+ */
+
+import React, { Component } from 'react';
+import {
+    Navigator,
+    TouchableOpacity,
+    ScrollView,
+    Text,
+    View
+} from 'react-native';
+
+import TimerMixin from 'react-timer-mixin';
+var reactMixin = require('react-mixin');
+import styles from '../../styles/styles';
+
+var AppleHealthKit = require('react-native-apple-healthkit');
+
+
+import History from './history';
+
+
+const HKOPTIONS = {
+    permissions: {
+        read:  ['Steps'],
+        write: ['Steps'],
+    }
+};
+
+
+class Home extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            stepsToday: 0,
+            stepHistory: [],
+        };
+    }
+
+    componentDidMount() {
+        AppleHealthKit.isAvailable((err,available) => {
+            if(available){
+                AppleHealthKit.initHealthKit(HKOPTIONS, (err, res) => {
+                    if(this._handleHKError(err, 'initHealthKit')){
+                        return;
+                    }
+                    this._fetchStepsToday();
+                    this._fetchStepsHistory();
+                });
+            }
+        });
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    _fetchStepsToday() {
+        AppleHealthKit.getStepCountForToday(null, (err, steps) => {
+            if(this._handleHKError(err, 'getStepCountForToday')){
+                return;
+            }
+            this.setState({stepsToday: steps});
+        });
+    }
+
+    _fetchStepsHistory() {
+        let options = {
+            startDate: (new Date(2016,4,1)).toISOString(),
+        };
+        AppleHealthKit.getDailyStepSamples(options, (err, res) => {
+            if(this._handleHKError(err, 'getDailyStepSamples')){
+                return;
+            }
+            this.setState({stepHistory: res});
+        });
+    }
+
+    _onPressItem(key) {
+        console.log('_onPressItem() ==> ', key);
+        let self = this;
+        this.requestAnimationFrame(() => {
+            this.props.navigator.push({
+                name: key
+            });
+        })
+    }
+
+    render() {
+        return (
+            <Navigator
+                renderScene={this.renderScene.bind(this)}
+                navigator={this.props.navigator}
+                navigationBar={
+                    <Navigator.NavigationBar style={styles.navigationBar}
+                                             routeMapper={NavigationBarRouteMapper} />
+                }/>
+        );
+    }
+
+    renderScene(route, navigator) {
+        return (
+            <View style={styles.sceneContainerWithNavbar}>
+
+                <View style={styles.stepsContainer}>
+                    <Text>
+                        STEPS: {this.state.stepsToday}
+                    </Text>
+                </View>
+
+                <View style={styles.historyContainer}>
+                    <History data={this.state.stepHistory} />
+                </View>
+
+            </View>
+        );
+    }
+
+    _handleHKError(err, method) : boolean {
+        if(err){
+            let errStr = 'HealthKit_ERROR['+method+'] : ';
+            if(typeof err === 'string'){
+                errStr += err;
+            } else if (typeof err === 'object' && err.message){
+                errStr += err.message;
+            }
+            console.log(errStr);
+            return true;
+        }
+        return false;
+    }
+
+}
+
+reactMixin(Home.prototype, TimerMixin);
+
+var NavigationBarRouteMapper = {
+    LeftButton(route, navigator, index, nextState) {
+        return null;
+    },
+    RightButton(route, navigator, index, nextState) {
+        return null;
+    },
+    Title(route, navigator, index, nextState) {
+        return (
+            <TouchableOpacity style={styles.navbarTitleTouchable}>
+                <Text style={styles.navbarTitle}>
+                    HealthKit Steps
+                </Text>
+            </TouchableOpacity>
+        );
+    }
+};
+
+
+module.exports = Home;
+export default Home;

examples/StepsDemo/app/styles/styles.js

+/**
+ * Created by greg on 2016-06-30.
+ */
+
+
+import {
+    Platform,
+    StyleSheet
+} from 'react-native';
+
+
+
+const styles = StyleSheet.create({
+
+    sceneContainerWithNavbar: {
+        flex: 1,
+        flexDirection: 'column',
+        //justifyContent: 'flex-start',
+        //alignItems: 'flex-start',
+        marginTop: (Platform.OS === 'ios') ? 64 : 54,
+        backgroundColor: '#FFFFFF'
+    },
+
+    navigationBar: {
+        borderBottomWidth: 1,
+        borderBottomColor: '#cccccc',
+        backgroundColor: '#f5f5f5'
+    },
+
+    navbarTitleTouchable: {
+        flex: 1,
+        justifyContent: 'center'
+    },
+    navbarTitle: {
+        color: '#FD2D55',
+        margin: 10,
+        fontSize: 18
+    },
+
+
+
+    stepsContainer: {
+        height:100,
+        backgroundColor: '#FF8000',
+    },
+
+    historyContainer: {
+        flex: 1,
+        backgroundColor: '#0088cc',
+    },
+
+
+
+    listViewRow: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: 10,
+        backgroundColor: '#F6F6F6',
+    },
+
+
+
+    row_1_3: {
+        flex: 0.33,
+        flexDirection:'column',
+        padding:10,
+        //backgroundColor: '#FF8000'
+    },
+
+    row_2_3: {
+        flex: 0.66,
+        flexDirection:'column',
+        padding:10,
+        //backgroundColor: '#0088cc'
+    },
+
+    borderTopLightGrey: {
+        borderTopColor: '#CCCCCC',
+        borderTopWidth: 1,
+    },
+
+    largeCenteredText: {
+        textAlign: 'center',
+        flexDirection:'row',
+        fontSize:34,
+        marginTop:60,
+    },
+
+    dashboardListItemLabel: {
+        fontSize:12,
+        color: '#FD2D55',
+        position:'absolute',
+        left: 70,
+        top:0,
+    },
+
+    dashboardListItemValue: {
+        fontSize:22,
+        color: '#47a292',
+        position:'absolute',
+        left: 70,
+        top:15,
+    },
+
+    sceneContainerFull: {
+        flex: 1,
+        flexDirection: 'column',
+        //justifyContent: 'flex-start',
+        //alignItems: 'flex-start',
+        marginTop: 0,
+        backgroundColor: '#FFFFFF'
+    },
+
+
+    dashboardToday: {
+        height: 30,
+        alignItems: 'stretch',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(162, 162, 162, 0.2)',
+    },
+    dashboardTodayText: {
+
+        color: '#a2a2a2',
+    },
+
+    dashboardListItemHighlight: {
+        flexDirection: 'row',
+        alignSelf: 'stretch',
+        justifyContent: 'center',
+        //flex:1,
+        //alignSelf: 'stretch',
+        //overflow: 'hidden',
+    },
+
+    dashboardListItemView: {
+        flex: 1,
+        //backgroundColor: '#FDFDFD',
+        backgroundColor: '#FDFDFD',
+        //paddingTop:74,
+        //flexDirection: 'row',
+        flexDirection: 'column',
+        alignSelf: 'stretch',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        paddingTop:15,
+        paddingBottom: 15,
+
+        //flexWrap: 'wrap',
+
+        borderBottomColor: '#AAAAAA',
+        borderBottomWidth: 1,
+    },
+
+    dashboardListItemViewTransparent: {
+        flex: 1,
+        //backgroundColor: '#FDFDFD',
+        backgroundColor: 'transparent',
+        //paddingTop:74,
+        //flexDirection: 'row',
+        flexDirection: 'column',
+        alignSelf: 'stretch',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        paddingTop:15,
+        paddingBottom: 15,
+
+        //flexWrap: 'wrap',
+
+        borderBottomColor: '#AAAAAA',
+        borderBottomWidth: 1,
+    },
+
+    dashboardListItem: {
+        flexDirection: 'row',
+        alignSelf: 'stretch',
+        justifyContent: 'space-between',
+        flex:1,
+        backgroundColor: 'transparent',
+    },
+
+
+    dashboardListItemIcon: {
+        width: 40,
+        height: 40,
+        marginLeft: 10,
+        opacity:0.7,
+        //marginTop: 50,
+        //backgroundColor: 'transparent',
+        alignSelf: 'flex-start',
+    },
+
+    dashboardListItemText: {
+        flex: 1,
+        flexDirection: 'column',
+        alignSelf: 'flex-start',
+        marginLeft: 20,
+        fontSize: 29,
+        color: '#47a292',
+        //color: '#98CA3F',
+        //color: '#644496',
+        flexWrap: 'wrap',
+        backgroundColor:'transparent',
+    },
+
+});
+
+module.exports = styles;
+export default styles;
\ No newline at end of file

examples/StepsDemo/index.ios.js

@@ -12,21 +12,12 @@ import {
   View
 } from 'react-native';
 
+import App from './app/app';
+
 class StepsDemo extends Component {
   render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
+      <App />
     );
   }
 }

examples/StepsDemo/ios/StepsDemo/AppDelegate.m

@@ -32,7 +32,7 @@
    */
 
   jsCodeLocation = [NSURL URLWithString:@"http://192.168.0.14:8081/index.ios.bundle?platform=ios&dev=true"];
-
+//  jsCodeLocation = [NSURL URLWithString:@"http://10.1.14.163:8081/index.ios.bundle?platform=ios&dev=true"];
   /**
    * OPTION 2
    * Load from pre-bundled file on disk. The static bundle is automatically

examples/StepsDemo/ios/StepsDemo/Info.plist

@@ -22,11 +22,19 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
 	<array>
 		<string>armv7</string>
+		<string>healthkit</string>
 	</array>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
@@ -36,12 +44,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-  <key>NSAppTransportSecurity</key>
-  <dict>
-    <key>NSAllowsArbitraryLoads</key>
-    <true/>
-  </dict>
 </dict>
 </plist>

examples/StepsDemo/ios/StepsDemo/StepsDemo.entitlements

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>com.apple.developer.healthkit</key>
+	<true/>
+</dict>
+</plist>

examples/StepsDemo/package.json

@@ -6,7 +6,10 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
+    "lodash": "^4.13.1",
     "react": "15.1.0",
-    "react-native": "^0.28.0"
+    "react-mixin": "^2.0.2",
+    "react-native": "^0.28.0",
+    "react-native-apple-healthkit": "file:///Users/greg/Dev/experimental/RCTAppleHealthKit"
   }
 }