Installation

Built on HeroUI Native and styled with Uniwind. Set Uniwind up in your project first — the components will not style correctly without it.

Install

The library, then its peer dependencies — most Expo projects already carry these.

terminal
npm install @nayan-ui/native
terminal
npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-screens react-native-svg react-native-worklets

Configuration

Create a global stylesheet and import it from your entry point.

global.css
@import 'tailwindcss';
@import 'uniwind';
@import 'heroui-native/styles';

Usage

Wrap your app in the NTheme provider.

App.tsx
import { View } from 'react-native';
import { NButton, NTheme, NThemeToggle, useNTheme } from '@nayan-ui/native';
import './global.css';


export default function App() {
  const { isDarkMode } = useNTheme();


  return (
    <NTheme>
      <View className="flex-1 justify-center items-center bg-background">
        <NThemeToggle />
        <NButton onPress={() => console.log('Pressed!')}>
          {isDarkMode ? 'Dark Mode' : 'Light Mode'}
        </NButton>
      </View>
    </NTheme>
  );
}