React Native installation

Configure the native library, providers and dependencies.

kivoraWe provide the pieces.
The idea is still yours.

A separate installation for React Native

Use @kivora/native in your mobile application. It shares Kivora's visual language and themes but does not render HTML: its events, providers and dependencies are native. Do not install @kivora/nextjs or import its CSS in the mobile application.

Assisted setup with @kivora/init 0.1.1 targets React Native Community CLI without Expo. You need an existing native application and Node.js 20.19+.

Check versions before installing

These are the assistant's limits, narrower than the native package's peer ranges. A range accepted by npm does not prove all combinations are tested. Do not mix these instructions with NativeWind 5, Reanimated 3 or Expo.

React Native >=0.85.3 <0.86 and React >=19.2 <20.
NativeWind >=4.2.6 <5 and Tailwind >=3.4.17 <4.
Reanimated >=4.3.0 <4.4 and Worklets >=0.8.3 <0.9.
@react-native/babel-preset and @react-native/metro-config from the 0.85 series.

Install and configure with the assistant

The assistant prepares Babel, Metro, Tailwind, CSS and NativeWind types; connects App or src/App to GestureHandlerRootView, SafeAreaProvider, KeyboardProvider and KivoraProvider; and applies the required color variables. Review generated files before continuing.

Terminal

1# Ejecuta desde la carpeta de tu aplicación nativa
2npx @kivora/init --framework native --dry-run
3
4# Revisa y confirma el plan
5npx @kivora/init --framework native

Use native components and events

This example is a screen inside the root already configured by the assistant. Keep its providers and NativeWind variables. In React Native, text goes inside Text and the press event is onPress.

HomeScreen.tsx

1import { Text, View } from "react-native";
2import { Button } from "@kivora/native";
3
4export default function HomeScreen() {
5  return (
6    <View className="flex-1 justify-center bg-background p-6">
7      <Button onPress={() => console.log("Create project")}>
8        <Text className="text-primary-foreground">Create project</Text>
9      </Button>
10    </View>
11  );
12}

Finish native integration

The @kivora/init 0.1.1 README states that the assistant's iOS integration is not validated. The native package describes checks in its reference environment on Android and an iOS simulator, plus a css-interop fix it does not distribute automatically. These do not guarantee every external installation.

iOS: install pods using your project workflow and rebuild the application.
Restart Metro with a cleared cache after changing Babel, Metro or Tailwind. Use your project scripts to rebuild Android or iOS.
Notifications need an existing Android icon. The assistant adds the permission when it finds the manifest but does not create that asset.
Multimedia components may require additional dependencies and configuration; consult the package notes for each feature.

If you need manual installation

Manual installation requires integrating native dependencies, Babel, Metro, Tailwind, providers and variables. npm install @kivora/native alone does not finish setup. Follow the README for your chosen version and review existing dependencies before changing versions.

See the native API and the platform differences.