Adding graphs to a React Native app
An example
import React from "react";
import { StyleSheet, View } from "react-native";
import WebView from "react-native-webview";
export default function App() {
return (
<View style={styles.container}>
<WebView
source={{ uri: "http://url/graphs/render?type=SLEEP_HR_SUMMARY&token=abc&bgcolor&textcolor&linecolor&unselectedcolor&timeperiod=MONTH&start_date=2023-03-02&display_value_mobile=true" }}
style={styles.graph}
onMessage={(event) => { // waits for message from html containing clicked on value
alert(event.nativeEvent.data); //alert containing value - could store in variable
}}
/>
<WebView
source={{ uri: "http://url/graphs/render?type=SLEEP_ASLEEP_SUMMARY&token=abc&bgcolor&textcolor&linecolor&unselectedcolor&timeperiod=TWO_WEEK&start_date=2023-04-02&display_value_mobile=false" }}
style={styles.graph}
onMessage={(event) => {
alert(event.nativeEvent.data);
}}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
paddingTop: 10
},
});
This example creates a simple app which displays two graphs; one beneath the other. The 'react-native-webview' library is used to display the graph which is served as an HTML file. The value of the point that the user has clicked on the graph is passed through to the React Native app from the HTML through a message which should be listened for using the onMessage
function. A message is sent containing the value every time a point is clicked; in this example, an alert is created each time but this could equally be stored to a variable.
Option for displaying value below graph
There is an option in the API request named display_value_mobile
which toggles whether the value selected on the graph is shown below. When this is set to false
, if the user taps on a point a small popout will display the value next to the point. With this option set to true
, the value is displayed below and the popout is disabled. By default, this option is set to false
and the effect of both of the options are shown below: