# 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
## Table of Contents
- [Installation](#installation)
- [Set up for iOS](#set-up-for-ios)
- [Configure Podfile](#configure-podfile)
- [Add FamilyControls capability to your app](#add-familycontrols-capability-to-your-app)
- [Request Family Controls capabilities](#request-family-controls-capabilities)
- [Sample code](#sample-code)
- [Contributing](#contributing)
- [Contributors](#contributors)
## Installation
```sh
npm install react-native-screen-time-api
```
or
```sh
yarn add react-native-screen-time-api
```
## Set up for iOS
### Configure Podfile
Ensure that your deployment target is set to iOS 16.0 or higher in your Xcode project and ios/Podfile
```podfile
platform :ios, '16.0'
```
Always run `npx pod-install` after installing or updating this package.
### Add FamilyControls capability to your app
See https://developer.apple.com/documentation/Xcode/adding-capabilities-to-your-app
Open `ios/[your-app]/[your-app].entitlements` file, add this definition:
```xml
com.apple.developer.family-controls
```
### Request Family Controls capabilities
In addition to adding the Family Controls entitlement, for distribution, you will also need to [request Family Controls capabilities](https://developer.apple.com/contact/request/family-controls-distribution)
## Sample code
```typescript
import React from 'react';
import {
StyleSheet,
Text,
TouchableHighlight,
View,
} from 'react-native';
import { FamilyActivitySelection, ScreenTime } from 'react-native-screen-time-api';
const MyApp = () => {
const [activitySelection, setActivitySelection] = React.useState();
const selectActivities = React.useCallback(async () => {
try {
await ScreenTime.requestAuthorization('individual');
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) {
setActivitySelection(selection);
await ScreenTime.setActivitySelection(selection); // sets the shields
}
} catch (error) {
console.error(error);
}
}, []);
const getNames = React.useCallback(async () => {
try {
if (!activitySelection) {
throw new Error('no activity selection');
}
const applicationName = await ScreenTime.getApplicationName(activitySelection.applicationTokens[0]);
console.log('First Application:', applicationName);
const categoryName = await ScreenTime.getCategoryName(activitySelection.categoryTokens[0]);
console.log('First Category:', categoryName);
} catch (error) {
console.error(error);
}
}, [activitySelection]);
return (
selectActivities() }>
Select Activities
{activitySelection && (
getNames() }>
Get Names
)}
);
};
const styles = StyleSheet.create({
view: {
alignItems: 'center',
flexDirection: 'column',
flexGrow: 1,
backgroundColor: 'white',
gap: 6,
justifyContent: 'center',
},
});
export default MyApp;
```
## Contributing
To contribute feel free to either make a PR or request to be added as a collaborator. Once your feature is added you may also add yourself to the Contributors list below.
To begin development, clone the repository and open [`/ScreenTimeExample/ios/ScreenTimeExample.xcworkspace`](https://github.com/NoodleOfDeath/react-native-screen-time-api/tree/main/ScreenTimeExample/ios/ScreenTimeExample.xcworkspace) directory. This will open the example project in Xcode. You can then run the project in the simulator or on a physical device. You may need to run `yarn install` followed by `npx pod-install` inside the `ScreenTimeExample` directory to install the necessary pods.
You can first modify the code under `Pods/Development Pods/ReactNativeScreenTimeAPI` while debugging or tryng to add new features. Once you are satisfied with your changes, you will need to copy your files and changes to the [`ReactNativeScreenTimeAPI` project](https://github.com/NoodleOfDeath/react-native-screen-time-api/tree/main/ios/ReactNativeScreenTimeAPI.xcodeproj) under the `Pods` project, then make a pull request.
## Contributors
