diff --git a/examples/StepsDemo/app/assets/images/steps.png b/examples/StepsDemo/app/assets/images/steps.png new file mode 100755 index 0000000000000000000000000000000000000000..a32c9940fe139b7d11f60be169ea8614e8139731 Binary files /dev/null and b/examples/StepsDemo/app/assets/images/steps.png differ diff --git a/examples/StepsDemo/app/assets/images/steps_alt.png b/examples/StepsDemo/app/assets/images/steps_alt.png new file mode 100644 index 0000000000000000000000000000000000000000..a246a4e2fc47af032838654dada59a43331a06fb Binary files /dev/null and b/examples/StepsDemo/app/assets/images/steps_alt.png differ diff --git a/examples/StepsDemo/app/components/home/history.js b/examples/StepsDemo/app/components/home/history.js index dd8aaa7a8eaeac5eb9d32fb2c0f2f6bfe412426e..65e897d735c0dc4cb37efdcf7319dfb56e5efdf3 100644 --- a/examples/StepsDemo/app/components/home/history.js +++ b/examples/StepsDemo/app/components/home/history.js @@ -14,6 +14,8 @@ import { View } from 'react-native'; import _ from 'lodash'; +import moment from 'moment'; + //import TimerMixin from 'react-timer-mixin'; //var reactMixin = require('react-mixin'); import styles from '../../styles/styles'; @@ -50,6 +52,7 @@ class History extends Component { return ( } /> @@ -57,6 +60,10 @@ class History extends Component { } _renderRow(rowData: Object, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) { + + let m = moment(rowData.startDate); + let formattedDate = m.format('MMM Do YYYY'); + return ( { //this._pressRow(rowID); @@ -64,9 +71,16 @@ class History extends Component { }}> - - {rowData.value + ' - ' + rowData.startDate} - + + + {rowData.value} + + + + + {formattedDate} + + diff --git a/examples/StepsDemo/app/components/home/index.js b/examples/StepsDemo/app/components/home/index.js index 933aab9f1156ac772218c0cff05b213d24db9edd..d31cb6f390fe8f1fc9c465045ba8e84eff44720a 100644 --- a/examples/StepsDemo/app/components/home/index.js +++ b/examples/StepsDemo/app/components/home/index.js @@ -7,22 +7,17 @@ import { Navigator, TouchableOpacity, ScrollView, + Image, 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 AppleHealthKit from 'react-native-apple-healthkit'; - +import styles from '../../styles/styles'; import History from './history'; +// setup the HealthKit initialization options const WPERMS = AppleHealthKit.Constants.Permissions.WRITE; const RPERMS = AppleHealthKit.Constants.Permissions.READ; - const HKOPTIONS = { permissions: { read: [ @@ -31,11 +26,15 @@ const HKOPTIONS = { RPERMS.FlightsClimbed, RPERMS.Height, ], - write: [WPERMS.StepCount], + write: [ + WPERMS.StepCount + ], } }; - +/** + * React Component + */ class Home extends Component { constructor(props) { @@ -46,11 +45,12 @@ class Home extends Component { }; } + /** + * if HealthKit is available on the device then initialize it + * with the permissions set above in HKOPTIONS. on successful + * initialization fetch today's steps and the step history + */ componentDidMount() { - - console.log('CONSTANTS: ', AppleHealthKit.Constants); - //console.log('balls: ', ahk); - AppleHealthKit.isAvailable((err,available) => { if(available){ AppleHealthKit.initHealthKit(HKOPTIONS, (err, res) => { @@ -64,10 +64,11 @@ class Home extends Component { }); } - componentWillUnmount() { - - } - + /** + * get today's step count from HealthKit. on success update + * the component state + * @private + */ _fetchStepsToday() { AppleHealthKit.getStepCountForToday(null, (err, steps) => { if(this._handleHKError(err, 'getStepCountForToday')){ @@ -77,6 +78,11 @@ class Home extends Component { }); } + /** + * get the step history from options.startDate through the + * current time. on success update the component state + * @private + */ _fetchStepsHistory() { let options = { startDate: (new Date(2016,4,1)).toISOString(), @@ -87,48 +93,13 @@ class Home extends Component { } this.setState({stepHistory: res}); }); - - AppleHealthKit.getDistanceWalkingRunning(null, (err, res) => { - if(this._handleHKError(err, 'getDistanceWalkingRunning')){ - return; - } - console.log('getDistanceWalkingRunning -res-> ', res); - }); - - - AppleHealthKit.getFlightsClimbed(null, (err, res) => { - if(this._handleHKError(err, 'getFlightsClimbed')){ - return; - } - console.log('getFlightsClimbed -res-> ', res); - }); - - - - let sampleOptions = { - startDate: (new Date(2016,4,1)).toISOString(), - }; - - AppleHealthKit.getHeightSamples(sampleOptions, (err, samples) => { - if(this._handleHKError(err, 'getHeightSamples')){ - return; - } - console.log('getHeightSamples: ', samples); - }); - - - } - - _onPressItem(key) { - console.log('_onPressItem() ==> ', key); - let self = this; - this.requestAnimationFrame(() => { - this.props.navigator.push({ - name: key - }); - }) } + /** + * render the Navigator which will render the navigation + * bar and the scene + * @returns {XML} + */ render() { return ( - - STEPS: {this.state.stepsToday} + + + + + Today's Steps + + + {this.state.stepsToday} + + + History + + @@ -159,30 +148,39 @@ class Home extends Component { ); } + /** + * if 'err' is truthy then log the error message and + * return true indicating an error has occurred + * @param err + * @param method + * @returns {boolean} + * @private + */ _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; - } + errStr += (err && err.message) ? err.message : err; 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; + return ( + { navigator.parentNavigator.push({name: 'Add'})}}> + + + + + + ); }, Title(route, navigator, index, nextState) { return ( @@ -195,6 +193,5 @@ var NavigationBarRouteMapper = { } }; - module.exports = Home; export default Home; diff --git a/examples/StepsDemo/app/styles/styles.js b/examples/StepsDemo/app/styles/styles.js index d580d2a3ff697ea1d0a533136434e0d2856d4dcb..d1e1936e575bdd940c995dcb5a967fc6ec8dc02c 100644 --- a/examples/StepsDemo/app/styles/styles.js +++ b/examples/StepsDemo/app/styles/styles.js @@ -36,30 +36,81 @@ const styles = StyleSheet.create({ margin: 10, fontSize: 18 }, - + navbarPlusButton: { + fontSize:33, + marginRight:13, + color: '#FD2D55', + top: -3 + }, stepsContainer: { height:100, - backgroundColor: '#FF8000', + backgroundColor: '#FAFAFA', + //backgroundColor: '#FF8000', + }, + + stepsIcon: { + width: 60, + height: 60, + marginLeft: 20, + marginTop: 20, + //marginTop: 50, + //backgroundColor: 'transparent', + alignSelf: 'flex-start', + }, + + stepsLabel: { + fontSize:12, + color: '#FD2D55', + position:'absolute', + left: 105, + top:11, }, + stepsValue: { + fontSize:50, + color: '#47a292', + position:'absolute', + left: 105, + top:25, + }, + + historyContainer: { flex: 1, - backgroundColor: '#0088cc', + //backgroundColor: '#0088cc', }, + titleRow: { + height:40, + alignItems: 'center', + //backgroundColor: '#FF00FF' + borderTopColor: '#DDDDDD', + borderBottomColor: '#DDDDDD', + borderTopWidth: 1, + borderBottomWidth: 1, + paddingTop:10, + backgroundColor: '#EFEFEF', + }, + + listViewRow: { flexDirection: 'row', justifyContent: 'center', padding: 10, backgroundColor: '#F6F6F6', + borderBottomColor: '#DADADA', + borderBottomWidth: 1, }, + + + row_1_3: { flex: 0.33, flexDirection:'column', @@ -74,6 +125,22 @@ const styles = StyleSheet.create({ //backgroundColor: '#0088cc' }, + + col_1_3: { + flex: 0.33, + flexDirection:'row', + padding:10, + //backgroundColor: '#FF8000' + }, + + col_2_3: { + flex: 0.66, + flexDirection:'row', + padding:10, + //backgroundColor: '#0088cc' + }, + + borderTopLightGrey: { borderTopColor: '#CCCCCC', borderTopWidth: 1,