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.

• 🎯 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

npm install reactnativeepictrailsds # or yarn add reactnativeepictrailsds

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.

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> ); />

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> ); }

import { Button } from "reactnativeepictrailsds"; <Button label="Styled Button" className="bg-blue-500 rounded-lg shadow-md" />

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, }} />

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

# 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

# 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

• 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

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

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

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

This project is licensed under the MIT License.

Thanks to these wonderful people: