Home / Components / review-prompt

Review PromptiOS

Branded rating prompt sheet — staggered star cascade, spring fill on pick, submit reveal; decides when to hand off to the store

$ npx lumioui add review-prompt

import { ReviewPrompt } from "@/components/ui/review-prompt/review-prompt";

Props10

visible?	boolean	Show/hide — exits animate down.
onDismiss?	() => void
onRate?	(stars: number) => void	Fired with 1–5 when a star is tapped.
onSubmit?	(stars: number) => void	Submit tap — usually route to store review or feedback form.
title?	string
message?	string
submitLabel?	string	Button under the stars once rated. Default "Submit review".
dismissLabel?	string	"Not now" label. Default "Maybe later".
defaultRating?	number	Preselected rating. Default 0.
className?	string

Review Promptprompt.tsx

review-prompt/variants/prompt.tsx open

Branded rating prompt sheet — staggered star cascade, spring fill on pick, submit reveal; decides when to hand off to the store

import { ReviewPromptDemo } from "@/components/ui/review-prompt/variants/prompt";

export function Example() {
  return (
    <ReviewPromptDemo />
  );
}

import * as React from "react";
import { View } from "react-native";
import { ReviewPrompt } from "../review-prompt";
import { Ambient, Button, Glass, Icon, Text } from "@lumioui/ui";

/** ReviewPromptDemo — prompt appearing after the order completes. */
export function ReviewPromptDemo() {
  const [show, setShow] = React.useState(false);
  const [stars, setStars] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <View className="relative w-full overflow-hidden rounded-3xl">
      <Ambient seed="review-prompt-prompt" />
      <View className="w-full gap-3 p-4">
        <Glass interactive curvature="edge" className="w-full gap-3 rounded-2xl p-4">
          <View className="flex-row items-center gap-2.5">
            <View className="h-9 w-9 items-center justify-center rounded-full bg-success/10">
              <Icon name="check-circle" size="md" color="success" />
            </View>
            <View className="flex-1">
              <Text variant="small" className="font-semibold">Order #8421 delivered</Text>
              <Text variant="muted" className="text-xs">Tonkotsu ×2 · 22 min · Diego left it at the blue door</Text>
            </View>
          </View>

          {submitted ? (
            <Glass interactive curvature="edge" className="items-center gap-1 rounded-xl px-3 py-3">
              <Text variant="small" className="font-medium">Thanks for the {stars}★ review</Text>
              <Text variant="muted" className="text-xs">Sent to the store rating flow</Text>
            </Glass>
          ) : show ? (
            <ReviewPrompt
              title="Enjoying Lumio deliveries?"
              message="Rate us — it decides whether we hand you to the App Store flow."
              onRate={setStars}
              onSubmit={(n) => { setStars(n); setSubmitted(true); setShow(false); }}
              onDismiss={() => setShow(false)}
              className="border-0 bg-transparent"
            />
          ) : (
            <Button variant="glass" size="sm" onPress={() => setShow(true)}>
              Show review prompt
            </Button>
          )}
        </Glass>
      </View>
    </View>
  );
}