Components

The React Native SDK includes ready‑made components for camera view, media controls, and global context.
Each can be used independently or customized for your design system.

`<OrgaAIProvider>`

Wraps your app to provide the Orga context and session state for hooks like useOrgaAI().


import { OrgaAIProvider } from "@orga-ai/react-native";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <OrgaAIProvider>
      {children}
    </OrgaAIProvider>
  );
}

Prop	Type	Required	Description
`children`	`ReactNode`	✅	Components that consume the Orga context (hooks, camera views, controls).

Always wrap your navigator or root screen with <OrgaAIProvider> so any component can access the active session context.

`<OrgaAICameraView>`

Displays the user’s camera feed using react-native-webrtc’s <RTCView> under the hood.
It supports automatic mirroring, custom placeholders, and a convenient flip‑camera button.


import { OrgaAICameraView, useOrgaAI } from "@orga-ai/react-native";
import { View, Text, StyleSheet } from "react-native";
 
export default function CameraScreen() {
  const { userVideoStream, flipCamera } = useOrgaAI();
 
  return (
    <View style={styles.container}>
      <OrgaAICameraView
        streamURL={userVideoStream?.toURL()}
        onFlipCamera={flipCamera}
        cameraPosition="front"
        placeholder={
          <View style={styles.placeholder}>
            <Text style={styles.placeholderText}>Camera not available</Text>
          </View>
        }
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#000" },
  placeholder: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#1e293b",
  },
  placeholderText: { color: "white", fontSize: 16 },
});

Props

Prop	Type	Required	Default	Description
`streamURL`	`string`	✅	—	The local or remote WebRTC stream URL.
`onFlipCamera`	`() => void`	❌	—	Called when the flip button is pressed.
`flipCameraButtonStyle`	`StyleProp<ViewStyle>`	❌	—	Custom styles for the flip button container.
`icon`	`ReactNode`	❌	🔄	Custom icon for the flip button.
`text`	`string`	❌	`"Flip"`	Text displayed next to the flip icon.
`containerStyle`	`StyleProp<ViewStyle>`	❌	—	Wrapper container style.
`placeholder`	`ReactNode`	❌	`null`	Content to show when no stream is available.
`cameraPosition`	`"front"` \| `"back"`	❌	`"front"`	Controls mirroring of the feed.
`children`	`ReactNode`	❌	—	Optional child components rendered over the camera feed.

🎥 Feature Summary

Automatic mirroring for front camera.

Flip‑camera button built‑in.

Placeholder rendering when stream absent.

Uses <RTCView> internally for high performance.

`<OrgaAIControls>`

Provides a complete UI for controlling camera, microphone, and session lifecycle.
Customizable labels, icons, and styles.


import { OrgaAIControls, useOrgaAI } from "@orga-ai/react-native";
import { View, Text, StyleSheet } from "react-native";
 
export default function ControlsScreen() {
  const {
    connectionState,
    isCameraOn,
    isMicOn,
    startSession,
    endSession,
    toggleCamera,
    toggleMic,
    flipCamera,
  } = useOrgaAI();
 
  return (
    <View style={styles.container}>
      <OrgaAIControls
        connectionState={connectionState}
        isCameraOn={isCameraOn}
        isMicOn={isMicOn}
        onStartSession={startSession}
        onEndSession={endSession}
        onToggleCamera={toggleCamera}
        onToggleMic={toggleMic}
        onFlipCamera={flipCamera}
      />
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#000" },
});

Required Props

Prop	Type	Description
`connectionState`	`ConnectionState`	”disconnected” \| “connecting” \| “connected”
`isCameraOn`	`boolean`	Whether the camera is currently active.
`isMicOn`	`boolean`	Whether the mic is currently active.
`onStartSession`	`() => void`	Starts a new Orga session.
`onEndSession`	`() => void`	Ends the current session.
`onToggleCamera`	`() => void`	Toggles camera state.
`onToggleMic`	`() => void`	Toggles microphone state.
`onFlipCamera`	`() => void`	Switches between front and back cameras.

Styling Props

Prop	Type	Description
`containerStyle`	`StyleProp<ViewStyle>`	Styles for the main wrapper.
`controlsOverlayStyle`	`StyleProp<ViewStyle>`	Styles for the overlay area of buttons.
`controlButtonStyle`	`StyleProp<ViewStyle>`	Styles for each control button.
`connectButtonStyle`	`StyleProp<ViewStyle>`	Styles for the connect/start button.
`disconnectButtonStyle`	`StyleProp<ViewStyle>`	Styles for the end session button.

Icon / Text Customization

Prop	Type	Default
`cameraOnIcon`	`ReactNode`	📹
`cameraOffIcon`	`ReactNode`	📷
`micOnIcon`	`ReactNode`	🎤
`micOffIcon`	`ReactNode`	🔇
`flipIcon`	`ReactNode`	🔄
`startIcon`	`ReactNode`	🤖
`endIcon`	`ReactNode`	❌
`startButtonText`	`string`	”Start Conversation”
`disconnectText`	`string`	”End Session”
`connectSubtext`	`string`	”Tap to begin AI conversation”

🧩 Features

Auto‑detects connection state (disconnected, connecting, connected).

Fully stylable container and buttons.

Optional hidden controls (showCameraControl, showMicControl, etc.).

Responsive layout that fits any screen orientation.

Notes

All components require the app to be wrapped in <OrgaAIProvider>.
These components serve as reference implementations—you can build your own camera and control UIs using useOrgaAI() directly.
OrgaAIControls is ideal for demos and prototypes; production apps often customize styling.

Next Steps

Hooks → Control sessions, devices, permissions, and AI interactions using useOrgaAI().
Types → TypeScript types and enums exported by the SDK, including React Native–specific additions.
Troubleshooting → Troubleshooting guide.