React Native · Sinua

@sinua/react-native gives you the same typed components in React Native. They're native views (Fabric) over the iOS and Android views, so animation runs natively, not over the bridge.

react-native.tsx

import { View } from "react-native";
import { SinuaOrb, SinuaRing, SinuaView } from "@sinua/react-native";

export function AssistantCard({ specJson }: { specJson: string }) {
  return (
    <View style={{ gap: 24 }}>
      {/* Typed: one component per object, parameters as props. */}
      <SinuaRing pattern="completing" progress={0.65} strokeWidth={0.12} style={{ width: 64, height: 64 }} />
      {/* A spec file; `state` picks its lifecycle state. */}
      <SinuaOrb spec={specJson} state="listening" style={{ width: 160, height: 160 }} />
      {/* The low-level view: native test tone or mic drive it without a vendor. */}
      <SinuaView pattern="speaking" voice="test" style={{ width: 96, height: 96 }} />
    </View>
  );
}

The typed components take the same props on iOS, Android and React Native: pattern (or spec), values, style, state, voice, theme, paused, reducedMotion, maxFps, lowPower and an accessibility label. The catalog lists every prop per pattern.

SinuaView also takes labels, announce and haptics (accessibility), effect (one-shot effects) and audioStrength. A spec-driven view animates state changes with the file's transitions, like the native views, and the voice button is <SinuaVoiceButton voice={handle} /> (Voice button). SinuaAvatar and SinuaVoiceMessage aren't on React Native yet.