Grant Permissions

ROOK SDK requires the user to explicitly grant permissions to access and extract data from Health Connect (Android) and Apple Health (iOS).

Request Permissions

useRookPermissions is a hook that provides functions useful for achieving this. The main functions are requestAllPermissions, which requests permissions to access data and displays a screen for proper permissions, and checkAvailability, which ensures that the services (Health Connect and Apple Health, respectively) are running on the device.

We recommend adding a screen for this purpose, like this:

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import { View, Text, Button, StyleSheet, Platform } from "react-native";
import { useRookPermissions } from "react-native-rook-sdk";

export const Permissions = () => {
  const [available, setAvailable] = useState(true);

  const {
    ready,
    requestAllPermissions,
    requestAndroidBackgroundPermissions,
    checkAvailability,
  } = useRookPermissions();

  useEffect(() => {
    checkAvailability().then((response) => {
      setAvailable(response === "INSTALLED");
    });
  }, [ready]);

  const handleRequestPermissions = async () => {
    try {
      // if you need to know if the user has requested permissions you need to save it on your localState
      // Like async Storage to save it
      await requestAllPermissions();

      // localStorage.setItem('permissionsRequested', true)
    } catch (error) {
      console.log(error);
    }
  };

  return (
    available && (
      <View style={styles.container}>
        <Text style={styles.message}>
          Please grant the necessary permissions
        </Text>
        <Button title="Solicitar Permisos" onPress={handleRequestPermissions} />
      </View>
    )
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  message: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: "center",
    color: "white",
  },
  extra: {
    marginTop: 50,
  },
});

Request Android Background Permissions

We highly recommend requesting another set of permissions to sync data in the background for Android. This step is only required for Android. To achieve this, add the following function to the previous screen:

const handleRequestBackgroundPermissions = async () => {
  try {
    // if you need to know if the user has requested permissions
    // you need to save it on your localState
    // Like async Storage to save it
    await requestAndroidBackgroundPermissions();
  } catch (error) {
    console.log(error);
  }
};

Finally your file should look like this.

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from "react";
import { View, Text, Button, StyleSheet, Platform } from "react-native";
import { useRookPermissions } from "react-native-rook-sdk";

export const Permissions = () => {
  const [available, setAvailable] = useState(true);

  const {
    ready,
    requestAllPermissions,
    requestAndroidBackgroundPermissions,
    checkAvailability,
  } = useRookPermissions();

  useEffect(() => {
    checkAvailability().then((response) => {
      setAvailable(response === "INSTALLED");
    });
  }, [ready]);

  const handleRequestPermissions = async () => {
    try {
      // if you need to know if the user has requested permissions you need to save it on your localState
      // Like async Storage to save it
      await requestAllPermissions();

      // localStorage.setItem('permissionsRequested', true)
    } catch (error) {
      console.log(error);
    }
  };

  const handleRequestBackgroundPermissions = async () => {
    try {
      // if you need to know if the user has requested permissions you need to save it on your localState
      // Like async Storage to save it
      await requestAndroidBackgroundPermissions();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    available && (
      <View style={styles.container}>
        <Text style={styles.message}>
          Please grant the necessary permissions
        </Text>
        <Button
          title="Request Permissions"
          onPress={handleRequestPermissions}
        />

        {Platform.OS === "android" && (
          <View style={styles.extra}>
            <Text style={styles.message}>
              Please grant the necessary permissions, to access to background
              services
            </Text>
            <Button
              title="Request Android Background Permissions"
              onPress={handleRequestBackgroundPermissions}
            />
          </View>
        )}
      </View>
    )
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  message: {
    fontSize: 18,
    marginBottom: 20,
    textAlign: "center",
    color: "white",
  },
  extra: {
    marginTop: 50,
  },
});