Embed a live camera preview and capture photos or video. Use it for a scanner or a custom capture screen.

Capture a photo and preview the result

tsx
import { Button, Camera, Image, VStack, cameraRef, signal } from 'kuito';

export default function Snap() {
  const camera = cameraRef();
  const photo = signal<string | null>(null);

  async function take() {
    try {
      const picture = await camera.current?.takePicture({ quality: 0.8 });

      photo.value = picture?.uri ?? null;
    } catch (error) {
      console.log('No picture:', error);
    }
  }

  return (
    <VStack flex={1}>
      <Camera
        ref={camera}
        flex={1}
        facing="back"
        onError={(event) => console.log(event.code, event.message)}
      />
      <Button disabled={!camera.ready.value} onPress={() => void take()}>
        Take picture
      </Button>
      {photo.value ? <Image src={photo.value} width={96} height={96} /> : null}
    </VStack>
  );
}

Behavior

Declare camera permission in config; recording with audio also needs microphone permission. Wait for camera.ready before calling methods. Captures return cache files, so copy a result to documents when it must persist. Test capture on a physical device.

Continue

Read Permissions for a complete workflow. See the complete prop reference for types and documented defaults.

Reference

Signatures

ts
(props: NativeViewProps<CameraProps, CameraMethods>): KuitoElement

Parameters

NameTypeRequiredDescription
propsNativeViewProps<CameraProps, CameraMethods>Yes—

Returns

KuitoElement

Props: NativeViewProps<CameraProps, CameraMethods>

Props (including inherited props) 93

NameTypeRequiredDescription
opacityAnimatable<number>No—
backgroundColorAnimatable<string>No—
borderRadiusAnimatable<number>No—
borderColorAnimatable<string>No—
widthAnimatable<SizeValue>No—
heightAnimatable<SizeValue>No—
translateXAnimatable<number>No—
translateYAnimatable<number>No—
scaleAnimatable<number>No—
scaleXAnimatable<number>No—
scaleYAnimatable<number>No—
rotateAnimatable<number>NoDegrees.
shadowColorAnimatable<string>No—
shadowRadiusAnimatable<number>No—
shadowOffsetXAnimatable<number>No—
shadowOffsetYAnimatable<number>No—
hiddenProp<boolean>NoTakes the view out of layout and off screen, as CSS display: none.
paddingProp<LengthPercentage>No—
positionProp<"relative" | "absolute">No—
idstringNo—
classProp<ClassNames>NoClass names from a .css import or styles(): a string, or a list with falsy entries skipped, following the signals it reads.
styleStyleDeclarationsNoStyles of this view alone, compiled at build time: CSS properties in camelCase. A value that changes must set a native prop (opacity).
keystring | numberNo—
paddingTopProp<LengthPercentage>No—
paddingRightProp<LengthPercentage>No—
paddingBottomProp<LengthPercentage>No—
paddingLeftProp<LengthPercentage>No—
minWidthProp<SizeValue>No—
maxWidthProp<SizeValue>No—
minHeightProp<SizeValue>No—
maxHeightProp<SizeValue>No—
aspectRatioProp<number>NoWidth divided by height; sizes the missing side from the other.
topProp<LengthPercentageAuto>No—
rightProp<LengthPercentageAuto>No—
bottomProp<LengthPercentageAuto>No—
leftProp<LengthPercentageAuto>No—
marginProp<LengthPercentageAuto>No—
marginTopProp<LengthPercentageAuto>No—
marginRightProp<LengthPercentageAuto>No—
marginBottomProp<LengthPercentageAuto>No—
marginLeftProp<LengthPercentageAuto>No—
flexGrowProp<number>No—
flexShrinkProp<number>No—
flexBasisProp<SizeValue | "content">No—
flexProp<number>NoA grow factor from a zero basis, as CSS flex: n; 0 is inflexible.
alignSelfProp<"auto" | SelfAlignment>No—
directionProp<"ltr" | "rtl">NoThe way lines run; unset, the parent's, and the app's first language's at the root.
boxSizingProp<"border-box" | "content-box">No—
paddingInlineStartProp<LengthPercentage>NoPadding on the side lines start from: the left in ltr, the right in rtl.
paddingInlineEndProp<LengthPercentage>NoPadding on the side lines end at: the right in ltr, the left in rtl.
marginInlineStartProp<LengthPercentageAuto>NoMargin on the side lines start from: the left in ltr, the right in rtl.
marginInlineEndProp<LengthPercentageAuto>NoMargin on the side lines end at: the right in ltr, the left in rtl.
insetInlineStartProp<LengthPercentageAuto>Noleft in ltr, right in rtl.
insetInlineEndProp<LengthPercentageAuto>Noright in ltr, left in rtl.
roleProp<Role>No—
onAction(event: AccessibilityActionEvent) => voidNoThe screen reader action taken, by name.
accessibleProp<boolean>NoMakes the view one screen reader element, read as its label or its children's text.
labelProp<string>NoWhat a screen reader says for the view.
hintProp<string>NoWhat happens when the view is activated, read after the label.
aria-hiddenProp<boolean>NoScreen readers skip the view and its subtree.
actionsProp<readonly AccessibilityAction[]>NoActions a screen reader offers; onAction receives the one taken.
liveProp<"off" | "polite" | "assertive">NoARIA's aria-live: announces changes to the view's content, on iOS too.
aria-disabledProp<boolean>No—
aria-selectedProp<boolean>No—
aria-checkedProp<boolean | "mixed">No—
aria-busyProp<boolean>No—
aria-expandedProp<boolean>No—
aria-valueminProp<number>No—
aria-valuemaxProp<number>No—
aria-valuenowProp<number>No—
aria-valuetextProp<string>No—
gesturesreadonly Composable[]NoThe view's gestures; several race unless composed with together or orElse.
transitionPartial<Record<"opacity" | "backgroundColor" | "transform" | "borderRadius" | "borderColor" | "shadow" | "width" | "height" | "all", Animation<unknown> | AnimationSpec>>NoHow the animatable props move when they change, enter or leave, by group; a CSS transition compiles to it.
animatePartial<Record<AnimatableProps, string | number>>NoAnimatable props whose every change moves as transition says; the first value applies at once.
enterEffectNoWhere the view enters from: fade.and(slide.up(12)).
exitProp<Effect>NoWhere the view leaves to; it stays on screen until it is there. The renderer gets true, and keeps the view until exited.
layoutAnimation<number>NoHow the view moves to a new frame the layout gives it: layout={spring()}.
overflowProp<"visible" | "hidden" | "clip" | "scroll">Nohidden and scroll clip; as in CSS, either lets a flex item shrink below its content.
borderWidthProp<number>No—
backgroundGradient{ angle: number; colors: string[];}No—
colorProp<string>No—
sharedIdProp<string>NoA view the navigation stack flies to the view with the same sharedId on the screen it pushes or pops to (docs/navigation.md#shared-elements).
refElementRef<NativeViewHandle<CameraMethods>>No—
facingBound<CameraFacing>Noback by default.
flashBound<CameraFlash>Nooff by default.
torchBound<boolean>NoKeeps the light on while the preview runs.
zoomBound<number>NoFrom 0 (none) to 1 (the most the camera can), linearly. 0 by default.
modeBound<CameraMode>Nopicture by default. Record videos in video.
muteBound<boolean>NoRecords videos without sound, and without asking for the microphone.
barcodesBound<BarcodeType[]>NoScans for these codes while the preview runs.
onReady(event: CameraReadyEvent) => voidNoThe preview is running: the camera can take pictures and record.
onError(event: CameraErrorEvent) => voidNo—
onBarcode(event: BarcodeEvent) => voidNoEach time a code of barcodes comes into view.
onAction — method signatures

Signatures

ts
(event: AccessibilityActionEvent): void

Parameters

NameTypeRequiredDescription
eventAccessibilityActionEventYes—

Returns

void

backgroundGradient — nested fields

backgroundGradient fields

NameTypeRequiredDescription
anglenumberYes—
colorsstring[]Yes—
onReady — method signatures

Signatures

ts
(event: CameraReadyEvent): void

Parameters

NameTypeRequiredDescription
eventCameraReadyEventYes—

Returns

void

onError — method signatures

Signatures

ts
(event: CameraErrorEvent): void

Parameters

NameTypeRequiredDescription
eventCameraErrorEventYes—

Returns

void

onBarcode — method signatures

Signatures

ts
(event: BarcodeEvent): void

Parameters

NameTypeRequiredDescription
eventBarcodeEventYes—

Returns

void

Generated from the public TypeScript declarations: signatures, props and defaults come from the checked source, descriptions from its JSDoc. No defaults are invented.