React Native Epic Trails Design System

A modern, production-ready React Native design system featuring pre-styled, customizable components, state-based UI logic, theme support, and seamless integration with Tailwind, Expo, and TypeScript. Built for scalable mobile app development with accessibility and performance in mind.

🚀 Features

• 🎯 25+ Production-Ready Components - Buttons, Inputs, Cards, Modals, Navigation, Social Media Stack, and more
• 🎨 Dual Styling Support - Works with both NativeWind className and React Native styles
• 🔧 State-Driven UI - Built-in hover, pressed, disabled, loading, and error states
• 📱 Cross-Platform - Optimized for iOS, Android, and React Native Web
• 🌗 Theme Ready - Consistent design tokens and customizable variants
• ⚡ TypeScript First - Full type safety with comprehensive prop interfaces
• 🧩 Modular Architecture - Import only what you need for optimal bundle size
• ♿ Accessible - Built-in accessibility support for screen readers
• 📦 Zero Dependencies - No external UI library dependencies

📦 Installation

npm install reactnativeepictrailsds
# or
yarn add reactnativeepictrailsds

Optional: NativeWind Setup

For enhanced className support (optional - components work with pure React Native styles too):

npm install nativewind tailwindcss

Follow the NativeWind installation guide for your platform.

✨ Quick Start

import React from "react";
import { View } from "react-native";
import { 
  Button, 
  NormalInput, 
  Card, 
  SocialLogin,
  SocialMediaStack,
  StoryProgressBar
} from "reactnativeepictrailsds";

export default function App() {
  return (
    <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
      <Card>
        <NormalInput 
          placeholder="Enter your email"
          size="full"
        />
        
        <Button
          title="Sign In"
          variant="primary"
          onPress={() => console.log('Pressed!')}
        />
        
        <SocialLogin 
          google 
          apple 
          onGoogleSignIn={() => console.log('Google')}
          onAppleSignIn={() => console.log('Apple')}
        />
      </Card>
    </View>
  );
/>

Social Media Stack Example

import React, { useState } from "react";
import {
  SocialMediaStack,
  SocialMediaContainer,
  SocialMediaEngagement,
  StoryProgressBar,
  BottomNav
} from "reactnativeepictrailsds";

export default function StoriesScreen() {
  const [activeIndex, setActiveIndex] = useState(0);
  
  const contentItems = [
    {
      type: "text" as const,
      text: "Welcome to our app!",
      backgroundColor: "#e74c3c"
    },
    {
      type: "image" as const,
      imageUri: require("./assets/image.png"),
      isLocal: true
    }
  ];
  
  const engagementIcons = [
    { name: "heart-outline", onPress: () => console.log("Like") },
    { name: "chatbox-outline", onPress: () => console.log("Comment") },
    { name: "paper-plane-outline", onPress: () => console.log("Share") }
  ];
  
  return (
    <SocialMediaStack>
      <StoryProgressBar
        totalStories={contentItems.length}
        activeStoryIndex={activeIndex}
      />
      <SocialMediaEngagement icons={engagementIcons} />
      <SocialMediaContainer
        contentItems={contentItems}
        duration={5000}
        onActiveIndexChange={(index: number) => setActiveIndex(index)}
        index={activeIndex}
      />
    </SocialMediaStack>
  );
}

🧩 Available Components

Core Components

| Component | Description | Key Props | |-----------|-------------|----------| | Button | Primary button with variants and states | label, variant, size, state | | Input | Text input with label, hint, and validation | label, placeholder, state, curved | | Card | Container with elevation and padding | elevation, padding, backgroundColor | | Alert | Notification component with variants | type, message, dismissible | | Loading | Loading spinner with customizable size | size, color | | Skeleton | Loading placeholder animations | width, height, animated |

Navigation Components

| Component | Description | Key Props | |-----------|-------------|----------| | NavTabs | Tab navigation component | tabs, activeTab, onTabPress | | BottomNav | Bottom navigation bar | items, activeIndex, onItemPress | | Tabs | Horizontal tab switcher | items, selected, onChange |

Layout Components

| Component | Description | Key Props | |-----------|-------------|----------| | Grid | Responsive grid layout | columns, spacing, children | | Tile | Grid tile with content | title, subtitle, onPress | | Collapse | Expandable/collapsible content | title, expanded, children | | EmptyStates | Empty state illustrations | title, message, actionButton |

Form Components

| Component | Description | Key Props | |-----------|-------------|----------| | Select | Dropdown selection component | options, value, onSelect | | Autocomplete | Auto-completing text input | data, onSelect, placeholder | | NormalInput | Basic text input (alias for Input) | Same as Input |

Modal & Dialog Components

| Component | Description | Key Props | |-----------|-------------|----------| | Dialog | Modal dialog with actions | visible, title, message, actions | | AndroidModalSheet | Android-style bottom sheet | visible, onClose, children | | IosModalSheet | iOS-style modal presentation | visible, onClose, children |

Social & Authentication

| Component | Description | Key Props | |-----------|-------------|----------| | SocialLogin | Social login buttons | google, apple, facebook, email | | TypeDoc | Terms agreement with checkbox | label, buttonLabel, onAccept |

Social Media Stack

| Component | Description | Key Props | |-----------|-------------|----------| | SocialMediaStack | Container for social media components | children | | SocialMediaContainer | Story/post container with navigation | contentItems, duration, onActiveIndexChange | | SocialMediaEngagement | Like, comment, share buttons | icons, onIconPress | | StoryProgressBar | Progress indicator for stories | totalStories, activeStoryIndex |

Icons & Graphics

| Component | Description | Key Props | |-----------|-------------|----------| | Iconography | Icon component with avatars and placeholders | type, iconName, size, initials |

Button Variants

| Component | Description | Key Props | |-----------|-------------|----------| | ButtonIcon | Button with icon support | label, icon, iconPosition | | ButtonRect | Rectangular button variant | label, variant, size | | RectButton | Alias for ButtonRect | label, variant, size | | ButtonTypeDoc | Button with terms agreement | label, termsText, onAccept |

🎨 Styling Approaches

Method 1: NativeWind Classes (Recommended)

import { Button } from "reactnativeepictrailsds";

<Button 
  label="Styled Button"
  className="bg-blue-500 rounded-lg shadow-md"
/>

Method 2: React Native Styles

import { Button } from "reactnativeepictrailsds";

<Button 
  label="Styled Button"
  style={{
    backgroundColor: '#3b82f6',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  }}
/>

Method 3: Hybrid Approach

<Button 
  label="Hybrid Button"
  className="rounded-lg shadow-md" // NativeWind classes
  style={{ backgroundColor: '#custom-color' }} // Direct styles
/>

🧪 Component States

| State | Description | Availability | |-------|-------------|-------------| | default | Default appearance | All interactive components | | hover | Mouse hover effect | Web + compatible components | | pressed | Active press state | Pressable components | | disabled | Non-interactive state | Form + button components | | loading | Loading with spinner | Async action components | | success | Success state | Form validation components | | error | Error state | Form validation components |

🛠 Development

# Clone the repository
git clone https://github.com/gaureshpai/reactnativeepictrailsds.git
cd reactnativeepictrailsds


```bash
# Clone the demo repo
git clone https://github.com/Milan-C-I/Demo-react-native-epic-trails-ds.git
cd Demo-react-native-epic-trails-ds

# Install dependencies
npm install

# Build the library
npm run build

Building the Library

# Build all formats (CommonJS, ESM, TypeScript declarations)
npm run build

# Development build with watch mode
npm run build:watch

# Type checking
npm run type-check

📅 Roadmap

✅ Completed

• Core component library (25+ components)
• Button variants with full state management
• Form and input controls with validation
• Modal and dialog primitives
• Navigation components (tabs, bottom nav)
• Layout components (grid, tiles, cards)
• Social authentication components
• Social Media Stack (Instagram-like stories)
• Iconography system with avatars and icons
• TypeScript support with full type definitions
• Dual styling system (NativeWind + React Native)
• Cross-platform compatibility (iOS, Android, Web)
• React Native 0.76.x compatibility
• Expo SDK 52 compatibility

🚧 In Progress

• Enhanced theme system with design tokens
• Advanced animation support
• Component documentation site
• Storybook integration
• Video support for Social Media Stack

🎯 Planned

• Dark mode theme variants
• Advanced accessibility features
• Performance optimizations
• Extended icon library
• Form validation utilities
• Gesture-based components

🧑‍💻 Contributing

We welcome contributions! Please refer to our contributing guidelines before submitting a PR.

1. Fork the repository
2. Create a new branch (git checkout -b feature/my-feature)
3. Commit your changes (git commit -m 'Add my feature')
4. Push to your branch (git push origin feature/my-feature)
5. Open a pull request and describe your changes

📝 License

This project is licensed under the MIT License.

🤝 Contributors

Thanks to these wonderful people: