Installation

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
Bare React Native

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.

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.

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:

import { ThemeScope } from '@kanso-labs/react-native-kanso-ui'

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

⌘I

Web

React Native

Core

Peer dependencies

The root

​Peer dependencies

​The root

Peer dependencies

The root