wix/react-native-ui-lib
React Native Ui Lib
This project is a React Native UI library and mobile component framework designed for building consistent, themed mobile applications. It provides a collection of reusable user interface components and layout tools, functioning as a cross-platform design system to maintain visual uniformity across different mobile platforms.
The toolkit distinguishes itself through a themed UI approach, utilizing global design foundations for typography, color palettes, and spacing. It allows for dynamic theme configuration and the use of style presets to ensure standardized branding across an entire project.
The library covers a broad range of capability areas, including mobile form implementation with various input pickers and text fields, and complex layout composition using carousels and gesture-aware containers. It also includes a suite of overlays such as modal dialogs and navigation drawers, as well as user experience enhancements like haptic feedback and toast notification systems.
The project is organized to support selective component imports and tree-shakable module exports to reduce the final application bundle size.
Features
- React Native Components - Provides a comprehensive set of pre-built user interface elements designed specifically for React Native mobile application development.
- Screen Layout Libraries - Ships a library of pre-defined screen structures and layouts for mobile applications.
- React Native UI Libraries - Offers a collection of reusable user interface components and layout tools specifically designed for the React Native ecosystem.
- Cross-Platform Implementations - Provides a framework implementation that maintains visual consistency for typography and colors across different mobile operating systems.
- Design System Foundations - Establishes foundational infrastructure for colors, typography, and spacing to enforce consistent visual themes.
- Design System Management - Centralizes visual styles and reusable constants to maintain consistency across the mobile design system.
- Design Tokens - Provides centralized configurations that map visual properties to design tokens for consistent styling.
- Generic Button Components - Ships interactive button components with configurable styles and states for mobile interfaces.
- Selection Pickers - Provides specialized picker components for selecting multiple options from a defined list.
- Native Mobile Design Systems - Provides a framework for building consistent, adaptive native mobile interfaces across various device types.
- Mobile Component Libraries - Ships a collection of pre-styled interface elements optimized for touch interactions and mobile layouts.
- Mobile Interface Composition - Provides a system for composing mobile screens using a set of core components to ensure design consistency.
- Component Theming - Provides mechanisms for overriding visual properties and design tokens on specific component instances.
- Themed Component Libraries - Provides a set of reusable UI components with integrated systems for consistent visual styling via variables and presets.
- Radio Groups - Implements radio group components for managing single-choice selections from a set of options.
- Component Styling - Offers a system for applying and managing visual styles and presets to ensure consistent branding across components.
- Text Input Widgets - Provides text input widgets for capturing user text entry with integrated validation.
- Native API Bridges - Implements bridges to access platform-specific features like haptic feedback and native pickers while maintaining a shared codebase.
- Mobile Experience Enhancements - Adds polished visual effects, haptic feedback, and gesture-based interactions to enhance the native feel of the app.
- Carousel Components - Ships carousel components for displaying sequences of scrollable items in various layouts.
- Collapsible Content Stacks - Provides collapsible content stacks for grouping multiple elements with configurable animations.
- Component Composition Patterns - Implements architectural approaches for building complex mobile UI elements from atomic building blocks.
- Drawer Components - Implements slide-out drawer components using gesture-based interactions for mobile application navigation.
- Modal Components - Provides reusable modal dialog components specifically designed for the React Native ecosystem.
- Native System Pickers - Integrates native system interfaces for selecting dates and times on mobile devices.
- Gesture-Based Dismissal - Implements gesture-based dismissal containers that respond to directional swipes.
- Pan-to-Dismiss Containers - Provides gesture-aware containers that intercept touch events to trigger animations like pan-to-dismiss.
- Haptic Feedback Controllers - Integrates haptic feedback controllers to trigger device vibrations for tactile confirmation.
- Interaction Feedback Effects - Implements visual interaction feedback effects, such as opacity changes on tap.
- Mobile Form Implementations - Provides interactive input fields, pickers, and validation logic to capture and manage user data on mobile devices.
- Modal Overlays - Provides modal overlay components that require user interaction to dismiss, including configurable headers and hint text.
- Prop-Based Utility Styling - Uses strongly typed component properties to apply atomic visual properties directly to UI elements.
- Toast Notification Systems - Provides a system for displaying transient, positioned toast notifications for user feedback.
- Spacing Modifiers - Provides spacing modifiers to ensure uniform gaps between components using design presets.
- React Native - Listed in the “React Native” section of the Awesome Ui Component Library awesome list.
