Mood Picker

A row of faces for rating how something felt, from awful to great. The chosen face swells with a bounce and its name appears beneath it while the others dim. The faces form a radio group, so a screen reader reads each name and which one is chosen. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add mood-picker

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/mood-picker.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { MoodPicker } from "@/components/ui/mood-picker";

export default function Example() {
  const [mood, setMood] = useState<number | null>(null);

  return <MoodPicker value={mood} onChange={setMood} />;
}

Props