React Native Epic Trails Design System

A modular, themeable, and production-ready React Native design system crafted for outdoor and adventure applications. It includes pre-styled components, built-in theming support, and flexible customization.

⚠️ Versions <1.0.0 have been deprecated in favor of a fully rewritten architecture. Please upgrade to v1.x or above for improved performance, stability, and maintainability.

🚀 Features

⚛️ Pre-built, customizable React Native components
🎨 Variant and theme support (Primary / Secondary buttons, etc.)
🧱 Utility class support via Tailwind-like styles (using libraries like NativeWind)
🌀 State-driven component rendering (hover, pressed, disabled, loading)
✅ Production-ready and actively maintained

📦 Installation

npm install reactnativeepictrailsds
# or
yarn add reactnativeepictrailsds

Make sure you’ve set up NativeWind (or similar library) for class-based styles if you're using Tailwind-style classNames.

✨ Usage Example – `RectButton`

import React from "react";
import { View } from "react-native";
import RectButton from "reactnativeepictrailsds";

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <RectButton
        label="Start Exploring"
        size="large"
        variant="primary"
        state="default"
      />
    </View>
  );
}

🧩 RectButton Props

Prop	Type	Default	Description
`label`	`string`	`"Button"`	Text displayed inside the button
`size`	`"small"` \| `"medium"` \| `"large"`	`"medium"`	Controls the button size
`variant`	`"primary"` \| `"secondary"`	`"primary"`	Defines the button color style
`state`	`"default"` \| `"pressed"` \| `"hover"` \| `"disabled"` \| `"loading"`	`"default"`	Defines the current visual interaction state
`disabled`	`boolean`	`false`	Disables the button interaction if `true`
`background`	`string`	`undefined`	Custom background color, overrides variant/state styling

ℹ️ When state is "loading", a spinner is shown and label is hidden.

🧪 Component States Preview

State	Description
`default`	Default style of the button
`pressed`	When button is actively pressed
`hover`	Hover state (web only)
`disabled`	Grayed out & non-interactive
`loading`	Spinner shown instead of text

🛠 Development

git clone https://github.com/gaureshpai/reactnativeepictrailsds.git
cd reactnativeepictrailsds
npm install
npx expo start

📅 Roadmap

RectButton with state variants
Forms and input controls
Typography tokens and components
Modal, Header, and Layout primitives
Full theming and dark mode support
Component documentation and Storybook/Expo integration
Improved accessibility (VoiceOver, TalkBack, ARIA)

🧑‍💻 Contributing

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

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

📝 License

This project is licensed under the MIT License.

🤝 Contributors

Thanks to these wonderful people:

reactnativeepictrailsds

Package Exports

Readme