react-native-easy-ui 🚀

A lightweight, modern, and developer-friendly UI component library & design system for React Native and Expo. Built with full TypeScript support, built-in light/dark theme system, zero native dependencies, and elegant ergonomics.

✨ Features

• 🎨 Built-in Theme System: Dynamic Light & Dark mode support out-of-the-box (ThemeProvider + useTheme).
• 🧩 Zero Native Configuration: Works 100% on bare React Native, Expo Go, and React Native Web without native link/build hassles.
• ⚡ Smart Form Engine (Zod / Custom): Zero-boilerplate forms (Form, Form.Input, Form.Checkbox, Form.SubmitButton).
• 💎 Missing Mobile Components: OTPInput, Skeleton shimmer, Accordion, Rating, Chip, Select, Switch, Checkbox.
• 🍏 Micro-Interactions & Physics: Bounce spring touchables & Shake validation animations.
• 🧱 Shadcn UI Blocks: StatCard, SettingsSection / SettingsItem, EmptyState.
• 🔔 Global Toast System: ToastProvider & useToast() hook.
• 🛡️ 100% TypeScript: Strictly typed props, autocomplete, and theme tokens.

📥 Installation

# Using npm
npm install @rohit0212/react-native-easy-ui

# Using yarn
yarn add @rohit0212/react-native-easy-ui

🚀 Quick Start

1. Wrap your root app with ThemeProvider & ToastProvider

// App.tsx
import React from 'react';
import { ThemeProvider, ToastProvider } from '@rohit0212/react-native-easy-ui';
import HomeScreen from './src/HomeScreen';

export default function App() {
  return (
    <ThemeProvider mode="system">
      <ToastProvider>
        <HomeScreen />
      </ToastProvider>
    </ThemeProvider>
  );
}

🌟 The 4 Next-Level Superpowers

1. Smart OTP / PIN Input

Auto-focuses next box, handles clipboard paste, PIN dots masking, and built-in resend countdown timer:

import { OTPInput } from '@rohit0212/react-native-easy-ui';

<OTPInput
  length={4}
  value={otp}
  onChange={setOtp}
  onComplete={(code) => console.log('Entered:', code)}
  resendCountdown={60}
  onResend={() => sendOtpApi()}
/>

// 6-digit masked PIN:
<OTPInput
  length={6}
  value={pin}
  onChange={setPin}
  secureTextEntry
  color="secondary"
/>

2. "Zod + Form" Superpower (Zero-Boilerplate Forms)

Connect with Zod or a validator function in seconds without Formik or React Hook Form overhead:

import { Form } from '@rohit0212/react-native-easy-ui';
import { z } from 'zod'; // Optional

const signupSchema = z.object({
  email: z.string().email('Invalid email'),
  password: z.string().min(6, 'At least 6 characters'),
  agree: z.literal(true, { errorMap: () => ({ message: 'You must agree' }) }),
});

<Form schema={signupSchema} onSubmit={(values) => login(values)}>
  <Form.Input name="email" label="Email" placeholder="[email protected]" />
  <Form.Input name="password" label="Password" secureTextEntry />
  <Form.Checkbox name="agree" label="I accept Terms & Conditions" />
  <Form.SubmitButton title="Create Account" fullWidth />
</Form>

3. Pre-built UI Blocks (Shadcn-Style)

A. Dashboard Stat Cards

import { StatCard } from '@rohit0212/react-native-easy-ui';

<StatCard
  title="Total Sales"
  value="$48,250"
  trend="+14.2% from last month"
  trendDirection="up"
/>

B. iOS / OneUI Settings Menu

import { SettingsSection, SettingsItem } from '@rohit0212/react-native-easy-ui';

<SettingsSection title="Preferences">
  <SettingsItem
    title="Push Notifications"
    subtitle="Receive alerts in realtime"
    switchValue={pushOn}
    onSwitchChange={setPushOn}
  />
  <SettingsItem
    title="Security & 2FA"
    onPress={() => navigate('Security')}
  />
  <SettingsItem
    title="Log Out"
    destructive
    onPress={logout}
  />
</SettingsSection>

C. Empty State Screen

import { EmptyState } from '@rohit0212/react-native-easy-ui';

<EmptyState
  icon="🛒"
  title="Your Cart is Empty"
  description="Looks like you haven't added anything to your cart yet."
  action={{ label: 'Explore Products', onPress: goToCatalog }}
/>

4. Interactive Feedback & Physics (Apple / OneUI Feel)

A. Spring Bounce (<Bounce>)

Physics-based fluid bounce scale on press:

import { Bounce, Card } from '@rohit0212/react-native-easy-ui';

<Bounce scaleTo={0.95}>
  <Card variant="elevated">
    <Card.Body>Fluid spring card</Card.Body>
  </Card>
</Bounce>

B. Shake Animation (<Shake>)

Trigger shake animation on validation errors:

import { Shake, ShakeHandle, Button } from '@rohit0212/react-native-easy-ui';

const shakeRef = useRef<ShakeHandle>(null);

<Shake ref={shakeRef}>
  <Input label="PIN" error="Invalid PIN entered" />
</Shake>

<Button title="Shake!" onPress={() => shakeRef.current?.shake()} />

C. Swipeable Row Actions (<SwipeableRow>)

WhatsApp & iOS Mail style swipe to delete, pin or archive with spring physics:

import { SwipeableRow } from '@rohit0212/react-native-easy-ui';

<SwipeableRow
  leftActions={[
    { label: 'Archive', icon: '📥', color: 'primary', onPress: (close) => { archiveItem(); close(); } }
  ]}
  rightActions={[
    { label: 'Delete', icon: '🗑️', color: 'danger', onPress: (close) => { deleteItem(); close(); } }
  ]}
>
  <MyListItem title="Important Email" />
</SwipeableRow>

📦 Additional Essential Components

Skeleton Shimmer

Smooth zero-dependency pulse animation:

import { Skeleton } from '@rohit0212/react-native-easy-ui';

<Skeleton width="100%" height={20} />
<Skeleton.Circle size={48} />
<Skeleton.Text lines={3} />
<Skeleton.Card hasAvatar lines={3} />

Accordion / Collapse (FAQ)

import { Accordion } from '@rohit0212/react-native-easy-ui';

<Accordion.Group>
  <Accordion title="How do I get started?" defaultOpen>
    <Typography>Wrap your app in ThemeProvider.</Typography>
  </Accordion>
  <Accordion title="Is Expo Go supported?">
    <Typography>Yes, 100% out of the box.</Typography>
  </Accordion>
</Accordion.Group>

Rating (Star Rating)

import { Rating } from '@rohit0212/react-native-easy-ui';

<Rating value={rating} onChange={setRating} showValue size="lg" />

Chip & Tags

import { Chip } from '@rohit0212/react-native-easy-ui';

<Chip label="React Native" selected color="primary" />
<Chip label="Mobile" onRemove={() => removeTag('Mobile')} />

Dropdown / Select

import { Select } from '@rohit0212/react-native-easy-ui';

<Select
  label="Select Country"
  options={countries}
  value={selectedCountry}
  onValueChange={setSelectedCountry}
  searchable
/>

Toast Notifications

import { useToast } from '@rohit0212/react-native-easy-ui';

const toast = useToast();

toast.success('Saved successfully!', { position: 'top' });
toast.error('Connection failed');

🎨 Theming & Customization

import { ThemeProvider, ThemeOverride } from '@rohit0212/react-native-easy-ui';

const customTheme: ThemeOverride = {
  colors: {
    primary: {
      main: '#7C3AED',
      light: '#A78BFA',
      dark: '#5B21B6',
      contrastText: '#FFFFFF',
    },
  },
};

<ThemeProvider theme={customTheme} mode="system">
  <App />
</ThemeProvider>

🛠️ How to Publish New Version to NPM

# 1. Bump version
npm version minor

# 2. Build
npm run build

# 3. Publish
npm publish --access public

📄 License

MIT © Rohit / Easy UI