@quibr/react-native-screen-time-api NPM

React Native Screen Time API

Access the Screen Time API for iOS and Wellbeing API for Android (coming soon). This is far from complete and needs more work. Please don't hesitate to request specific screen time features

Installation

npm install react-native-screen-time-api

yarn add react-native-screen-time-api

Then run npx pod-install.

Usage

Add FamilyControls capability to your app

See https://developer.apple.com/documentation/Xcode/adding-capabilities-to-your-app

In addition to adding the Family Controls entitlement, for distribution, you will also need to request Family Controls capabilities

Open ios/[your-app]/[your-app].entitlements file, add this definition:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.developer.family-controls</key>
    <true/>
  </dict>
</plist>

Sample code

import { ScreenTime } from 'react-native-screen-time-api';

React.useEffect(() => {
  ScreenTime.requestAuthorization('individual').then(async () => {
    const status = await ScreenTime.getAuthorizationStatus();
    console.log('Authorization status:', status); // 'approved', 'denied', or 'notDetermined'
    if (status !== 'approved') {
      throw new Error('user denied screen time access');
    }
    const selection = await ScreenTime.displayFamilyActivityPicker();
    console.log('Family activity selection:', selection);
    // selection will be `null` if user presses cancel
    if (selection) {
      await ScreenTime.setActivitySelection(selection); // sets the shields
    }
  });
}, []);