Skip to main content

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();

await AsyncStorage.setItem("ACCEPTED_YESTERDAY_SYNC", "true");
} 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";
import AsyncStorage from "@react-native-async-storage/async-storage";

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();

await AsyncStorage.setItem("ACCEPTED_YESTERDAY_SYNC", "true");
} 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,
},
});