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.