yooo-native

A React Native UI library with toasts, alerts, and ready-to-use components — built on Reanimated 3 for smooth 60 FPS animations.

Features

• Toasts — success, error, warning, info, promise, and custom variants
• Alert Dialogs — drop-in replacement for Alert.alert() with alert.dialog()
• UI Components — Button, Input, Switch, Badge, Avatar, Card, Spinner, Label, Separator
• 14+ SVG Icons — Check, Bell, Heart, Star, ChevronRight, and more
• Theming — built-in dark mode with YoooProvider
• Performant — Reanimated 3 animations at 60 FPS
• Expo & NativeWind compatible
• Works outside React components — call toast() or alert() from anywhere

Showcase

Installation

npm install yooo-native
# or
yarn add yooo-native

Peer Dependencies

npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg

• React Native Reanimated
• React Native Gesture Handler
• React Native Safe Area Context
• React Native SVG

Quick Start

Wrap your app with YoooProvider and add the Toaster:

import { Toaster, YoooProvider } from 'yooo-native';

export default function App() {
  return (
    <YoooProvider theme="system">
      <NavigationContainer>{/* your screens */}</NavigationContainer>
      <Toaster />
    </YoooProvider>
  );
}

Toasts

import { toast } from 'yooo-native';

toast('Hello World');
toast.success('Saved!');
toast.error('Something went wrong');
toast.warning('Check your input');
toast.info('FYI');

// Promise toast with loading state
toast.promise(fetchData(), {
  loading: 'Loading...',
  success: 'Done!',
  error: 'Failed',
});

Alert Dialogs

import { alert } from 'yooo-native';

alert.info('Heads up!');
alert.success('Operation completed');
alert.error('Something went wrong');

// Confirmation
alert.confirm('Are you sure?', {
  onConfirm: () => deleteItem(),
  onCancel: () => console.log('Cancelled'),
});

// Drop-in replacement for Alert.alert()
alert.dialog('Delete Item', 'This cannot be undone.', [
  { text: 'Cancel', style: 'cancel' },
  { text: 'Delete', style: 'destructive', onPress: () => deleteItem() },
]);

// Custom JSX
alert.custom(<YourCustomComponent />);

Components

All components are theme-aware via YoooProvider.

Button

import { Button, Check } from 'yooo-native';

<Button variant="primary" onPress={save}>Save</Button>
<Button variant="destructive" icon={<Check size={20} color="#FFF" />}>Delete</Button>
<Button variant="ghost" loading>Loading...</Button>

Variants: primary | secondary | destructive | ghost
Sizes: small | medium | large

Input

import { Input, Label } from 'yooo-native';

<Label>Email</Label>
<Input placeholder="[email protected]" autoCapitalize="none" />
<Input error placeholder="Required field" />

Switch

import { Switch } from 'yooo-native';

<Switch value={enabled} onValueChange={setEnabled} />;

Sizes: small | medium

Badge

import { Badge, Bell } from 'yooo-native';

<Badge variant="success">Active</Badge>
<Badge variant="error">5</Badge>
<Badge variant="info" icon={<Bell size={12} color="#FFF" />}>3 notifications</Badge>

Variants: default | success | error | warning | info

Avatar

import { Avatar } from 'yooo-native';

<Avatar source={{ uri: 'https://example.com/photo.jpg' }} size="large" />
<Avatar name="John Doe" size="medium" backgroundColor="#FF0000" />

Sizes: small | medium | large | xlarge

Card

import { Card } from 'yooo-native';

<Card variant="elevated"><Text>Elevated card with shadow</Text></Card>
<Card variant="outlined"><Text>Outlined card</Text></Card>
<Card variant="filled"><Text>Filled card</Text></Card>

Spinner

import { Spinner } from 'yooo-native';

<Spinner size="medium" color="#007AFF" />;

Label & Separator

import { Label, Separator } from 'yooo-native';

<Label>Username</Label>
<Label muted>Optional</Label>
<Separator />
<Separator orientation="vertical" />

Icons

14 SVG icons included:

import { CircleCheck, Bell, Heart, Star, Check, Info, X, Loader,
         CircleX, TriangleAlert, AlertCircle, ChevronRight, ChevronDown } from 'yooo-native';

<Bell size={24} color="#007AFF" />
<Heart size={20} color="#FF69B4" />
<Star size={28} color="#FFD700" />

See COMPONENTS.md for full API reference.

Contributing

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

License

MIT