# React Native installation

Configure the native library, providers and dependencies.

## 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+.

- [@kivora/native on npm](https://www.npmjs.com/package/@kivora/native)

- [How @kivora/init works](https://kivora.pro/docs/inicializador)

## 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.


```tsx
# Ejecuta desde la carpeta de tu aplicación nativa
npx @kivora/init --framework native --dry-run

# Revisa y confirma el plan
npx @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.


```tsx
import { Text, View } from "react-native";
import { Button } from "@kivora/native";

export default function HomeScreen() {
  return (
    <View className="flex-1 justify-center bg-background p-6">
      <Button onPress={() => console.log("Create project")}>
        <Text className="text-primary-foreground">Create project</Text>
      </Button>
    </View>
  );
}
```


## 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.

- [Manual installation and compatibility of @kivora/native](https://www.npmjs.com/package/@kivora/native#installation)

- [What to share between web and mobile](https://kivora.pro/docs/multiplataforma)

Source: https://kivora.pro/docs/instalacion-react-native