View as Markdown Open in ChatGPT Open in Claude

Styling

No stylesheet to import — just React Native style objects. Size the avatar, round its corners, and lay it out like any other View.

No CSS, no stylesheet import

Unlike the web SDK, there's nothing to import — React Native styles everything inline. You shape the avatar entirely through the style prop (a ViewStyle object) on <Avatar> and its parent View.

tsx

import { View } from "react-native";
import { Avatar } from "@avatarfactory/react-native";

<View style={{ width: 320, height: 320 }}>
  <Avatar />
</View>

Sizing the avatar

The avatar's root view is flex: 1, so it fills whatever space it's given. Always give it explicit dimensions or place it inside a sized/flexed parent.

tsx

{/* Fixed size on the Avatar itself */}
<Avatar style={{ width: 320, height: 320 }} />

{/* Fill a sized parent */}
<View style={{ width: 280, height: 280 }}>
  <Avatar />
</View>

{/* Fill available space in a flex layout */}
<View style={{ flex: 1 }}>
  <Avatar style={{ flex: 1 }} />
</View>

Without a size — either on <Avatar> or a sized parent — the flex: 1 root can collapse to zero height and render nothing. This is the most common setup mistake.

The style prop

Pass any ViewStyle to <Avatar> to style its container view — dimensions, corner radius, background, and more.

tsx

<Avatar
  style={{
    width: 240,
    height: 240,
    borderRadius: 24,
    overflow: "hidden",       // clip the avatar to the rounded corners
    backgroundColor: "#000",
  }}
/>

There is no className prop on React Native. If you use NativeWind, resolve your classes to a style object and pass it via style.

Built-in controls

The floating start/stop buttons (call mode) are off by default. Toggle them via the provider config — not as a prop on <Avatar>:

tsx

const config = {
  // ...
  controls: { enabled: true }, // show built-in buttons
};

controls is configured on <AvatarProvider>. When disabled (the default), build your own controls with the useAvatar hook.

Design patterns

Circular avatar

tsx

<Avatar
  style={{ width: 200, height: 200, borderRadius: 100, overflow: "hidden" }}
/>

Hero header

tsx

import { View, Text } from "react-native";

<View style={{ width: "100%", height: 360 }}>
  <Avatar style={{ flex: 1 }} />
  <View style={{ position: "absolute", bottom: 24, left: 24 }}>
    <Text style={{ color: "#fff", fontSize: 28, fontWeight: "700" }}>Meet Luna</Text>
    <Text style={{ color: "rgba(255,255,255,0.7)" }}>Your AI travel assistant</Text>
  </View>
</View>

Card with shadow

tsx

<View
  style={{
    width: 260,
    height: 260,
    borderRadius: 20,
    overflow: "hidden",
    shadowColor: "#8b5cf6",
    shadowOpacity: 0.3,
    shadowRadius: 24,
    elevation: 8, // Android shadow
  }}
>
  <Avatar />
</View>

The connectivity dot

<Avatar> shows a small connection indicator (green = connected, red = disconnected) in the top-right corner. It's built into the component and can't be restyled directly. If you want a custom indicator, build your own from useAvatar().isConnected:

tsx

import { View } from "react-native";

function StatusDot() {
  const { isConnected } = useAvatar();
  return (
    <View
      style={{
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: isConnected ? "#22c55e" : "#ef4444",
      }}
    />
  );
}

Types Reference

State & Lifecycle