NativeKitv0.1.0

Docs / Overview

Getting started

NativeKit gives React Native truly native UI components. Each one renders a real platform view, Jetpack Compose on Android and SwiftUI or UIKit on iOS, from a single typed React Native API.

Installation

Add the package with your package manager:

Terminal
npm install @nameisjayant/react-native-nativekit
# or
yarn add @nameisjayant/react-native-nativekit

Then install the iOS pods:

Terminal
cd ios && pod install

Requirements

PlatformRequirement
React NativeNew Architecture (Fabric) enabled
AndroidminSdkVersion 24+, Kotlin 2.x (Jetpack Compose + Material 3 are bundled)
iOSSwiftUI; Liquid Glass needs iOS 26+ and Xcode 26 (Swift 6.2)

The components render real platform views, so they are not available on web.

Basic usage

Import the components and use them like any other React Native view. Here a button opens a native bottom sheet that renders your own React Native children:

Checkout.tsx
import { useState } from 'react';
import { Text } from 'react-native';
import {
  NativeKitBottomSheet,
  NativeKitButton,
} from '@nameisjayant/react-native-nativekit';

export default function Checkout() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <NativeKitButton title="Show details" onPress={() => setOpen(true)} />

      <NativeKitBottomSheet
        visible={open}
        variant="halfExpanded"
        onDismiss={() => setOpen(false)}
        style={{ padding: 24, gap: 12 }}
      >
        <Text>Any React Native content</Text>
        <NativeKitButton title="Close" onPress={() => setOpen(false)} />
      </NativeKitBottomSheet>
    </>
  );
}

How it works

Every component is a Fabric native component. On Android it hosts a Compose view inside MaterialTheme; on iOS it hosts SwiftUI in a UIHostingController or presents a UIKit sheet. Props flow down through codegen, and native events such as onPress and onDismiss flow back up to your JavaScript.

Because the views are native, you get each platform's own ripple, press feedback, haptics, drag physics, detents and accessibility for free.

TypeScript

Every prop, variant and callback type is exported from the package:

TypeScript
import type {
  NativeKitButtonProps,
  NativeKitButtonVariant,
  NativeKitBottomSheetProps,
  NativeKitBottomSheetVariant,
} from '@nameisjayant/react-native-nativekit';

All components