react-native-nayan

React Native Component Library for smooth and faster mobile application development.

✨ Features

• 🌈 Enterprise-class UI designed for mobile applications.
• 📦 A set of high-quality React native components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• ⚙️ Whole package of design resources and development tools.
• 🎨 Powerful theme customization based on Tailwind and Nativewind.

🔨 Installation

1npm install react-native-nayan

Install peer dependencies

1npm install @react-native-community/datetimepicker @react-navigation/native expo-navigation-bar react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg

This library completely depends on nativewind, Follow Nativewind installation as per the nativewind documentation.

🕹 Usage

Change tailwind.config.ts as bellow

1const { hairlineWidth } = require('nativewind/theme');
2const colors = require('tailwindcss/colors');
3
4/** @type {import('tailwindcss').Config} */
5module.exports = {
6  darkMode: 'class',
7  content: [
8    './src/**/*.{js,jsx,ts,tsx}',
9    './node_modules/react-native-nayan/src/**/*.{js,jsx,ts,tsx}'
10  ],
11  presets: [require('nativewind/preset')],
12  theme: {
13    colors: {
14      ...colors,
15      primary: 'var(--color-primary)',
16      card: 'var(--color-card)',
17      text: 'var(--color-text)',
18      muted: 'var(--color-muted)',
19      border: 'var(--color-border)',
20      background: 'var(--color-background)'
21    },
22    extend: {
23      borderWidth: {
24        hairline: hairlineWidth()
25      },
26      keyframes: {
27        'accordion-down': {
28          from: { height: '0' },
29          to: { height: 'var(--radix-accordion-content-height)' }
30        },
31        'accordion-up': {
32          from: { height: 'var(--radix-accordion-content-height)' },
33          to: { height: '0' }
34        }
35      },
36      animation: {
37        'accordion-down': 'accordion-down 0.2s ease-out',
38        'accordion-up': 'accordion-up 0.2s ease-out'
39      }
40    }
41  },
42  plugins: []
43};

Create theme colors constant with your choice of colors

1import { DarkTheme, DefaultTheme } from '@react-navigation/native';
2
3export const themeColors = {
4  light: {
5    ...DefaultTheme,
6    colors: {
7      primary: 'hsl(215 100% 45%)',
8      background: 'hsl(216 20% 95%)',
9      card: 'hsl(0 0% 100%)',
10      text: 'hsl(0 0% 2%)',
11      muted: 'hsl(0 0% 50%)',
12      border: 'hsl(0 0% 88%)',
13      notification: 'hsl(0 0% 100%)'
14    }
15  },
16  dark: {
17    ...DarkTheme,
18    colors: {
19      primary: 'hsl(209 100% 58%)',
20      background: 'hsl(0 0% 12%)',
21      card: 'hsl(0 0% 21%)',
22      text: 'hsl(0 0% 96%)',
23      muted: 'hsl(0 0% 69%)',
24      border: 'hsl(0 0% 31%)',
25      notification: 'hsl(0 0% 21%)'
26    }
27  }
28};

Change your app starting file as bellow

1import '../global.css';
2import 'react-native-reanimated';
3import { View } from 'react-native';
4import { NButton, NTheme, useColorScheme, THEMES } from 'react-native-nayan';
5import { themeColors } from './constants';
6
7export default function App() {
8  const {colorScheme, isDarkColorScheme, setColorScheme} = useColorScheme();
9
10  const changeTheme = () => {
11    setColorScheme(isDarkColorScheme ? THEMES.light : THEMES.dark);
12  }
13
14  return (
15    <NTheme theme={colorScheme || THEMES.light} themeColors={themeColors}>
16      <View className="flex-1 justify-center items-center bg-background">
17        <NButton onPress={changeTheme}>Change Theme</NButton>
18      </View>
19    </NTheme>
20  );
21}

🤝 Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.