Skip to content

reactnativeepictrailsds 1.0.1

Install from the command line:
Learn more about npm packages
$ npm install @gaureshpai/reactnativeepictrailsds@1.0.1
Install via package.json:
"@gaureshpai/reactnativeepictrailsds": "1.0.1"

About this version

React Native Epic Trails Design System

License Version TypeScript

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

  • [x] 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.

  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:

Details


Assets

  • reactnativeepictrailsds-1.0.1.tgz

Download activity

  • Total downloads 0
  • Last 30 days 0
  • Last week 0
  • Today 0

Recent versions

View all