@kilnjs/native

KilnUI for React Native. The same component API as @kilnjs/web, with native implementations throughout.

npx expo install @kilnjs/native react-native-safe-area-context

import { KilnProvider, Button, YStack } from '@kilnjs/native';

export function App() {
  return (
    <KilnProvider mode="dark" accent="rust">
      <YStack gap="$3" p="$4">
        <Button tone="primary" onPress={() => {}}>Save</Button>
      </YStack>
    </KilnProvider>
  );
}

No react-native-web, no DOM shims, no web code in the bundle. <Button> is a Pressable, animation runs through Animated with useNativeDriver, and touch targets are at least 44×44 using React Native's own hitSlop.

Entry points

| Import | Contents | | --- | --- | | @kilnjs/native | the components | | @kilnjs/native/styling | styled(), theme hooks, useMedia | | @kilnjs/native/tokens | scales, palettes, themes, motion curves — plain data | | @kilnjs/native/primitives | View, Text, Pressable, MotionView, … | | @kilnjs/native/behavior | headless hooks: useDisclosure, usePresence, … |

There is no stylesheet to import. The same style props compile to StyleSheet objects instead of CSS.

Peer dependencies

react, react-native, and react-native-safe-area-context — the last one is required, not optional: useSafeAreaInsets is reachable from the package entry.

Sharing code with the web

This package contains no web code and no platform-extension files, so nothing downstream has to resolve a platform. For a module imported by both a React Native app and a web app, use @kilnjs/ui.

MIT © Joao Kdouk