React Native

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:

`true`

Set totrue

`false`

Set tofalse

An example app visualization

Example app

Example app