📱 Demo App Screenshots​

Experience our comprehensive React Native UI library with live examples and interactive demos:

🏃‍♂️ Quick Start​

Get the @joe111/neo-ui demo running in minutes with these simple steps:

git clone https://github.com/Joe-Moussally/react-native-neo-ui.git
cd react-native-neo-ui/example

npm install

npm start

git clone https://github.com/Joe-Moussally/react-native-neo-ui.git
cd react-native-neo-ui/example

yarn install

yarn start

git clone https://github.com/Joe-Moussally/react-native-neo-ui.git
cd react-native-neo-ui/example

pnpm install

pnpm start

🎯 Running Options​

Once you start the development server, you can run the demo on different platforms:

🎨 What's Inside @joe111/neo-ui​

The demo application showcases our comprehensive React Native UI library with TypeScript support:

Core Components​

• Button - 10+ variants (primary, secondary, outline, ghost, soft, text, danger, success, warning, info) with haptic feedback
• Typography - Theme-aware text component with predefined styles and variants
• Box - Flexible container with theme-aware spacing and styling
• TextField - Input field with validation, theming, and multiple states
• Avatar - User profile pictures with fallbacks and group support

Feedback Components​

• Alert - Alert messages with different severity levels and customizable styling
• Toast - Global toast notifications with state management and animations
• Skeleton - Loading placeholders with shimmer effects
• Badge - Small status indicators with customizable colors and positions
• Rating - Interactive star rating component with custom icons

Interactive Components​

• Chip - Compact elements for tags, filters, or actions with selection states
• Ticker - Animated text ticker for scrolling content

Advanced Components​

• ParallaxScrollView - Smooth scrolling with parallax effects and animations
• ThemedText - Text component that automatically adapts to theme changes
• ThemedView - View component with automatic theme integration

Theme System​

• ThemeProvider - Comprehensive theme system with light/dark mode support
• useTheme Hook - Access theme values and utilities in any component
• Custom Themes - Fully customizable colors, typography, spacing, and more

Navigation Integration​

• Navigation Components - Ready-to-use navigation helpers
• React Navigation - Full integration with React Navigation ecosystem
• Screen Wrappers - Safe area handling and navigation-aware components

✨ Key Features​

What makes @joe111/neo-ui special:

• 🎨 Comprehensive Theme System - Fully customizable colors, typography, and spacing
• 📱 React Native First - Built specifically for React Native with Expo support
• 🔧 TypeScript Support - Full type safety and IntelliSense
• 🚀 Performance Optimized - Lightweight and efficient with tree shaking
• 🎯 Navigation Ready - Integrated with React Navigation
• 📦 Individual Imports - Tree-shakeable components for optimal bundle size
• 🔄 Reanimated Integration - Smooth animations with react-native-reanimated
• 🎪 Haptic Feedback - Native haptic feedback for enhanced UX

🛠️ Development Commands​

Quick reference for common development tasks:

# Start development server
npm start

# Run on specific platforms
npm run ios      # iOS simulator
npm run android  # Android emulator
npm run web      # Web browser

# Build the library
npm run build

# Run tests
npm test

# Type checking
npm run typecheck

# Linting
npm run lint

📦 Installation in Your Project​

Ready to use @joe111/neo-ui in your own project?

npm install @joe111/neo-ui

Peer Dependencies​

npm install react react-native @react-navigation/native @react-navigation/bottom-tabs @react-navigation/elements react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg

Basic Setup​

import React from "react";
import { ThemeProvider } from "@joe111/neo-ui";
import { Button, Typography, Box } from "@joe111/neo-ui";

export default function App() {
  return (
    <ThemeProvider>
      <Box padding="lg">
        <Typography variant="h1">Welcome to Neo UI</Typography>
        <Button variant="primary" onPress={() => console.log("Hello!")}>
          Get Started
        </Button>
      </Box>
    </ThemeProvider>
  );
}

🌟 Next Steps​

After exploring the demo:

1. 📖 Install @joe111/neo-ui in your project
2. 📚 Read the Documentation for detailed component APIs
3. 🎯 Check Examples for implementation patterns
4. 💬 Join our Community for support
5. 🐛 Report Issues to help us improve