Skip to content

R
rn-apple-healthkit
Commit 61fdf8a2 authored by Greg Wilson's avatar Greg Wilson
Browse files
Options

StepsDemo app mostly functional

parent 419c257e
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 75 deletions
examples/StepsDemo/app/components/home/history.js
View file @ 61fdf8a2
......@@ -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 (
<ListView
dataSource={this.state.dataSource}
enableEmptySections={true}
renderRow={this._renderRow}
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
/>
......@@ -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 (
<TouchableHighlight onPress={() => {
//this._pressRow(rowID);
......@@ -64,9 +71,16 @@ class History extends Component {
}}>
<View>
<View style={styles.listViewRow}>
<Text style={{flex:1,}}>
{rowData.value + ' - ' + rowData.startDate}
</Text>
<View style={styles.col_1_3}>
<Text style={{flex:1, fontWeight: '600'}}>
{rowData.value}
</Text>
</View>
<View style={styles.col_2_3}>
<Text style={{flex:1, textAlign: 'right',}}>
{formattedDate}
</Text>
</View>
</View>
</View>
</TouchableHighlight>
......
examples/StepsDemo/app/components/home/index.js
View file @ 61fdf8a2
......@@ -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 (
<Navigator
......@@ -141,17 +112,35 @@ class Home extends Component {
);
}
/**
* render the scene
* @param route
* @param navigator
* @returns {XML}
*/
renderScene(route, navigator) {
return (
<View style={styles.sceneContainerWithNavbar}>
<View style={styles.stepsContainer}>
<Text>
STEPS: {this.state.stepsToday}
<Image style={styles.stepsIcon}
source={require('../../assets/images/steps.png')}>
</Image>
<Text style={styles.stepsLabel}>
Today's Steps
</Text>
<Text style={styles.stepsValue}>
{this.state.stepsToday}
</Text>
</View>
<View style={styles.historyContainer}>
<View style={styles.titleRow}>
<Text>
History
</Text>
</View>
<History data={this.state.stepHistory} />
</View>
......@@ -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 (
<TouchableOpacity style={styles.navbarTitleTouchable}
onPress={() => { navigator.parentNavigator.push({name: 'Add'})}}>
<Text style={styles.navbarPlusButton}>
+
</Text>
</TouchableOpacity>
);
},
Title(route, navigator, index, nextState) {
return (
......@@ -195,6 +193,5 @@ var NavigationBarRouteMapper = {
}
};
module.exports = Home;
export default Home;
examples/StepsDemo/app/styles/styles.js
View file @ 61fdf8a2
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment