Last active
July 20, 2018 23:02
-
-
Save chandler767/cb9394f36f5fd762493bb68ddaa395e4 to your computer and use it in GitHub Desktop.
UV Index Monitor App that subscribes to PubNub and displays the UV index value. Code snippets for blog post. See project here: https://github.com/chandler767/PubNub-UV-Index-Monitor/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {Component} from 'react'; | |
import {Platform, StyleSheet, Text, View} from 'react-native'; | |
type Props = {}; | |
export default class App extends Component<Props> { | |
render() { | |
return ( | |
); | |
} | |
} | |
const styles = StyleSheet.create({ | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
constructor(props) { | |
super(props); | |
this.state = { | |
uvindex: 0, | |
uvindexcolor: '#90EE90', | |
hidewebview: false, | |
} | |
// Init PubNub. Use your subscribe key here. | |
this.pubnub = new PubNubReact({ | |
subscribeKey: 'sub-key' | |
}); | |
this.pubnub.init(this); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
componentWillMount() { | |
// Subscribe to uvindex channel and get messages. | |
this.pubnub.subscribe({ | |
channels: ['uvindex'] | |
}); | |
// Update when a new value is received. | |
this.pubnub.getMessage('uvindex', (msg) => { | |
this.UpdateUV(msg.message.eon.uvindex) | |
}); | |
// Get and display last UV Index value. | |
this.pubnub.history( | |
{ | |
channel: 'uvindex', | |
count: 1, | |
}, | |
function (status, response) { | |
if (status.statusCode == 200) { | |
this.UpdateUV(response.messages[0].entry.eon.uvindex) | |
} | |
}.bind(this) | |
); | |
} | |
componentWillUnmount() { | |
// Unubscribe to uvindex channel. | |
this.pubnub.unsubscribe({ | |
channels: ['uvindex'] | |
}); | |
} | |
componentDidMount(){ | |
// Check the device orientation on load. | |
this.DetectOrientation(); | |
} | |
DetectOrientation(){ | |
// Hide and show webview. | |
if(Dimensions.get('window').width > Dimensions.get('window').height) // Landscape - Show webview. | |
{ | |
this.setState({ | |
hidewebview: true, | |
}); | |
} else { // Portrait - Hide webview. | |
this.setState({ | |
hidewebview: false, | |
}); | |
} | |
} | |
// Update the UV Index label and set background color. | |
UpdateUV(uvindex){ | |
this.setState({uvindex: uvindex}) | |
if (uvindex < 3) { // Low 0-2 | |
this.setState({uvindexcolor: '#90EE90'}); // Green | |
} else if ((uvindex >= 3) && (uvindex < 6)) { // Moderate 3-5 | |
this.setState({uvindexcolor: '#FFFF00'}); // Yellow | |
} else if ((uvindex >= 6) && (uvindex < 8)) { // High 6-7 | |
this.setState({uvindexcolor: '#FFBE4D'}); // Orange | |
} else if ((uvindex >= 8) && (uvindex < 11)) { // Very High 8-10 | |
this.setState({uvindexcolor: '#FF9999'}); // Red | |
} else if (uvindex >= 11) { // Extreme 11+ | |
this.setState({uvindexcolor: '#FF99FF'}); // Purple | |
}; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Get token and subscribe for push notifications. | |
RNFirebase.messaging().getToken().then(fcmToken => { | |
if (fcmToken) { | |
// console.log(fcmToken) | |
this.pubnub.push.addChannels( | |
{ | |
channels: ['uvindex'], | |
device: fcmToken, | |
pushGateway: 'gcm' // apns, gcm, mpns | |
}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, {Component} from 'react'; | |
import {StyleSheet, Text, View, Dimensions, WebView} from 'react-native' | |
import PubNubReact from 'pubnub-react'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Get refreshed token and subscribe for push notifications. | |
this.onTokenRefreshListener = RNFirebase.messaging().onTokenRefresh(fcmToken => { | |
// console.log(fcmToken) | |
this.pubnub.push.addChannels( | |
{ | |
channels: ['uvindex'], | |
device: fcmToken, | |
pushGateway: 'gcm' // apns, gcm, mpns | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
container: { | |
flex: 1, | |
justifyContent: 'center', | |
alignItems: 'center', | |
}, | |
welcome: { | |
fontSize: 45, | |
margin: 10, | |
paddingTop: 25, | |
color: '#000000', | |
}, | |
uvindex: { | |
fontSize: 100, | |
marginBottom: 15, | |
fontWeight: 'bold', | |
color: '#000000', | |
}, | |
webcontainer: { | |
top: 0, | |
left: 0, | |
bottom: 0, | |
right: 0, | |
position: 'absolute', | |
alignItems: 'flex-start', | |
}, | |
webview: { | |
top: 0, | |
left: 0, | |
position: 'absolute', | |
height: '100%', | |
width: '100%', | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Display the UV Index | |
<View style={[styles.container, {backgroundColor: this.state.uvindexcolor}]} onLayout={(event) => this.DetectOrientation()}> | |
<Text style={styles.welcome}>UV Index</Text> | |
<Text style={styles.uvindex}>{this.state.uvindex}</Text> | |
{ | |
this.state.hidewebview ? | |
<View style={styles.webcontainer}> | |
<WebView | |
style={styles.webview} | |
source={{uri: 'https://uvindex.chandlermayo.com/'}} | |
scalesPageToFit | |
javaScriptEnabled | |
domStorageEnabled | |
startInLoadingState/> | |
</View> : null | |
} | |
</View> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment