# AI consent screen

> A consent screen shown before personal data reaches a third-party AI service: it names the provider, lists what is sent and what is not, has an optional age tick, and offers a visible way to decline.

- Type: Component (screens)
- Access: Pro
- Page: https://goodui.dev/native/components/ai-consent-screen
- Markdown: https://goodui.dev/native/components/ai-consent-screen.md
- Registry item: https://goodui.dev/native/r/ai-consent-screen.json
- Dependencies: react-native-reanimated
- Keywords: react native ai consent, third party ai data sharing, app store guideline 5.1.2, data disclosure screen, privacy consent onboarding, age gate

## When to use

- Before the first call that sends a photo, prompt or other personal data to an outside AI service.
- Asking again after the provider or the data you send changes.

## When not to use

- AI that runs fully on the device: nothing leaves the phone, so there is nothing to consent to.
- As a replacement for a privacy policy: pass onPrivacy and link to yours.
- Verifying age: the tick is a self-declaration, not a check.

## Installation

With the shadcn CLI (needs a components.json in the Expo app), then `npx expo install --fix` so native dependencies match your Expo SDK. The foundation comes along the first time.

```bash
npx shadcn@latest add @goodui-native-pro/ai-consent-screen
npx expo install --fix
```

Pro: add `"@goodui-native-pro": { "url": "https://goodui.dev/native/r/pro/{name}.json", "headers": { "Authorization": "Bearer ${GOODUI_LICENSE_KEY}" } }` to the `registries` of components.json and put your license key in .env.local.

The component lands in `components/goodui-native/ai-consent-screen/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs button, checkbox, credits-meter, locale.

Built-in strings follow `<GooduiLocaleProvider>` (one [language pack](https://goodui.dev/native/r/locale-tr.json) translates the whole kit); the `labels` prop overrides them for one instance.

## Usage

```tsx
// app/consent.tsx
import { router } from "expo-router";
import { AiConsentScreen } from "@/components/goodui-native/ai-consent-screen/ai-consent-screen";

export default function Consent() {
  return (
    <AiConsentScreen
      provider="Acme AI"
      sent={["The photo you pick", "Your prompt"]}
      notSent={["Your contacts", "Your other photos"]}
      minimumAge={18}
      onAllow={() => {
        saveConsent(true); // Persist it yourself, with the provider name and the date.
        router.replace("/studio");
      }}
      onDecline={() => router.replace("/limited")}
      onPrivacy={() => openPrivacyPolicy()}
    />
  );
}
```

## API reference

### AiConsentScreen

`import { AiConsentScreen } from "@/components/goodui-native/ai-consent-screen/ai-consent-screen";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `provider` (required) | `string` | – | The AI service that receives the data, by name. Stores expect it spelled out. |
| `sent` (required) | `string[]` | – | Short lines: "The photo you pick", "Your prompt". |
| `notSent` (required) | `string[]` | – | Short lines: "Your contacts", "Your other photos". |
| `minimumAge` | `number` | – | Asks for an age tick before Agree. Omit for no age gate. |
| `providerMark` | `ReactNode` | – | The glyph at the far end of the flow. |
| `onAllow` (required) | `() => void` | – | – |
| `onDecline` (required) | `() => void` | – | – |
| `onPrivacy` | `() => void` | – | – |
| `labels` | `Partial<AiConsentLabels>` | – | – |
| `style` | `StyleProp<ViewStyle>` | – | Style for the outer container. |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- The title is a header, the age row is a checkbox with its state, and the privacy line is a link.
- The data-flow picture is hidden from screen readers: the body text says the same thing in words.

## Motion

- Three dots travel a wire from You to the provider on a loop.
- Reduced motion: the dots hold still on the wire.

## Haptics

- Agree uses the confirm cue.

## Performance

- Three animated views on the UI thread. The rest is static.

## Notes for AI

- Name the real provider in `provider`. List only what your app really sends in `sent`; do not soften it.
- The screen stores nothing. Save the answer, and do not send data until onAllow has run.
- Declining should leave the app usable where it can be. Do not loop people back to this screen.
- Translated copy is a starting point. Have a lawyer read it for the markets you ship to.

## Related

- [Permissions screen](https://goodui.dev/native/components/permissions-screen.md): A permission priming screen: each permission is a list row with a switch that asks the system only when turned on, a reminder preview drops in on a spring when notifications are allowed, a denial shows a banner with a way to Settings, and Not now is one tap away.
- [AI paywall screen](https://goodui.dev/native/components/ai-paywall-screen.md): A paywall for AI apps with weekly and yearly plans that each carry a credit allowance. The billed amount is always the largest price, weekly math stays in small text, the auto-renew line sits next to the buy button, and Terms, Privacy and Restore are always shown. check-kit fails if a price variant breaks this.
- [Report sheet](https://goodui.dev/native/components/report-sheet.md): A bottom sheet for reporting generated content: six reasons, a switch to hide similar content, and a thank-you state. It gives AI apps an in-app way to report results, which app stores expect of generated content.

## Guidance for AI tools

AI consent screen: A consent screen shown before personal data reaches a third-party AI service: it names the provider, lists what is sent and what is not, has an optional age tick, and offers a visible way to decline. Use only the documented props. Keep accessibility, reduced motion and both color schemes intact when adapting it.

Full library index: https://goodui.dev/native/llms.txt