@joe111/neo-ui

A modern, customizable React Native UI library built with TypeScript

🌐 Visit Neo-UI.dev | 📚 Documentation

🚧 BETA DEVELOPMENT 🚧

⚠️ This library is currently in beta development (v1.3.13) and is still under active development. APIs may change, and some features may not be fully stable. Use with caution in production environments.

✨ Features

• 🎨 Comprehensive Theme System - Fully customizable colors, typography, and spacing
• 🧩 Rich Component Library - 15+ pre-built components for common UI patterns
• 📱 React Native First - Built specifically for React Native with Expo support
• 🔧 TypeScript Support - Full type safety and IntelliSense
• 🎯 Navigation Ready - Integrated navigation components with React Navigation
• 🚀 Performance Optimized - Lightweight and efficient
• 📦 Tree Shakeable - Individual component imports for optimal bundle size
• 🎭 Modern Design - Inspired by Material-UI with custom NeoUI styling

📦 Installation

npm install @joe111/neo-ui
# or
yarn add @joe111/neo-ui

Peer Dependencies

Install the required 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

Additional Dependencies

The package also requires:

npm install @expo/vector-icons

🚀 Quick Start

1. Setup Theme Provider

Wrap your app with the ThemeProvider:

import React from 'react';
import { ThemeProvider } from '@joe111/neo-ui';
import { YourApp } from './YourApp';

export default function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

2. Use Components

You can import and use components directly:

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

export function YourApp() {
  return (
    <Box padding="lg">
      <Typography variant="h1">Welcome to NeoUI</Typography>
      <Button variant="primary" onPress={() => console.log('Hello NeoUI!')}>
        Get Started
      </Button>
    </Box>
  );
}

🧩 Available Components

Layout & Navigation

• Box - Flexible container with theme-aware spacing and styling
• Screen - Screen wrapper with safe area handling and navigation integration
• ParallaxScrollView - Parallax scroll view component

Typography & Text

• Typography - Text component with predefined styles and variants
• ThemedText - Theme-aware text component
• ThemedView - Theme-aware view component

Form Controls & Input

• Button - Customizable button with multiple variants and states
• TextField - Input field with validation, theming, and form integration
• Chip - Compact elements for tags, filters, and actions

Feedback & Notifications

• Alert - Alert messages with different severity levels and customizable styling
• Toast - Toast notifications with global state management and positioning
• Skeleton - Loading placeholders with customizable shapes and animations
• Rating - Interactive star rating component

Data Display & Indicators

• Avatar - User profile pictures with fallbacks and group support
• Badge - Small status indicators and notification badges
• Ticker - Animated text ticker for scrolling content

Theme System

• ThemeProvider - Context provider for theme management
• useTheme - Hook for accessing theme values
• createTheme - Utility for creating custom themes

🎨 Theming System

Default Theme Usage

import { ThemeProvider, useTheme } from '@joe111/neo-ui';

export function CustomComponent() {
  const theme = useTheme();

  return (
    <View style={{ backgroundColor: theme.colors.primary }}>
      <Text style={theme.typography.h1}>Styled with theme</Text>
    </View>
  );
}

📱 Demo & Examples

Demo Repository

Experience all components in action with our comprehensive demo app:

• 📖 Demo Documentation - Detailed demo guide with screenshots
• Clone and run the demo app locally to explore all components

Run Demo App

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

# Install dependencies
npm install

# Start the demo app
npm start

📚 Documentation

• 📖 Full Documentation - Complete API reference
• 🔄 Changelog - Version history and updates

🚀 Recent Updates (v1.3.13)

• ✅ Individual Module Imports - Tree-shakeable imports for better bundle optimization
• 🐛 Bug Fixes - Resolved import path issues and npm publishing
• 📦 Build Improvements - Enhanced build process with better TypeScript support
• 🔧 Documentation - Updated examples and usage guides

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

📄 License Notice: Neo UI is source-available under a custom license.
You're free to use it in personal or commercial apps and projects.
Redistribution or republishing as part of another library, toolkit, or competing product is not allowed without written permission.

Custom Source-Available License © Joe Moussally

🙏 Support & Community

• ⭐ Star on GitHub - Show your support!
• 🐛 Report Issues - Help us improve
• 💬 Discussions - Ask questions and share ideas
• 📧 Email Support - Direct contact

Made with create-react-native-library