# Report sheet

> 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.

- Type: Component (overlays)
- Access: Free, open source (MIT)
- Page: https://goodui.dev/native/components/report-sheet
- Markdown: https://goodui.dev/native/components/report-sheet.md
- Registry item: https://goodui.dev/native/r/report-sheet.json
- Dependencies: none
- Keywords: react native report content, ai content moderation, flag result, report and block, app store ugc requirement

## When to use

- On every AI result that a person can see, save or share.
- On personas or styles that other people made.

## When not to use

- Reporting another user's profile or message: the reasons and copy are written for AI results.
- General feedback: use a feedback form.

## 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 https://goodui.dev/native/r/report-sheet.json
npx expo install --fix
```

The component lands in `components/goodui-native/report-sheet/` and imports the foundation from `components/goodui-native/foundation/` with relative paths; it also installs bottom-sheet, button, locale, switch.

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
import { useState } from "react";
import { Button } from "@/components/goodui-native/button/button";
import { ReportSheet } from "@/components/goodui-native/report-sheet/report-sheet";

const [open, setOpen] = useState(false);

<Button variant="ghost" onPress={() => setOpen(true)}>Report</Button>
<ReportSheet open={open} onOpenChange={setOpen} onSubmit={(report) => sendToModeration(resultId, report)} />
```

## API reference

### ReportSheet

`import { ReportSheet } from "@/components/goodui-native/report-sheet/report-sheet";`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` (required) | `boolean` | – | – |
| `onOpenChange` (required) | `(open: boolean) => void` | – | – |
| `onSubmit` (required) | `(report: { reason: ReportReason; block: boolean }) => unknown` | – | Receives the report. Return a promise: the button shows loading, and a rejection keeps the sheet open to try again. |
| `labels` | `Partial<ReportSheetLabels>` | – | – |
| `testID` | `string` | – | Identifier for end-to-end tests. |

## Accessibility

- The sheet is named by its title. Reasons are a radio group with their state, and Submit is disabled until one is chosen.

## Motion

- Inherits the bottom-sheet springs. The sheet resizes for the thank-you state.

## Haptics

- select on a reason, send on submit.

## Performance

- Nothing runs while closed.

## Notes for AI

- The default copy promises that a person on your team reviews reports. Run that process, or override subtitle and thanksBody with what you really do.
- Return a promise from onSubmit: the button shows loading, and a rejection keeps the sheet open to try again.
- Attach the result id yourself; the sheet only knows the reason and the block choice.
- The Hide content like this switch only reports the choice. Your app has to do the hiding.

## Related

- [Bottom sheet](https://goodui.dev/native/components/bottom-sheet.md): A sheet that rests at detents, follows the finger 1:1, settles with velocity and hands drags off to its scroll view.
- [AI consent screen](https://goodui.dev/native/components/ai-consent-screen.md): 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.
- [Before and after](https://goodui.dev/native/components/before-after.md): Drag a handle across two pictures to compare them. The handle follows the finger on the UI thread, with a cue at the midpoint and at each end, and plays one short sweep on mount to show it can be dragged.

## Guidance for AI tools

Report sheet: 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. 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