Report sheet

Free · MITReact Native · Expo

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.

View as Markdown

Look

Try it on your phone

Scan to open this demo in your phone's browser and use it with your fingers.

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/report-sheet.json

Then run npx expo install --fix so dependencies match your Expo SDK. Files land in components/goodui-native/report-sheet.

Usage

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)} />

When to use

Use it for

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

Reach for something else

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

API reference

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

Motion and haptics

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

Haptic: select on a reason, send on submit.

Nothing runs while closed.

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

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.

Bottom sheet

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

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

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.