@passionui/react-native-foundation

A comprehensive React Native design system for building beautiful cross-platform applications with built-in navigation and theming.

✨ Features

🎨 30+ Production-Ready Components

Complete UI component library including:

• Form Components: Button, Input, CheckBox, Radio, Switch, Stepper
• Display Components: Text, Image, Badge, Tag, Skeleton, Divider
• Navigation: NavigationContainer, StackScreen, BottomTab, ModalScreen, BottomSheet
• Feedback: Toast, Loading, Popup, SheetPicker
• Layout: Layout, Grid, SizedBox
• Advanced: TabView, Pagination, Steps, LoopText

🎯 TypeScript First

• Full type safety with comprehensive TypeScript definitions
• Excellent IDE autocomplete support
• Type-safe component props and theming

🌗 Built-in Theming System

• Light and Dark mode support out of the box
• Customizable design tokens
• Context-based theme management
• Dynamic theme switching

🌍 Internationalization (i18n)

• Built-in localization support with react-i18next
• Easy language switching
• Multiple language support

🧭 Navigation Components

• Pre-built navigation wrappers for React Navigation
• Stack, Tab, Modal, and BottomSheet navigation
• Consistent navigation patterns across your app

🎭 Flexible Image & Icon Adapters

• Expo: Auto-detects and uses expo-image, @expo/vector-icons, expo-linear-gradient
• React Native CLI: Supports @d11/react-native-fast-image, react-native-vector-icons, react-native-linear-gradient
• Automatic platform detection and adapter selection

🚀 Performance Optimized

• Powered by Reanimated 4 for smooth 60fps animations
• Optimized re-renders with React Context
• Tree-shakeable architecture

📱 Cross-Platform

• iOS, Android, and Web compatible
• Platform-specific optimizations
• Consistent UX across platforms

📦 Installation

# Using npm
npm install @passionui/react-native-foundation

# Using yarn
yarn add @passionui/react-native-foundation

# Using pnpm
pnpm add @passionui/react-native-foundation

🚀 Setup for Expo Projects

If you're using Expo, install these dependencies:

npx expo install react-native-reanimated react-native-gesture-handler \
  react-native-svg react-native-safe-area-context react-native-pager-view \
  react-native-worklets expo-image expo-linear-gradient @expo/vector-icons

Configure Reanimated in your babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], // Must be last
  };
};

🚀 Setup for React Native CLI Projects

If you're using React Native CLI, install these dependencies:

npm install react-native-reanimated react-native-gesture-handler \
  react-native-svg react-native-safe-area-context react-native-pager-view \
  react-native-worklets @d11/react-native-fast-image react-native-vector-icons \
  react-native-linear-gradient

iOS Setup:

cd ios && pod install && cd ..

Android Setup - Add to android/app/build.gradle:

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Configure Reanimated in your babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'], // Must be last
};

📖 Usage

Basic Example

import { useRef } from 'react';
import {
  NavigationContainer,
  Navigator,
  Localization,
  Button,
  Text
} from '@passionui/react-native-foundation';

function HomeScreen() {
  return (
    <View>
      <Text variant="h1">Hello World</Text>
      <Button onPress={() => alert('Pressed!')}>
        Click Me
      </Button>
    </>
  );
}

export default function App() {
  const navigator = new Navigator({
    ref: useRef(undefined),
    loadingRef: useRef(undefined),
    toastRef: useRef(undefined),
  });

  const localization = new Localization({
    resources: {
      en: {
        translation: {
          welcome: 'Welcome',
          login: 'Login',
        },
      },
      vi: {
        translation: {
          welcome: 'Chào mừng',
          login: 'Đăng nhập',
        },
      },
    },
    lng: 'en',
    fallbackLng: 'en',
  });

  const customTheme = {
    colors: {
      primary: {
        default: '#007AFF',
        light: '#4DA2FF',
        container: '#99CAFF',
      },
      secondary: {
        default: '#5856D6',
        light: '#7D7BEB',
        container: '#B3B2F5',
      },
    },
    dark: false,
  };

  return (
    <NavigationContainer
      navigator={navigator}
      localization={localization}
      theme={customTheme}
      screen={HomeScreen}
    />
  );
}

📚 Documentation

For more detailed documentation and examples, visit the main repository.

🤝 Contributing

See CONTRIBUTING.md for how to contribute to this project.

📝 Changelog

See CHANGELOG.md for release history.

📄 License

MIT © Dũng (Wem)