# Examples
Complete, working React Native code for every mode and the patterns you'll reach for most.
All examples authenticate with `getSessionToken`. Swap `fetchSessionToken` for your own backend call — see [AvatarProvider → Authentication](/docs/sdk/react-native/avatar-provider#authentication).
```tsx
// Shared helper used across the examples below.
async function fetchSessionToken() {
const res = await fetch("https://your-backend.com/api/avatar-token", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ avatarId: "default" }),
});
const { sessionToken } = await res.json();
return sessionToken;
}
```
## Full call mode screen
A complete voice conversation screen with status tracking and event logging.
```tsx
import { View, Text } from "react-native";
import {
AvatarProvider,
Avatar,
useAvatar,
useAvatarEvent,
} from "@avatarfactory/react-native";
const config = {
getSessionToken: fetchSessionToken,
mode: "call" as const,
avatar: {
avatarId: "default",
systemPrompt: "First-time visitor, arrived from the pricing page.",
},
controls: { enabled: true },
};
export function CallScreen() {
return (
);
}
function StatusBar() {
const { isConnected, isSpeaking, isListening, error } = useAvatar();
useAvatarEvent("start", () => console.log("[avatar] connected"));
useAvatarEvent("error", (err) => console.error("[avatar]", err.code));
return (
{isConnected && Live ●}
{isListening && Listening…}
{isSpeaking && Speaking…}
{error && Error: {error.message}}
);
}
```
## TTS mode with custom controls
Send text programmatically and manage sessions with your own UI.
```tsx
import { useState } from "react";
import { View, Button, TextInput } from "react-native";
import { AvatarProvider, Avatar, useAvatar } from "@avatarfactory/react-native";
const config = {
getSessionToken: fetchSessionToken,
mode: "tts" as const,
avatar: { avatarId: "default" },
controls: { enabled: false },
};
export function TtsScreen() {
return (
);
}
function TtsControls() {
const { start, stop, speakText, interrupt, isReady, isSpeaking, isIdle } = useAvatar();
const [text, setText] = useState("");
return (
);
}
```
## Player mode — onboarding screen
Zero server calls during playback. Pre-rendered audio plays locally with full lip-sync. (Auth is still required to load the avatar.)
```tsx
import { View, Button } from "react-native";
import { AvatarProvider, Avatar, useAvatar } from "@avatarfactory/react-native";
const welcomeJob = {
audioChunks: ["...base64-encoded-audio..."],
alignments: [
{
characters: ["W", "e", "l", "c", "o", "m", "e"],
character_start_times_seconds: [0, 0.08, 0.16, 0.24, 0.32, 0.40, 0.48],
character_end_times_seconds: [0.08, 0.16, 0.24, 0.32, 0.40, 0.48, 0.56],
},
],
};
const config = {
getSessionToken: fetchSessionToken,
mode: "player" as const,
avatar: { avatarId: "default" },
controls: { enabled: false },
};
export function OnboardingScreen() {
return (
);
}
function PlayButton() {
const { play, isReady } = useAvatar();
return (