# necolas/react-native-web

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/necolas-react-native-web).**

22,117 stars · 1,833 forks · JavaScript · mit

## Links

- GitHub: https://github.com/necolas/react-native-web
- Homepage: https://necolas.github.io/react-native-web
- awesome-repositories: https://awesome-repositories.com/repository/necolas-react-native-web.md

## Topics

`cross-platform` `css-in-js` `gui-framework` `react` `react-components` `react-dom` `react-native` `react-native-web` `react-ui`

## Description

This project is a cross-platform user interface framework that maps mobile-native component primitives to standard web elements. It enables developers to build consistent applications that function across both mobile and web environments by providing a unified library of components and shared logic.

The framework distinguishes itself through a specialized style engine that converts JavaScript object-based declarations into optimized, scoped CSS at runtime. It also features a responsive layout engine that implements a flexbox-based system, ensuring that interfaces adapt dynamically to different screen sizes, orientations, and system color preferences. To maintain consistency across platforms, the project includes a synthetic event normalization layer that unifies interactions from various input devices and browsers.

Beyond its core rendering capabilities, the project provides a comprehensive accessibility layer that automatically maps component roles to semantic HTML and manages focus states for assistive technologies. It supports advanced development workflows including server-side rendering, platform-specific module resolution, and the ability to wrap existing web components with native-style properties.

The repository includes full type definitions for static analysis and is designed to be installed as a dependency within standard JavaScript development environments.

## Tags

### User Interface & Experience

- [Cross-Platform UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/cross-platform-ui-frameworks.md) — Maps mobile-native interface components to standard web elements for consistent cross-platform application development.
- [Cross-Platform Development](https://awesome-repositories.com/f/user-interface-experience/cross-platform-development.md) — Provides shared, platform-agnostic components to render consistent interfaces across mobile and web environments. ([source](https://necolas.github.io/react-native-web/docs/about-project/))
- [Native UI Component Mappers](https://awesome-repositories.com/f/user-interface-experience/native-ui-component-mappers.md) — Maps mobile-native interface components to equivalent web elements for cross-platform development. ([source](https://necolas.github.io/react-native-web/docs/react-native-compatibility/))
- [Styling Systems](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems.md) — Provides a style engine that converts JavaScript objects into optimized, scoped CSS for consistent component rendering. ([source](https://necolas.github.io/react-native-web/docs/styling))
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Allows defining visual properties using JavaScript objects to eliminate the need for external style files. ([source](https://necolas.github.io/react-native-web/docs))
- [JavaScript Style Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/javascript-style-engines.md) — Converts JavaScript object-based declarations into optimized, scoped CSS at runtime for consistent component styling.
- [Scoped Style Generators](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/scoped-style-generators.md) — Converts object-based style declarations into optimized, scoped CSS for performant component styling.
- [Accessibility Layers](https://awesome-repositories.com/f/user-interface-experience/accessibility-layers.md) — Automatically maps component roles to semantic HTML and manages focus states to ensure compatibility with screen readers.
- [Responsive Layout Engines](https://awesome-repositories.com/f/user-interface-experience/declarative-layout-engines/responsive-layout-engines.md) — Implements a flexbox-based system that ensures interfaces adapt dynamically to different screen sizes and orientations.
- [Responsive Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-layouts.md) — Implements a flexbox-based layout system that adapts component designs to different screen sizes. ([source](https://necolas.github.io/react-native-web/docs/styling))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Create higher-level UI components and styling utilities by leveraging core building blocks to define reusable design systems and component interfaces. ([source](https://necolas.github.io/react-native-web/docs/unstable-apis/))
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Converts JavaScript style objects into optimized CSS to manage application appearance without external stylesheets. ([source](https://necolas.github.io/react-native-web/docs/))
- [Declarative Styling Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/inline-and-object-styling/declarative-styling-engines.md) — Converts declarative style objects into optimized CSS classes at runtime without build-time compilation. ([source](https://necolas.github.io/react-native-web/docs/style-sheet/))
- [Text Rendering](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/typography-and-iconography/text-rendering.md) — Provides primitive text rendering components with support for styling inheritance and language directionality. ([source](https://necolas.github.io/react-native-web/docs/text/))
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Applies standard accessibility attributes to components to ensure compatibility with assistive technologies. ([source](https://necolas.github.io/react-native-web/docs/accessibility/))
- [Color Scheme Managers](https://awesome-repositories.com/f/user-interface-experience/color-scheme-managers.md) — Retrieve the current system color scheme and track changes to update application styles or rendering logic dynamically based on user settings. ([source](https://necolas.github.io/react-native-web/docs/appearance/))
- [HTML Element Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/html-element-wrappers.md) — Maps component roles to native HTML elements automatically to provide semantic structure. ([source](https://necolas.github.io/react-native-web/docs/accessibility/))
- [Declarative Component Architectures](https://awesome-repositories.com/f/user-interface-experience/declarative-component-architectures.md) — Translates high-level interface primitives into standard web elements while preserving accessibility and platform-specific behavioral expectations.
- [Flexbox Layout Engines](https://awesome-repositories.com/f/user-interface-experience/flexbox-layout-engines.md) — Manages flexbox-based layouts and viewport tracking to ensure interfaces adapt dynamically to different screen sizes.
- [Flexbox Layouts](https://awesome-repositories.com/f/user-interface-experience/flexbox-layouts.md) — Organizes interface elements using a flexible box model for consistent component positioning and stacking. ([source](https://necolas.github.io/react-native-web/docs/view/))
- [Virtualized Lists](https://awesome-repositories.com/f/user-interface-experience/virtualized-lists.md) — Implements virtualized list rendering to efficiently display large datasets by only rendering visible items. ([source](https://necolas.github.io/react-native-web/docs/lists/))
- [Browser Style Normalizers](https://awesome-repositories.com/f/user-interface-experience/browser-style-normalizers.md) — Translates style declarations into standard CSS with automatic vendor prefixing for consistent cross-browser rendering. ([source](https://necolas.github.io/react-native-web/docs/browser-compatibility/))
- [Focus Management](https://awesome-repositories.com/f/user-interface-experience/focus-management.md) — Provides programmatic control over input focus states to manage user interaction flow. ([source](https://necolas.github.io/react-native-web/docs/text-input/))
- [Interaction Handlers](https://awesome-repositories.com/f/user-interface-experience/interaction-handlers.md) — Maps user interactions like hover, focus, and press to consistent component behaviors. ([source](https://necolas.github.io/react-native-web/docs/styling))
- [Keyboard Navigation Utilities](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation-utilities.md) — Manages tab order and programmatic focus to support keyboard-only navigation. ([source](https://necolas.github.io/react-native-web/docs/accessibility/))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/modal-overlays.md) — Provides modal overlay components that layer content above the main application view. ([source](https://necolas.github.io/react-native-web/docs/modal/))
- [Scrollable Containers](https://awesome-repositories.com/f/user-interface-experience/scrollable-containers.md) — Provides scrollable containers for navigating content overflow via touch or pointer interactions. ([source](https://necolas.github.io/react-native-web/docs/scroll-view/))
- [Interaction State Variants](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/interaction-state-variants.md) — Manages hover, focus, and press states through event listeners and interaction-aware components. ([source](https://necolas.github.io/react-native-web/docs/styling/))
- [Display Scaling](https://awesome-repositories.com/f/user-interface-experience/display-scaling.md) — Calculates pixel density and scaling factors to ensure consistent visual sizing on high-resolution displays. ([source](https://necolas.github.io/react-native-web/docs/pixel-ratio/))
- [Layout & Positioning](https://awesome-repositories.com/f/user-interface-experience/layout-positioning.md) — Adjusts component positioning and styling automatically based on writing direction and language context. ([source](https://necolas.github.io/react-native-web/docs/localization/))
- [Multi-Touch Tracking Systems](https://awesome-repositories.com/f/user-interface-experience/multi-touch-tracking-systems.md) — Maintains registries of active touch points to consolidate multiple pointer inputs into complex gesture streams. ([source](https://necolas.github.io/react-native-web/docs/pan-responder/))
- [Pointer Event Handlers](https://awesome-repositories.com/f/user-interface-experience/pointer-event-handlers.md) — Track mouse, touch, and stylus interactions on screen elements to ensure consistent behavior and accessibility across different input devices used to navigate the user interface. ([source](https://necolas.github.io/react-native-web/docs/interactions))
- [Responsive Images](https://awesome-repositories.com/f/user-interface-experience/responsive-images.md) — Supports responsive image rendering with automatic scaling and aspect ratio maintenance. ([source](https://necolas.github.io/react-native-web/docs/image/))
- [Style Inheritance Systems](https://awesome-repositories.com/f/user-interface-experience/style-inheritance-systems.md) — Manages the propagation of layout and text properties through the component tree to ensure consistent styling across nested subtrees. ([source](https://necolas.github.io/react-native-web/docs/styling))
- [System Theme Detection](https://awesome-repositories.com/f/user-interface-experience/system-theme-detection.md) — Monitors system-level theme settings to automatically update application appearance between light and dark modes. ([source](https://necolas.github.io/react-native-web/docs/use-color-scheme/))
- [Text Input Widgets](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets.md) — Provides accessible text input fields supporting keyboard interaction, auto-completion, and event-driven state updates. ([source](https://necolas.github.io/react-native-web/docs/text-input/))

### Web Development

- [Web Interface Components](https://awesome-repositories.com/f/web-development/frontend-development-tools/web-interface-components.md) — Maps mobile-native interface primitives to standard web elements for consistent cross-platform development. ([source](https://necolas.github.io/react-native-web/docs))
- [Synthetic Event Systems](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling/synthetic-event-systems.md) — Wraps native browser events into a unified interface to ensure consistent interaction behavior across different input devices and browsers.
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Supports server-side rendering by generating static HTML and CSS for components. ([source](https://necolas.github.io/react-native-web/docs/app-registry/))
- [Server Components](https://awesome-repositories.com/f/web-development/rendering-templating/server-side-rendering-utilities/server-components.md) — Enables server-side rendering of component trees to improve initial load performance. ([source](https://necolas.github.io/react-native-web/docs/rendering/))
- [Directional](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/directives/directional.md) — Flips component styles and subtree directions automatically to support different interface orientations and languages. ([source](https://necolas.github.io/react-native-web/docs/localization))
- [Context Providers](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/directives/directional/context-providers.md) — Monitor the current language and writing direction of the component tree and update descendants whenever these values change in an ancestor element. ([source](https://necolas.github.io/react-native-web/docs/use-locale-context/))
- [Web-Native Integration Bridges](https://awesome-repositories.com/f/web-development/web-native-integration-bridges.md) — Redirect native-specific imports to web-compatible implementations during build or server-side rendering to ensure consistent behavior across different platforms. ([source](https://necolas.github.io/react-native-web/docs/setup/))

### Development Tools & Productivity

- [Module Resolvers](https://awesome-repositories.com/f/development-tools-productivity/cross-platform-build-targets/module-resolvers.md) — Select and import the appropriate file variant for a component based on the target platform during the build process to handle cross-platform differences. ([source](https://necolas.github.io/react-native-web/docs/multi-platform/))
- [Bundle Optimizers](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-performance-optimization/build-optimization-tools/bundle-optimizers.md) — Prunes unused modules and applies build-time transformations to reduce final application bundle size. ([source](https://necolas.github.io/react-native-web/docs/setup/))

### Graphics & Multimedia

- [DOM and Web Rendering Strategies](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies.md) — Mounts component trees into the browser DOM with global context and viewport styling. ([source](https://necolas.github.io/react-native-web/docs/rendering/))

### Operating Systems & Systems Programming

- [Platform Detection](https://awesome-repositories.com/f/operating-systems-systems-programming/kernel-core-internals/system-programming-primitives/system-abstractions/cross-platform-compatibility-layers/platform-detection.md) — Identify the operating environment at runtime to allow for conditional logic or platform-specific component rendering within an application. ([source](https://necolas.github.io/react-native-web/docs/platform/))

### Testing & Quality Assurance

- [Web Accessibility](https://awesome-repositories.com/f/testing-quality-assurance/accessibility-visual-testing/web-accessibility.md) — Maps component roles to semantic HTML and manages focus states to ensure compatibility with assistive technologies.

### DevOps & Infrastructure

- [Platform-Specific Resolution Strategies](https://awesome-repositories.com/f/devops-infrastructure/cicd-pipeline-automation/core-build-engines/build-toolchains/platform-specific-resolution-strategies.md) — Selects and imports the appropriate file variant for a component based on the target platform during the build process.

### Programming Languages & Runtimes

- [Component Type Definitions](https://awesome-repositories.com/f/programming-languages-runtimes/programming-language-varieties/programming-languages/type-systems/typescript-declaration-tooling/component-type-definitions.md) — Integrate type declarations into development environments to enable static analysis and autocompletion for cross-platform component properties and styling. ([source](https://necolas.github.io/react-native-web/docs/typescript-support/))

### Mobile Development

- [Native API Bridges](https://awesome-repositories.com/f/mobile-development/android-ecosystem/android-platform-integrations/native-platform-access/native-api-bridges.md) — Provides bridges to access native platform APIs from a unified cross-platform codebase. ([source](https://necolas.github.io/react-native-web/docs/react-native-compatibility/))

### Software Engineering & Architecture

- [Application Lifecycle Monitors](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-monitors.md) — Tracks application foreground and background states to trigger lifecycle callbacks across platforms. ([source](https://necolas.github.io/react-native-web/docs/app-state/))