# @hoddy-ui/core **The complete UI component library for React Native and Expo applications** A comprehensive, production-ready UI component library that follows Material Design principles with a modern twist. Built with TypeScript and optimized for React Native and Expo applications. ## ✨ Features - 🎨 **20+ Production-Ready Components** - From basic buttons to complex forms - 🌗 **Dark Mode Support** - Automatic theme switching with system preference detection - 🔧 **TypeScript First** - Full type safety and IntelliSense support - ⚡ **Performance Optimized** - Minimal bundle size with tree shaking - 🎯 **Accessibility Ready** - WCAG compliant components - 🔌 **Highly Customizable** - Extensive theming and configuration options - 📱 **Cross Platform** - Works seamlessly on iOS and Android ## 📦 Installation ```bash npm install @hoddy-ui/core # or yarn add @hoddy-ui/core ``` ### Peer Dependencies Install the required peer dependencies: ```bash npm install @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters react-native-reanimated ``` Or with yarn: ```bash yarn add @expo/vector-icons @react-native-async-storage/async-storage @react-navigation/native expo-navigation-bar expo-system-ui react-native-safe-area-context react-native-size-matters react-native-reanimated ``` **Important**: Make sure to follow the [react-native-reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/3.x/fundamentals/getting-started) for platform-specific setup as it requires additional configuration for iOS and Android. ## 🚀 Quick Start ### Basic Setup 1. **Initialize the library** (optional but recommended): ```tsx import { initialize } from "@hoddy-ui/core"; initialize({ // Google Maps API key for Locator component googleMapApiKey: "your-google-maps-api-key", // Edge-to-edge display (affects Android navigation bar styling) edgeToEdge: false, // Custom colors colors: { primary: { main: "#6366f1", light: "#818cf8", dark: "#4f46e5", }, }, // Typography settings typography: { fontFamily: "Inter-Regular", fontWeights: { 400: "Inter-Regular", 500: "Inter-Medium", 600: "Inter-SemiBold", 700: "Inter-Bold", }, }, }); ``` 2. **Wrap your app with the theme provider**: ```tsx import React from "react"; import { UIThemeProvider } from "@hoddy-ui/core"; import App from "./App"; export default function Root() { return ( ); } ``` 3. **Start using components**: ```tsx import React from "react"; import { View } from "react-native"; import { Typography, Button, TextField, Animator, useColors, useFadeAnimation, } from "@hoddy-ui/core"; export default function HomeScreen() { const colors = useColors(); return ( Welcome to Hoddy UI! // Blink animation (continuous) This will blink continuously // Float animation This will float up and down // Roll animation This will roll and rotate // Thrown up animation This will spring up from bottom ``` **Available Animation Types:** 1. **fade**: Simple fade in/out using opacity (native performance) 2. **grow**: Scale-based growth animation with easing 3. **slide**: Directional slide animations from screen edges 4. **blink**: Continuous opacity blinking with repeat 5. **float**: Floating up/down motion with fade effects 6. **roll**: Combined rotation and translation effects 7. **thrownup**: Spring-based upward animation with physics All animations run on the UI thread for optimal performance and smooth 60fps animations. **Using Animation Hooks Directly:** You can also use the animation hooks directly for custom implementations with react-native-reanimated: ```tsx import { useFadeAnimation, useSlideAnimation } from "@hoddy-ui/core"; import Animated from "react-native-reanimated"; const MyComponent = () => { const { animatedStyle } = useFadeAnimation({ duration: 800, closeAfter: 2000, }); return ( Custom animated content ); }; ``` **Performance Benefits:** With react-native-reanimated, all animations: - **Run on the UI thread** for better performance - **Maintain 60fps** even during JavaScript thread blocking - **Use native drivers** automatically - **Support worklets** for complex animation logic - **Provide smooth gestures** and interactions **Migration from Legacy API:** Replace old individual animation components: ```tsx // Old way Content // New way Content ``` ### FlashMessage Display toast notifications and alerts. **Props:** | Prop | Type | Default | Description | | ---------- | --------------------------------------------- | -------- | ---------------------- | | `message` | `string` | - | Message text | | `type` | `"success" \| "error" \| "warning" \| "info"` | `"info"` | Message type | | `duration` | `number` | `3000` | Display duration in ms | | `position` | `"top" \| "bottom"` | `"top"` | Message position | **Usage:** ```tsx import { showMessage } from "@hoddy-ui/core"; // Show a success message showMessage({ message: "Profile updated successfully!", type: "success", }); ``` ## 🔧 Hooks ### useColors Access the current theme's color palette: ```tsx import { useColors } from "@hoddy-ui/core"; function MyComponent() { const colors = useColors(); return ( {/* Component content */} ); } ``` ### useTheme Access and control the current theme: ```tsx import { useTheme } from "@hoddy-ui/core"; function ThemeAwareComponent() { const { themeState, themeDispatch } = useTheme(); const toggleTheme = () => { themeDispatch({ type: themeState.mode === "dark" ? "light" : "dark", }); }; return