# Avatar The component that displays your character and animates its mouth as it speaks. `` renders the avatar and keeps it in sync with the session — loading, connection status, and lip-sync are all handled for you. It reads everything it needs from the nearest `AvatarProvider`, so it takes no required props. ## Basic usage Place `` anywhere inside `AvatarProvider`. **Always give it a size** — it fills its container, so without an explicit `style` size or a sized parent it won't be visible. ```tsx import { View } from "react-native"; import { Avatar } from "@avatarfactory/react-native"; export default function TalkingCharacter() { return ( ); } ``` > **Always size ``.** Because its root is `flex: 1`, inside an unsized parent it can collapse to zero height and render nothing. Pass `style={{ width, height }}` or wrap it in a sized `View`. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `style` | `ViewStyle` | — | Layout styles applied to the avatar's root view. Use to set width and height. | | `loader` | `React.ReactNode` | — | Custom element shown while the avatar is resolving. Defaults to the SDK's animated connecting loader. | | `errorFallback` | `React.ReactNode` | — | Custom element shown if the avatar fails to load at all. A session that ends after the avatar is painted keeps the avatar, so it never reaches this. | | `captionStyle` | `ViewStyle` | — | Styling hook for the caption overlay. Shown when transcript.captions is on. | | `statusBannerStyle` | `ViewStyle` | — | Styling hook for the connectivity banner. Shown when statusBanner.enabled is on. | | `cameraPreviewCorner` | `CameraPreviewCorner` | `"bottom-right"` | Which corner the camera self-view sits in. Only applies when perception.camera is enabled. | | `hideCameraPreview` | `boolean` | `false` | Hide the camera self-view. Discouraged — capture continues regardless (the view stays mounted, invisible), so all this removes is the user's ability to see that it is happening. | > Whether an overlay exists at all is a **provider** decision (`transcript`, > `statusBanner`, `perception` in the config); how it looks is an **Avatar** > prop. Styling an overlay you never enabled does nothing. > There is no picture-in-picture layout and no `fit` override on React Native — > both are web-only. React Native also ships no thinking indicator; read > `useAvatar().isResponseSlow` and render your own. > There is no `className` prop on React Native. Style the container with the `style` prop (a `ViewStyle` object). To toggle the built-in start/stop buttons, set `controls.enabled` on `` — not on ``. ## What it renders The `Avatar` component renders three layers inside a `View`: 1 Rive Native View The animated character, rendered through @rive-app/react-native. Real-time lip-sync driven by character-level alignment data. 2 Connectivity Dot A small indicator in the top-right showing session state. Green = connected, red = disconnected. 3 Control Buttons Built-in start/stop buttons, shown only in call mode when controls.enabled = true on the provider. ## Custom loader Override the default loading indicator with your own element. ```tsx import { View, Text } from "react-native"; Warming up… } /> ``` ## Custom error fallback Show your own UI if the avatar fails to load (bad `avatarId`, no connectivity, etc.). ```tsx import { View, Text } from "react-native"; Couldn't load the avatar. } /> ``` ## Sizing examples ### Fixed size ```tsx ``` ### Fill available space ```tsx ``` ### Rounded with overflow clipping ```tsx ```