react-native-play-age-range-declaration

A React Native Nitro Module providing a unified API for age-appropriate experiences across platforms — bridging:

• 🟢 Google Play Age Signals API (Android)
• 🔵 Apple Declared Age Range API (iOS 26+)

[!IMPORTANT]

• Works in both Expo & Bare (Non Expo) React Native projects.
• Works well in both Android & iOS - Special thanks to https://github.com/luigiinred for helping out test on real Android & iOS devices to finalise the APIs.
• Will start working properly from January 1st 2026, as mentioned by Apple & Google.

📦 Installation

npm install react-native-play-age-range-declaration react-native-nitro-modules

[!NOTE]

• The APIs for Apple's Declared Age Range and the android play age works in iOS 26 and in Android 15+ as I have tested in real device and I have attached a gif showing the workings of it.

Demo

🧠 Overview

| Platform | API Used | Purpose | | ----------- | ------------------------------------------------------------ | -------------------------------------------------- | | Android | Play Age Signals API (com.google.android.play:age-signals) | Detect user supervision / verified status | | iOS | Declared Age Range API (AgeRangeService.requestAgeRange) | Get user’s declared age range (e.g., 13–15, 16–17) |

Configuration

iOS: Add the below entitlement to your project:

com.apple.developer.declared-age-range

Android: No extra configuration needed, but for this API to work, you have to have play console installed in your android device.

⚙️ Usage

Initialize the package

[!NOTE] iOS Only: setAgeRangeThresholds is only required for iOS. Android does not require this initialization.

Before using getIsConsideredOlderThan on iOS, or getAppleDeclaredAgeRangeStatus you must initialize the package by calling setAgeRangeThresholds with an array of age thresholds. This should include the different ages that gate content in your app

import { setAgeRangeThresholds } from 'react-native-play-age-range-declaration';

setAgeRangeThresholds([13, 15]);

Requirements:

• First threshold is required
• Values must be between 1 and 18 (inclusive)
• Values must be in ascending order
• Values must be at least 2 years apart

Examples:

setAgeRangeThresholds([13]);           // Single threshold at 13
setAgeRangeThresholds([13, 15]);       // Two thresholds at 13 and 15
setAgeRangeThresholds([13, 15, 17]);   // Three thresholds at 13, 15, and 17

[!WARNING] iOS Permission Re-prompt: If you change the age thresholds after the user has already granted permission, iOS will re-prompt the user for permission. It's recommended to set the thresholds once at app startup and keep them consistent.

Checking if the user is allowed to access age-gated content

Use getIsConsideredOlderThan to check if a user is allowed to access age-gated content. This function works on both iOS and Android and returns true if the user is considered older than the specified age.

import { getIsConsideredOlderThan } from 'react-native-play-age-range-declaration';

// Check if user is older than 18
const canAccessGatedContent = await getIsConsideredOlderThan(16);

if (canAccessGatedContent) {
  // Show 16+ content
} else {
  // Show age restriction message
}

Behavior:

• Returns true if the user is not in an applicable region where we are legally required to show the age verification prompt
• Returns true if the user is older than or equal to the specified age
• Returns true if the user has parental approval to view content
• Returns false in all other cases

Example: Gating content based on age

const [isLoading, setIsLoading] = useState<boolean>(false);
const [canAccessContent, setCanAccessContent] = useState<boolean>(false);

const checkAgeRestriction = async () => {
  const getIsConsideredOlderThan18 = await getIsConsideredOlderThan(18);
  setCanAccessContent(getIsConsideredOlderThan18);
};

// In your component
{ !isLoading && checkAgeRestriction ? (
  <AgeGatedContent />
) : (
  <AgeRestrictionMessage />
)}

Full Example

import { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ActivityIndicator,
  ScrollView,
  Platform,
  Pressable,
} from 'react-native';

import {
  getAndroidPlayAgeRangeStatus,
  getAppleDeclaredAgeRangeStatus,
  type PlayAgeRangeDeclarationResult,
  type DeclaredAgeRangeResult,
  PlayAgeRangeDeclarationUserStatusString,
  getIsConsideredOlderThan,
  setAgeRangeThresholds,
} from 'react-native-play-age-range-declaration';

setAgeRangeThresholds([13, 15]);

export default function App() {
  const [androidResult, setAndroidResult] =
    useState<PlayAgeRangeDeclarationResult | null>(null);

  const [appleResult, setAppleResult] = useState<DeclaredAgeRangeResult | null>(
    null
  );

  const [isConsideredOlderThan18, setIsConsideredOlderThan18] = useState<
    boolean | null
  >(null);
  const [isConsideredOlderThan15, setIsConsideredOlderThan15] = useState<
    boolean | null
  >(null);
  const [isConsideredOlderThan13, setIsConsideredOlderThan13] = useState<
    boolean | null
  >(null);

  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  const fetchStatus = async () => {
    try {
      setLoading(true);

      setError(null);

      if (Platform.OS === 'android') {
        const data = await getAndroidPlayAgeRangeStatus();

        setAndroidResult(data);
      } else {
        const data = await getAppleDeclaredAgeRangeStatus();

        setAppleResult(data);
      }

      setIsConsideredOlderThan18(await getIsConsideredOlderThan(18));
      setIsConsideredOlderThan15(await getIsConsideredOlderThan(15));
      setIsConsideredOlderThan13(await getIsConsideredOlderThan(13));
    } catch (err: any) {
      console.error('❌ Failed to fetch Age Signals:', err);
      const msg =
        err?.message ??
        err?.nativeStackAndroid ??
        'Unknown error retrieving Play Age Signals';
      setError(msg);
    } finally {
      setLoading(false);
    }
  };

  const title =
    Platform.OS === 'ios'
      ? 'Apple Declared Age Range Demo'
      : 'Google Play Age Signals Demo';

  return (
    <View style={styles.container}>
      <Text style={styles.header}>{title}</Text>

      {loading ? (
        <ActivityIndicator size="large" color="#007aff" />
      ) : error ? (
        <View style={styles.errorBox}>
          <Text style={styles.errorTitle}>Error</Text>
          <Text style={styles.errorText}>{error}</Text>
        </View>
      ) : (
        <ScrollView style={styles.resultBox}>
          {Platform.OS === 'ios' ? (
            <Text style={styles.resultText}>
              Is Eligible: {appleResult ? String(appleResult?.isEligible) : ''}{' '}
              {`\n`}
              Status: {appleResult ? appleResult?.status : ''} {`\n`}
              ParentControls: {appleResult
                ? appleResult?.parentControls
                : ''}{' '}
              {`\n`}
              Lower Bound: {appleResult ? appleResult?.lowerBound : ''} {`\n`}
            </Text>
          ) : (
            <Text style={styles.resultText}>
              Is Eligible:{' '}
              {androidResult ? String(androidResult?.isEligible) : ''} {`\n`}
              Install Id: {androidResult ? androidResult?.installId : ''} {`\n`}
              User Status:{' '}
              {androidResult && androidResult.userStatus
                ? PlayAgeRangeDeclarationUserStatusString[
                    androidResult?.userStatus
                  ]
                : ''}
              {'\n'}
              Most Recent Approval Date:{' '}
              {androidResult ? androidResult?.mostRecentApprovalDate : ''}
              {''}
              {`\n`}
              Age Lower: {androidResult ? androidResult?.ageLower : ''} {`\n`}
              Age Upper: {androidResult ? androidResult?.ageUpper : ''} {`\n`}
              Error: {androidResult ? androidResult?.error : ''} {`\n`}
            </Text>
          )}

          {isConsideredOlderThan18 ? (
            <Text style={styles.resultText}>
              This is only visible to users older than 18
            </Text>
          ) : (
            <Text style={styles.resultText}>The user is younger than 18</Text>
          )}
          {isConsideredOlderThan15 ? (
            <Text style={styles.resultText}>
              This is only visible to users older than 15
            </Text>
          ) : (
            <Text style={styles.resultText}>The user is younger than 15</Text>
          )}
          {isConsideredOlderThan13 ? (
            <Text style={styles.resultText}>
              This is only visible to users older than 13
            </Text>
          ) : (
            <Text style={styles.resultText}>The user is younger than 13</Text>
          )}
        </ScrollView>
      )}

      <Pressable style={styles.button} onPress={fetchStatus}>
        <Text style={styles.buttonTitle}>Check</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f4f6f8',
    alignItems: 'center',
    justifyContent: 'center',
  },
  header: {
    fontSize: 20,
    fontWeight: '700',
    marginBottom: 20,
  },
  resultBox: {
    maxHeight: 240,
    width: '100%',
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 12,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 6,
    elevation: 2,
  },
  resultText: {
    fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace' }),
    fontSize: 13,
    color: '#333',
  },

  button: {
    backgroundColor: '#2fe5e5',
    borderRadius: 10,
    padding: 12,
    width: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },

  buttonTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: 'black',
  },

  errorBox: {
    backgroundColor: '#ffe5e5',
    borderRadius: 10,
    padding: 12,
    width: '100%',
  },
  errorTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#b00020',
    marginBottom: 4,
  },
  errorText: {
    color: '#b00020',
    fontSize: 14,
  },
});

🔍 Understanding isEligible

Both result types include an isEligible boolean field that indicates whether age-related features are available and applicable for the current user:

• true: The user is in a region where age verification is legally required.
• false: The user is not in an applicable region, if isEligible is false we should be allow to let users view age gated content (Not verified by a laywer)

🧩 Supported Platforms

| Platform | Status | | ----------------- | ----------------------- | | Android | ✅ Supported (SDK Beta) | | iOS 26+ | ✅ Supported | | iOS Simulator | ⚠️ Not supported | | AOSP Emulator | ⚠️ Not supported |

🤝 Contributing

Pull requests welcome!

• Development Workflow
• Sending a PR
• Code of Conduct

🪪 License

MIT © Gautham Vijayan

Made with ❤️ and Nitro Modules