Components

Detailed documentation for OrgaAIProvider, OrgaAICameraView, and OrgaAIControls

OrgaAIProvider

Provides Orga context to your React Native app.

Import

import { OrgaAIProvider } from '@orga-ai/sdk-react-native';

Usage

<OrgaAIProvider>
  {/* ...your app... */}
</OrgaAIProvider>

OrgaAICameraView

Displays the user’s camera feed with optional flip camera functionality and placeholder support.

Import

import { OrgaAICameraView } from '@orga-ai/sdk-react-native';

Usage

<OrgaAICameraView
  streamURL={userVideoStream?.toURL()}
  containerStyle={styles.cameraContainer}
  style={{ width: "100%", height: "100%" }}
  onFlipCamera={flipCamera}
  placeholder={<Text>Camera not available</Text>}
/>

Props

Prop	Type	Required	Default	Description
`streamURL`	`string`	Yes	-	The URL of the video stream to display
`onFlipCamera`	`() => void`	No	-	Callback function when flip camera button is pressed
`flipCameraButtonStyle`	`StyleProp<ViewStyle>`	No	-	Custom styles for the flip camera button
`icon`	`React.ReactNode`	No	-	Custom icon for the flip camera button
`text`	`string`	No	-	Custom text for the flip camera button
`containerStyle`	`StyleProp<ViewStyle>`	No	-	Custom styles for the container
`placeholder`	`React.ReactNode`	No	`null`	Content to display when no stream is available
`cameraPosition`	`"front" \| "back"`	No	`”front”`	Current camera position (affects mirroring)
`children`	`React.ReactNode`	No	-	Child components to render inside the camera view

Features

Automatic Mirroring: Front camera is automatically mirrored for natural selfie experience
Placeholder Support: Shows custom content when no video stream is available
Flip Camera Button: Optional button to switch between front and back cameras
Customizable Styling: Full control over appearance through style props
RTCView Integration: Built on top of react-native-webrtc for optimal performance

OrgaAIControls

Provides a complete UI for controlling camera, microphone, and session management.

Import

import { OrgaAIControls } from '@orga-ai/sdk-react-native';

Usage

<OrgaAIControls
  connectionState={connectionState}
  isCameraOn={isCameraOn}
  isMicOn={isMicOn}
  onStartSession={startSession}
  onEndSession={endSession}
  onToggleCamera={toggleCamera}
  onToggleMic={toggleMic}
  onFlipCamera={flipCamera}
/>

Props

Required Props

Prop	Type	Description
`connectionState`	`ConnectionState`	Current connection state ("disconnected", "connecting", "connected")
`isCameraOn`	`boolean`	Whether the camera is currently enabled
`isMicOn`	`boolean`	Whether the microphone is currently enabled
`onStartSession`	`() => void`	Function to start a new session
`onEndSession`	`() => void`	Function to end the current session
`onToggleCamera`	`() => void`	Function to toggle camera on/off
`onToggleMic`	`() => void`	Function to toggle microphone on/off
`onFlipCamera`	`() => void`	Function to flip between front/back camera

Styling Props

Prop	Type	Description
`containerStyle`	`StyleProp<ViewStyle>`	Custom styles for the main container
`controlsOverlayStyle`	`StyleProp<ViewStyle>`	Custom styles for the controls overlay
`controlButtonStyle`	`StyleProp<ViewStyle>`	Custom styles for individual control buttons
`controlLabelStyle`	`StyleProp<ViewStyle>`	Custom styles for button labels
`connectButtonStyle`	`StyleProp<ViewStyle>`	Custom styles for the connect button
`disconnectButtonStyle`	`StyleProp<ViewStyle>`	Custom styles for the disconnect button

Text Customization

Prop	Type	Default	Description
`startButtonText`	`string`	"Start Conversation"	Text for the start button
`connectingText`	`string`	"Connecting..."	Text shown while connecting
`disconnectText`	`string`	"Disconnect"	Text for disconnect button
`cameraOnText`	`string`	"Camera On"	Label for camera on state
`cameraOffText`	`string`	"Camera Off"	Label for camera off state
`micOnText`	`string`	"Mic On"	Label for microphone on state
`micOffText`	`string`	"Mic Off"	Label for microphone off state
`flipText`	`string`	"Flip"	Label for flip camera button
`endText`	`string`	"End"	Label for end session button
`connectSubtext`	`string`	"Tap to begin AI conversation"	Subtitle for connect button

Control Visibility

Prop	Type	Default	Description
showCameraControl	`boolean`	`true`	Whether to show camera toggle button
showMicControl	`boolean`	`true`	Whether to show microphone toggle button
showFlipCameraControl	`boolean`	`true`	Whether to show flip camera button
showEndSessionControl	`boolean`	`true`	Whether to show end session button

Loading Customization

Prop	Type	Default	Description
`loadingIndicator`	`React.ReactNode`	`<ActivityIndicator>`	Custom loading indicator
`loadingIndicatorColor`	`string`	"white"	Color for the default loading indicator