Shutter

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import Camera01Icon from "@hugeicons-pro/core-bulk-rounded/Camera01Icon";
import { HugeiconsIcon } from "@hugeicons/react-native";
import { Shutter } from "@terratcg/ui";

export default function ShutterDefault() {
  return (
    <Shutter
      accessibilityLabel="Take photo"
      onPress={() => {}}
      icon={({ color, size }) => <HugeiconsIcon icon={Camera01Icon} color={color} size={size} />}
    />
  );
}

ImportCopy Anchor Link

import { Shutter } from "@terratcg/ui";

UsageCopy Anchor Link

<Shutter
  accessibilityLabel="Take photo"
  loading={capturing}
  onPress={capture}
  icon={({ color, size }) => <CameraIcon color={color} size={size} />}
/>

The Shutter starts a capture; the camera and the capture are yours. Set loading while a capture is in flight: the face keeps its size, shows a spinner in place of the icon and ignores presses until you clear it. The icon is optional: pass a node, or a render function that receives the face's colour and the icon size.

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Loading holds the face with a spinner while a capture is in flight; disabled is flat and grey.

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import Camera01Icon from "@hugeicons-pro/core-bulk-rounded/Camera01Icon";
import { HugeiconsIcon } from "@hugeicons/react-native";
import { Shutter } from "@terratcg/ui";
import { View } from "react-native";

export default function ShutterStates() {
  return (
    <View style={{ flexDirection: "row", justifyContent: "center", gap: 24 }}>
      <Shutter loading accessibilityLabel="Saving photo" />
      <Shutter
        disabled
        accessibilityLabel="Take photo"
        icon={({ color, size }) => <HugeiconsIcon icon={Camera01Icon} color={color} size={size} />}
      />
    </View>
  );
}

SizeCopy Anchor Link

The face is 76 points across by default; size sets another diameter and the icon stays 28 points.

iOSAndroidTry it (web)

iPhone 17 Pro · iOS 27

Copy Text

import Camera01Icon from "@hugeicons-pro/core-bulk-rounded/Camera01Icon";
import { HugeiconsIcon } from "@hugeicons/react-native";
import { Shutter } from "@terratcg/ui";
import { View } from "react-native";

export default function ShutterSizes() {
  return (
    <View style={{ flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 24 }}>
      <Shutter
        size={56}
        accessibilityLabel="Take photo, small"
        onPress={() => {}}
        icon={({ color, size }) => <HugeiconsIcon icon={Camera01Icon} color={color} size={size} />}
      />
      <Shutter
        accessibilityLabel="Take photo"
        onPress={() => {}}
        icon={({ color, size }) => <HugeiconsIcon icon={Camera01Icon} color={color} size={size} />}
      />
    </View>
  );
}

PropsCopy Anchor Link

Shutter also accepts React Native's Pressable props, such as hitSlop and testID. SHUTTER_SIZE exports the default diameter, 76 points, for laying out the controls around it.

AccessibilityCopy Anchor Link

• Role: button, with accessibilityState keeping disabled (while disabled or loading) and busy (while loading) in sync. Your own accessibilityState is merged on top.
• Label: accessibilityLabel is required, since the face carries no text. Name the action: "Take photo".
• Touch target: the 76 point face is well over the 44 pt and 48 dp minimums. Keep any smaller size at 48 or more.
• Reduce Motion: the face no longer travels when pressed; the press tint stays.

Platform differencesCopy Anchor Link

• iOS and Android: the same domed face, ring and travel, with no ripple.
• Feedback: a press calls ThemeProvider's feedback handler with "press". A disabled or loading Shutter reports nothing. TerraUI plays no shutter sound or haptic itself.
• Web: Shutter renders through react-native-web for these docs, but the web is not a supported target.

RulesCopy Anchor Link

• One Shutter per screen, for the capture only. Other camera controls are Icon buttons.
• Set loading for as long as the capture runs, and clear it yourself: the Shutter never clears it.
• Use onPress, never onClick, and style props for layout only: the face's colours come from the theme.