> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kansolabs.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Installation

> Install the package and the React Native libraries it needs beside it.

```bash theme={null}
npm install @kanso-labs/react-native-kanso-ui
```

## Peer dependencies

Beside `react` and `react-native`, the package needs:

| Package | What it does here |
| - | - |
| `react-native-reanimated` | The ripple a pressed control draws, and the corner a button morphs between |
| `react-native-worklets` | What Reanimated runs on |
| `react-native-svg` | The icons the controls show |
| `react-native-safe-area-context` | Insets that keep what the library draws above the screen clear of a notch, the status bar and the home indicator |
| `react-native-gesture-handler` | Carrying a switch's handle across its track when it is dragged |

**Expo**

```bash theme={null}
npx expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets
```

That installs the versions the SDK ships with, and Expo's Babel preset compiles the package's animations.

**Bare React Native**

Install the same five packages, then follow Reanimated's install guide, which adds `react-native-worklets/plugin` to the app's Babel configuration.

> **Safe-area insets**
>
> The insets come from safe-area-context's `SafeAreaProvider`, which Expo Router already puts around an app; elsewhere, wrap the app in one. Without it, the library keeps to the window's edge.
>
> `AppBar` and the panes of a `ListDetail` are the exception: each measures its own insets through `SafeAreaView`, so it clears only the edges it actually meets, and needs no provider on a device.

> **Gesture Handler**
>
> Gesture Handler 2 and 3 both satisfy the peer. `Switch` and `Slider` each draw Gesture Handler's root view around their own track, so an app need not wrap itself in `GestureHandlerRootView` for them, and one that already does loses nothing.

> **Fonts**
>
> `expo-font` is an optional peer. Without it every type role draws in the system font. See [Fonts](/kanso-ui/react-native/theming.md#fonts).

## The root

The outermost `ThemeScope` hosts what the library draws above the screen, such as sheets and snackbars, so it belongs at the root of the app and fills it:

```tsx theme={null}
import { ThemeScope } from '@kanso-labs/react-native-kanso-ui'

export default function App() {
  return (
    <ThemeScope style={{ flex: 1 }}>
      <Screen />
    </ThemeScope>
  )
}
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.