# 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 `` and its parent `View`. ```tsx import { View } from "react-native"; import { Avatar } from "@avatarfactory/react-native"; ``` ## 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 */} {/* Fill a sized parent */} {/* Fill available space in a flex layout */} ``` > Without a size — either on `` 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 `` to style its container view — dimensions, corner radius, background, and more. ```tsx ``` > 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 ``: ```tsx const config = { // ... controls: { enabled: true }, // show built-in buttons }; ``` > `controls` is configured on ``. When disabled (the default), build your own controls with the `useAvatar` hook. ## Design patterns ### Circular avatar ```tsx ``` ### Hero header ```tsx import { View, Text } from "react-native"; Meet Luna Your AI travel assistant ``` ### Card with shadow ```tsx ``` ## The connectivity dot `` 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 ( ); } ```