Getting Started
Start using nativecn-ui components in your React Native project.
Prerequisites
Before you begin, make sure you have working environment:
A React Native project (0.70+)
TypeScript configured
Basic React Native knowledge
Node.js 18+ installed
Quick Start
Installing a component is as simple as copying the code. For a detailed walkthrough, check out the Installation Guide
We generally recommend setting up your project structure and theme before adding your first component.
Example Usage
Here's a typical component structure. Notice how it uses standard React Native primitives.
components/ui/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary';
}
export const Button = ({ title, onPress, variant = 'primary' }: ButtonProps) => {
return (
<TouchableOpacity
style={[styles.button, styles[variant]]}
onPress={onPress}
activeOpacity={0.8}
>
<Text style={[styles.text, variant === 'secondary' && styles.secondaryText]}>
{title}
</Text>
</TouchableOpacity>
);
};Recommended Structure
Keep your project organized by grouping generic UI components separate from business logic.
src/ ├── components/ │ ├── ui/ # nativecn-ui components go here │ │ ├── Button.tsx │ │ ├── Card.tsx │ │ ├── Input.tsx │ │ └── index.ts │ └── ... ├── screens/ └── ...