A modern, production-ready design system for React Native โ 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 ac
npm install reactnativeepictrailsdsbash
npm install reactnativeepictrailsds
or
yarn add reactnativeepictrailsds
`
$3
For enhanced className support (optional - components work with pure React Native styles too):
`bash
npm install nativewind tailwindcss
`
Follow the NativeWind installation guide for your platform.
โจ Quick Start
`tsx
import React from "react";
import { View } from "react-native";
import {
Button,
NormalInput,
Card,
SocialLogin,
SocialMediaStack,
StoryProgressBar
} from "reactnativeepictrailsds";
export default function App() {
return (
placeholder="Enter your email"
size="full"
/>
title="Sign In"
variant="primary"
onPress={() => console.log('Pressed!')}
/>
google
apple
onGoogleSignIn={() => console.log('Google')}
onAppleSignIn={() => console.log('Apple')}
/>
);
/>
`
$3
`tsx
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 (
totalStories={contentItems.length}
activeStoryIndex={activeIndex}
/>
contentItems={contentItems}
duration={5000}
onActiveIndexChange={(index: number) => setActiveIndex(index)}
index={activeIndex}
/>
);
}
`
๐งฉ Available Components
$3
| 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 |
$3
| 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 |
$3
| 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 |
$3
| 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 |
$3
| 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 |
$3
| Component | Description | Key Props |
|-----------|-------------|----------|
| SocialLogin | Social login buttons | google, apple, facebook, email |
| TypeDoc | Terms agreement with checkbox | label, buttonLabel, onAccept |
$3
| 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 |
$3
| Component | Description | Key Props |
|-----------|-------------|----------|
| Iconography | Icon component with avatars and placeholders | type, iconName, size, initials |
$3
| 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
$3
`tsx
import { Button } from "reactnativeepictrailsds";
label="Styled Button"
className="bg-blue-500 rounded-lg shadow-md"
/>
`
$3
`tsx
import { Button } from "reactnativeepictrailsds";
label="Styled Button"
style={{
backgroundColor: '#3b82f6',
borderRadius: 8,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
}}
/>
`
$3
`tsx
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
`bash
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
`
$3
`bash
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
$3
* 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
$3
* Enhanced theme system with design tokens
* Advanced animation support
* Component documentation site
* Storybook integration
* Video support for Social Media Stack
$3
* 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`)