necolas/react-native-web

This system is a library that enables React Native applications to run in web browsers by mapping React Native APIs and components to their DOM equivalents. It provides core UI primitives, layout tools, and interaction handlers while ensuring accessibility compliance through ARIA attribute translation. The codebase includes utilities for event handling and ref management, along with build-time tooling for module resolution and testing.

101 changes.

The project reorganized into a monorepo structure and introduced a Babel plugin to streamline React Native import resolution. This period focused on modernizing the public API surface by refactoring core components to support React 18, React Server Components, and W3C accessibility standards, while adding new features like Modal and KeyboardAvoidingView.

41 changes.

This period focused on rebuilding the core interaction handling with a new Responder Event System, adding comprehensive support for hover, pointer, and keyboard events, and rewriting the StyleSheet compiler for atomic CSS. It also included the initial release of the official documentation site and interactive examples, alongside significant improvements to type safety and testing infrastructure.

The AccessibilityInfo module now provides stub implementations for querying accessibility settings, specifically adding support for detecting whether the user prefers reduced motion via the \isReduceMotionEnabled\ method and the \reduceMotionChanged\ event listener. It also exposes \isScreenReaderEnabled\ (aliased as the deprecated \fetch\) and placeholder methods for \setAccessibilityFocus\ and \announceForAccessibility\, allowing React Native Web applications to access these accessibility features with graceful fallbacks when DOM APIs are unavailable.

packages/react-native-web/src/exports/AccessibilityInfo · high confidence

The Appearance module is now available, allowing users to detect the system's preferred color scheme (light or dark) via \getColorScheme()\ and subscribe to changes using \addChangeListener()\. This implementation leverages the browser's \prefers-color-scheme\ media query and is marked with 'use client' to ensure compatibility with React Server Components.

packages/react-native-web/src/exports/Appearance · high confidence

The benchmark suite now includes a new implementation using CSS Modules for styling. This adds specific React components (Box, Dot, View, Provider) and their corresponding scoped CSS files (box-styles.css, dot-styles.css, view-styles.css) to the \packages/benchmarks/src/implementations/css-modules\ directory, allowing performance comparisons against other styling approaches.

packages/benchmarks/src/implementations/css-modules · high confidence

The I18nManager module is now exported from react-native-web, providing allowRTL, forceRTL, and getConstants methods. This enables applications to manage right-to-left (RTL) layout directionality, with getConstants currently returning isRTL as false by default.

packages/react-native-web/src/exports/I18nManager · high confidence

The Keyboard module now exposes a \isVisible()\ method, allowing users to programmatically check the current visibility state of the keyboard. While the current implementation returns \false\ as a placeholder, this API aligns with the standard React Native Keyboard interface and prepares the module for future integration with virtual keyboard APIs.

packages/react-native-web/src/exports/Keyboard · high confidence

The package now exports NativeEventEmitter, re-exporting the implementation from the internal vendor directory to make it available for use.

packages/react-native-web/src/exports/NativeEventEmitter · high confidence

Users now have access to a new SafeAreaView component that automatically applies padding based on the device's safe area insets. The implementation detects browser support for the legacy iOS 11 CSS \constant\ function and falls back to the standard \env\ function, ensuring correct layout on older iOS Safari versions as well as modern browsers.

packages/react-native-web/src/exports/SafeAreaView · high confidence

The Share module is now available in react-native-web, allowing applications to trigger the native web share dialog via the Web Share API when supported by the browser. The implementation validates that content includes a URL or message, maps the React Native content structure to the browser's expected format, and provides constants for shared and dismissed actions.

packages/react-native-web/src/exports/Share · high confidence

The VirtualizedList component is now exported from react-native-web with a 'use client' directive, enabling its use in React Server Components environments. This change ensures that the VirtualizedList component is treated as a client component, allowing it to function correctly in server-side rendering contexts where client-side interactivity is required.

packages/react-native-web/src/exports/FlatList, packages/react-native-web/src/exports/SectionList, packages/react-native-web/src/exports/VirtualizedList · high confidence

A new \normalizeColor\ module has been added to the \react-native-web\ package to improve compatibility with React Native's color handling. This module normalizes color inputs by checking if a string is a valid web color, and if not, it delegates to the existing \processColor\ export to convert numeric color integers into standard \rgba()\ strings, ensuring consistent color representation across platforms.

packages/react-native-web/src/modules/normalizeColor · high confidence

The benchmark suite now includes a new 'inline-styles' implementation, providing a set of React components (Box, Dot, View, and Provider) that render elements using inline CSS styles. This addition allows users to compare the performance of this specific styling approach against other implementations in the benchmark suite.

packages/benchmarks/src/implementations/inline-styles · high confidence

A new package has been added to provide interactive examples for the React Native for Web documentation website. This package uses Next.js to serve pages that render React Native components via react-native-web, including shared UI elements like a Button and an Example layout wrapper to display the demos.

packages/react-native-web-examples · high confidence

The Platform module now exposes two new read-only properties: \isTesting\, which returns true when the application is running in a test environment (detected via \process.env.NODE\_ENV\), and \Version\, which currently returns a placeholder string '0.0.0'. These additions allow developers to conditionally render or behave differently during testing and to access the library's version number.

packages/react-native-web/src/exports/Platform · high confidence

The library now includes two new utility modules: \getBoundingClientRect\ for measuring the layout of DOM elements, and \isSelectionValid\ for validating text selection state. These utilities provide foundational support for accurate layout calculations and text interaction handling within the React Native Web environment.

packages/react-native-web/src/modules/getBoundingClientRect · high confidence

Introduces a new \useLocale\ module that provides a React context (\LocaleProvider\ and \useLocaleContext\) for managing locale and writing direction, along with an \isLocaleRTL\ utility to determine if a locale is right-to-left. The RTL detection logic prioritizes the \Intl.Locale\ API for script-based detection, falling back to a hardcoded list of known RTL languages and scripts if the API is unavailable or the locale is invalid, ensuring robust handling of invalid locale strings without throwing errors.

packages/react-native-web/src/modules/useLocale · high confidence

A new utility function, multiplyStyleLengthValue, has been added to the react-native-web modules. This function allows style length values to be multiplied by a scalar while preserving their CSS units (such as px, rem, em, or %). It handles both numeric inputs and string inputs containing units, ensuring that calculations like scaling a font size or dimension maintain the correct unit suffix in the resulting style value.

packages/react-native-web/src/modules/multiplyStyleLengthValue · high confidence

The library now includes a dedicated module for \requestIdleCallback\ and \cancelIdleCallback\. In browsers that do not natively support these APIs, the module provides a fallback implementation that schedules callbacks using \setTimeout\ with a 1ms delay, simulating idle time behavior. This ensures consistent asynchronous scheduling across different browser environments.

packages/react-native-web/src/modules/requestIdleCallback · high confidence

Added new benchmark implementation files for the 'styleq' and 'stylesheet' styling approaches within the benchmarks package. The 'styleq' implementation introduces components (Box, Dot, View, Provider) that utilize the styleq library for CSS-in-JS styling, while the 'stylesheet' implementation provides equivalent components using react-native-web's StyleSheet API, enabling performance comparison between these two styling methodologies.

packages/benchmarks/src/implementations/styleq · high confidence

A new \useWindowDimensions\ hook has been added to the exports, allowing components to access current window dimensions and react to resize events. The hook is marked with 'use client' to ensure compatibility with React Server Components, providing a server-safe way to consume the existing Dimensions API.

packages/react-native-web/src/exports/useWindowDimensions · high confidence

A new Alert module has been added to the React Native Web exports, providing a stub implementation of the Alert API. This allows applications using React Native Web to call Alert.alert() without errors, though the current implementation does not display any actual UI or native alerts.

packages/react-native-web/src/exports/Alert · high confidence

This change introduces Flow type definitions for three npm packages: create-react-class, prop-types, and styleq. The new files in the flow-typed directory provide type declarations for create-react-class (v15.x.x), prop-types (v15.x.x), and styleq, including its localizeStyle transform. This enables Flow to correctly type-check usage of these libraries within the codebase.

flow-typed · high confidence

The benchmarks package now includes two new test cases: SierpinskiTriangle, which measures UPDATE performance by recursively rendering colored dots with randomized colors to prevent caching, and Tree, which measures MOUNT performance by rendering nested Box components with varying layouts and wrapping. These additions expand the suite of visual benchmarks available for performance testing.

packages/benchmarks/src/cases · high confidence

A new vendored hash utility (MurmurHash2) has been added to the codebase to generate unique, deterministic string identifiers. This enables the styling system to create distinct CSS keyframe animation names dynamically, ensuring that animations defined via the 'animationName' style property do not conflict with one another.

packages/react-native-web/src/vendor/hash · high confidence

A new 'pick' utility function has been added to the React Native Web modules. This function allows users to filter an object, returning a new object containing only the properties specified in a provided list of keys.

packages/react-native-web/src/modules/pick · high confidence

A new \useStable\ hook has been added to the \react-native-web\ library. This hook accepts an initializer callback and returns a value that is computed only once, ensuring the result remains stable across subsequent renders even if the component re-renders. This provides a mechanism for maintaining stable initial state or derived values without the overhead of \useMemo\ or manual ref management for initialization-only logic.

packages/react-native-web/src/modules/useStable · high confidence

A new \warnOnce\ module has been introduced to the \react-native-web\ codebase. This utility allows components to emit console warnings that are guaranteed to appear only once per session, identified by a unique key. This helps reduce console noise during development while ensuring developers are alerted to deprecated or problematic usage patterns without being overwhelmed by repeated messages.

packages/react-native-web/src/modules/warnOnce · high confidence

Users can now import the LayoutAnimation component directly from the \react-native-web\ package using the \LayoutAnimation\ export path. This change adds a new entry point that re-exports the underlying vendor implementation, making the API more accessible and consistent with standard React Native usage patterns.

packages/react-native-web/src/exports/LayoutAnimation · high confidence

The KeyboardAvoidingView component is now available in react-native-web, allowing users to automatically adjust the layout of their views when the on-screen keyboard appears. This new export supports standard behaviors such as adjusting height, padding, or position, and includes a keyboardVerticalOffset prop for fine-tuning the adjustment. The component is implemented as a class-based React component that tracks its layout to calculate the relative keyboard height, ensuring that input fields remain visible during keyboard interactions.

packages/react-native-web/src/exports/KeyboardAvoidingView · high confidence

The documentation site for React Native for Web is now available as a standalone package. It uses Eleventy to generate static HTML from Markdown, featuring syntax highlighting, code minification, and navigation support. The site is configured to deploy to the GitHub Pages subdirectory at necolas.github.io/react-native-web.

packages/react-native-web-docs · high confidence

The \dom-event-testing-library\ package is introduced as a private utility for unit testing high-level DOM interactions via pointer events. It provides helpers like \describeWithPointerEvent\ and \testWithPointerType\ to run tests across different pointer types (mouse, touch, pen) and environments, along with \createEventTarget\ to dispatch realistic event sequences (e.g., \pointerdown\, \pointerhover\, \tap\) that account for browser-specific behaviors like emulated mouse events on touch devices.

packages/babel-plugin-react-native-web, packages/dom-event-testing-library · high confidence

This change introduces the \dom-event-testing-library\ package, providing utilities to simulate complex browser event sequences in tests. It includes a \createEventTarget\ helper that dispatches high-level pointer interactions (such as \pointerdown\, \pointermove\, \pointerhover\, and \pointerup\) which automatically generate the underlying sequences of PointerEvents, MouseEvents, and TouchEvents. The library also supports simulating touch gestures, context menus, and keyboard events, while offering environment controls to toggle PointerEvent support and mock the host platform (macOS vs. Windows) for cross-platform testing.

packages/dom-event-testing-library/src · high confidence

A new Babel plugin has been added to automatically rewrite imports and requires from 'react-native' (or 'react-native-web') to the corresponding paths in 'react-native-web'. The plugin supports ES6 import/export syntax and CommonJS require calls, mapping specific modules (such as View, Text, Pressable, and useWindowDimensions) to their dist/exports equivalents, while falling back to the main index for unmapped or default imports. This enables developers to use React Native APIs in web environments by transforming the module resolution at build time.

packages/babel-plugin-react-native-web/src · high confidence

The library now includes explicit Flow type definitions in \packages/react-native-web/src/types\, introducing structured types for style properties (such as \AnimationStyles\, \BorderStyles\, \LayoutStyles\, and \InteractionStyles\) and a \PlatformMethods\ interface for element measurement and focus management. This addition provides stricter type checking for style props and platform-specific APIs, improving developer experience and reducing runtime errors related to style values and layout callbacks.

packages/react-native-web/src/types · high confidence

The ProgressBar component is now available, providing a visual indicator for loading states. It supports both determinate progress (via the progress prop) and indeterminate mode, which triggers a CSS keyframe animation to slide the progress bar. The component includes accessibility attributes (role='progressbar', aria values) and respects high-contrast modes through forcedColorAdjust styles.

packages/react-native-web/src/exports/ProgressBar · high confidence

A new UnimplementedView component has been added to the library, serving as a stubbed view that renders a standard View with a red border in non-production environments to visually indicate unimplemented features, while rendering as a standard View in production builds.

packages/react-native-web/src/modules/UnimplementedView · high confidence

The library now includes a new \dismissKeyboard\ module located in \packages/react-native-web/src/modules/dismissKeyboard\. This module provides a \dismissKeyboard\ function that programmatically dismisses the currently focused input field by invoking \TextInputState.blurTextInput\ on the active field, offering a standard API for managing keyboard state in web-based React Native applications.

packages/react-native-web/src/modules/dismissKeyboard · high confidence

A new internal module has been added to detect and track the current input modality (keyboard, mouse, touch, or pen) used by the user. This module listens to relevant DOM events (such as pointer, mouse, touch, and keyboard events) to update the active modality state, allowing other components to adapt their behavior based on the input method. It also includes a test suite to verify the correct reflection of the currently-in-use and last actively used modality.

packages/react-native-web/src/modules/modality · high confidence

The CheckBox component is now available in react-native-web, providing a web implementation of the React Native CheckBox. It renders a native HTML checkbox input overlaid with a custom-styled fake control, supporting props for color, disabled state, and value changes. The component also supports the readOnly prop to prevent user interaction while maintaining accessibility attributes.

packages/react-native-web/src/exports/CheckBox · high confidence

The \useEvent\ hook is now available in \packages/react-native-web/src/modules/useEvent\, providing a reusable mechanism to attach and manage event listeners on any DOM target. This hook accepts an event type and optional configuration (capture, passive, once), returning a function that allows setting or clearing listeners on specific targets, with automatic cleanup of all attached listeners when the hook unmounts.

packages/react-native-web/src/modules/useEvent · high confidence

The Modal component is now available in react-native-web, providing a robust implementation for displaying overlay content. It supports slide and fade animations, traps keyboard focus within the modal to prevent interaction with background elements, and uses a DOM portal to render outside the normal document flow. The component also handles accessibility features like Escape key dismissal and restores focus to the trigger element upon closing.

packages/react-native-web/src/exports/Modal · high confidence

A new benchmark implementation for React Native Web has been added to the suite, providing components (Box, Dot, Provider, View) to measure rendering performance. The Dot component specifically utilizes the unstable\_createElement API from react-native, while other components use standard React Native primitives and StyleSheet for styling.

packages/benchmarks/src/implementations/react-native-web · high confidence

This change introduces the Responder Event System, a gesture management system that provides a global interaction lock for views, allowing them to negotiate exclusive pointer interaction rights via callbacks like \onStartShouldSetResponder\ and \onResponderGrant\. It includes the \useResponderEvents\ hook for integrating this system into React components, along with supporting modules for touch history tracking (\ResponderTouchHistoryStore\) and event normalization. Additionally, a new \useElementLayout\ hook is added to handle view layout changes using the browser's \ResizeObserver\ API, ensuring accurate layout events even when browsers do not provide border-box dimensions directly.

packages/react-native-web/src/modules/useResponderEvents · high confidence

A new \addEventListener\ module has been added to \packages/react-native-web/src/modules/addEventListener\. This module provides a shim for generic DOM event API compatibility with React DOM's synthetic events, supporting options like \capture\, \passive\, and \once\. It includes logic to detect passive event support and normalizes events to match React's synthetic event interface (e.g., \isDefaultPrevented\, \isPropagationStopped\). Comprehensive tests are included for browser and server-side rendering environments, verifying event dispatching on targets, parents, children, text nodes, and global objects like \document\ and \window\.

packages/react-native-web/src/modules/addEventListener · high confidence

A new \packages/benchmarks\ directory has been added to the repository, providing a dedicated environment for monitoring performance regressions. This includes a Webpack-based build configuration (\webpack.config.js\) that bundles the benchmark suite, an entry point (\index.html\), and documentation (\README.md\) explaining the test cases (such as mounting deep/wide trees and updating dynamic styles) and how to run them locally. The package also includes an MIT \LICENSE\ file and initial benchmark result tables for reference.

packages/benchmarks · high confidence

Added three new Node.js scripts to the repository: \createBabelReactNativeWebModuleMap.js\ generates a module map for the Babel plugin based on exported packages; \createInlineStylePrefixerData.js\ generates static prefix data for inline styles using a specified browser list; and \releaseReactNativeWebPackages.js\ automates the versioning, git tagging, and npm publishing of react-native-web workspaces.

scripts · high confidence

The mergeRefs module has been added to provide a utility for merging multiple React refs (function refs, object refs, or a mix) into a single ref callback. This allows components to accept and forward multiple refs simultaneously, ensuring that all provided refs are updated with the same DOM node instance. The implementation handles null checks and logs errors for unsupported ref types like booleans, numbers, or strings.

packages/react-native-web/src/modules/mergeRefs · high confidence

The project has been reorganized into a monorepo structure to manage 'React Native for Web' and related packages. The repository now includes a \packages\ directory for individual components, a \configs\ directory for build and linting settings, and a \scripts\ directory for utility tasks. GitHub Actions workflows have been added to \.github\ for continuous integration, and the root \README.md\ has been updated to document the new structure and development tasks such as building and testing specific packages.

(repo-wide) · high confidence

The \setValueForStyles\ module has been added to handle applying style objects to DOM nodes. It now automatically appends 'px' to numeric values for non-unitless CSS properties, supports CSS custom properties (variables) via \setProperty\, and correctly maps the 'float' style to 'cssFloat'.

packages/react-native-web/src/modules/setValueForStyles · high confidence

A new pre-commit hook script has been added to the Husky configuration directory. This script initializes Husky and executes lint-staged via npx, ensuring that code linting and formatting checks are automatically run before each commit.

configs/husky · high confidence

The \useHover\ hook in \packages/react-native-web/src/modules/useHover\ has been implemented to enable hover state detection for interactive elements. This change introduces support for \onHoverStart\, \onHoverEnd\, \onHoverChange\, and \onHoverUpdate\ callbacks, allowing components like \Pressable\ to react to mouse pointer entry and exit. The implementation distinguishes between mouse and touch inputs (ignoring touch for hover states) and supports a \contain\ option to manage hover persistence when the pointer moves between child elements, along with a \disabled\ option to suppress hover events.

packages/react-native-web/src/modules/useHover · high confidence

The AppState module's addEventListener method now returns a subscription object that includes a remove() method, allowing developers to cleanly unsubscribe from 'change' events. This replaces the previous behavior where the return value was undefined, aligning the API with standard React Native expectations for event listener management.

packages/react-native-web/src/exports/AppState · high confidence

The BackHandler module in react-native-web has been updated to explicitly warn developers when its methods are used on the web platform. Previously, methods like addEventListener and removeEventListener were no-ops; now, addEventListener logs a console.error stating that BackHandler is not supported on web, helping developers identify unsupported API usage more clearly while maintaining backward compatibility by returning a valid remove function.

packages/react-native-web/src/exports/BackHandler · high confidence

The Button component in react-native-web has been modernized to include a new \focusable\ prop, which is passed through to the underlying TouchableOpacity to control keyboard accessibility. Additionally, deprecated props have been removed from the component's API, and internal PropTypes exports have been cleaned up. The component remains available but is marked as deprecated in favor of using Pressable directly.

packages/react-native-web/src/exports/Button · high confidence

The Clipboard module in react-native-web has been reorganized to support React Server Components via the 'use client' directive and now caches the result of isAvailable() to avoid redundant browser capability checks. Additionally, the setString implementation preserves line breaks by applying whiteSpace: 'pre-wrap' to the temporary selection node, fixing previous edge cases where text formatting was lost during copy operations.

packages/react-native-web/src/exports/Clipboard · high confidence

The useLocaleContext hook is now exported as the default export from the useLocaleContext module. This change simplifies import syntax for consumers of the library, allowing them to import the hook directly without needing to use a named import syntax.

packages/react-native-web/src/exports/useLocaleContext · high confidence

The TouchableHighlight component in react-native-web has been updated to a new implementation that relies on the internal usePressEvents hook and useMergeRefs utility. This change introduces a 'use client' directive, indicating support for React Server Components, and explicitly manages focus and pointer events based on the disabled state. While the component remains available, it is deprecated in favor of the Pressable component, as indicated by the surrounding commit history.

packages/react-native-web/src/exports/TouchableHighlight · high confidence

The TouchableWithoutFeedback component has been restructured to properly forward refs to both the host element and its child, ensuring that ref callbacks are invoked as expected. The component now emits a deprecation warning advising users to migrate to Pressable, while maintaining backward compatibility by mapping existing props (such as delayPressIn, onPress, and accessibility attributes) to the underlying press event system.

packages/react-native-web/src/exports/TouchableWithoutFeedback · high confidence

The Dimensions module in react-native-web has been updated to use the VisualViewport API on iOS devices, ensuring that window height and width dimensions correctly reflect changes when the on-screen keyboard opens or closes. This change also introduces debouncing for change listeners to prevent excessive style recalculation on pageload and ensures that addEventListener returns a proper subscription object for cleanup. Additionally, the module now accounts for window zoom levels by multiplying visualViewport dimensions by the scale factor, aligning behavior with standard documentElement client dimensions.

packages/react-native-web/src/exports/Dimensions · high confidence

The DeviceEventEmitter is now explicitly exported from the react-native-web package, re-exporting the internal RCTDeviceEventEmitter implementation. This allows consumers to import and use the device event emitter directly from the package, aligning with React Native's standard API surface.

packages/react-native-web/src/exports/DeviceEventEmitter · high confidence

The Image component has been refactored to support new props including blurRadius, tintColor, and shadows, while deprecating the use of resizeMode and tintColor within the style prop (users should now use the component props instead). The component also introduces a queryCache API for checking cached images and ensures that images are not draggable by default. Additionally, it now properly handles SVG base64 data and prevents constant reloading when the source is provided as an object.

packages/react-native-web/src/exports/Image · high confidence

The InteractionManager implementation has been refactored to use a dedicated TaskQueue for managing deferred tasks. This change introduces support for both simple synchronous tasks and asynchronous promise-based tasks (via a \gen\ property), allowing \runAfterInteractions\ to handle complex async workflows. The manager now processes these tasks using \requestIdleCallback\ (or \setTimeout\ if a deadline is set), ensuring that interactions are completed before scheduled work runs, and provides the ability to cancel pending tasks.

packages/react-native-web/src/exports/InteractionManager · high confidence

Added a new useMergeRefs hook in the react-native-web modules that wraps the existing mergeRefs utility. This hook memoizes the merged ref callback using React.useMemo to prevent unnecessary recalculations when the referenced elements do not change, improving performance for components that manage multiple refs.

packages/react-native-web/src/modules/useMergeRefs · high confidence

The PanResponder module now includes a new 'Alternative' implementation (Alternative.js) that provides a distinct API for handling multi-touch gestures, featuring updated callback names (e.g., onPanGrant, onPanReject) and refined gesture state tracking. The main export (index.js) has been updated to import from the vendor directory, while the new alternative file exposes a separate entry point for developers requiring this specific gesture handling behavior.

packages/react-native-web/src/exports/PanResponder · high confidence

A new \usePlatformMethods\ hook has been added to the \modules\ directory, providing a mechanism to attach non-standard measurement methods (\measure\, \measureLayout\, \measureInWindow\) directly to host DOM nodes. This hook leverages the \UIManager\ to bridge React Native's measurement requirements to the underlying DOM, ensuring stable references to avoid unnecessary re-renders. This change supports the removal of deprecated accessibility APIs and the \setNativeProps\ API by centralizing these platform-specific interactions.

packages/react-native-web/src/modules/usePlatformMethods · high confidence

The Linking module has been updated to support event-driven navigation tracking and more flexible link opening behavior. Users can now subscribe to navigation events using \Linking.addEventListener\ and unsubscribe via the returned subscription object's \remove()\ method, replacing the deprecated \removeEventListener\ static method. Additionally, \Linking.openURL\ now accepts an optional second argument to specify the browser tab target (defaulting to \\_blank\), and specifically handles \tel:\ links by navigating the current window instead of opening a new tab.

packages/react-native-web/src/exports/Linking · high confidence

The createElement function now automatically wraps elements with a specific writing direction (dir) in a LocaleProvider. This ensures that the locale context, including the language and text direction, is correctly propagated to child components when the element's props indicate a specific direction, improving accessibility and layout for internationalized content.

packages/react-native-web/src/exports/createElement · high confidence

The interactive examples have been restructured to run on Next.js, introducing a new \_document.js entry point that integrates React Native's AppRegistry for server-side rendering. A comprehensive set of new page components has been added to demonstrate core APIs, including ActivityIndicator, Animated, AppRegistry, AppState, CheckBox, Clipboard, Dimensions, FlatList, Image, ImageBackground, Linking, Lists, Localization, Modal, and PanResponder.

packages/react-native-web-examples/pages · high confidence

The ActivityIndicator component has been rewritten to use a modern React functional component with explicit prop forwarding and CSS keyframe animations for the loading spinner, replacing the previous implementation. It now supports 'small' and 'large' sizes, custom colors, and controls for animation state. Additionally, TouchableNativeFeedback is now marked as unimplemented, returning a placeholder view instead of providing native feedback functionality.

packages/react-native-web/src/exports/ActivityIndicator · high confidence

The AppRegistry module has been restructured to support modern React rendering patterns, including React Server Components and hydration. The entry point now uses React 18's \createRoot\ and \hydrateRoot\ APIs (via \react-dom/client\) instead of legacy renderers, enabling concurrent mode and server-side rendering hydration. A new \AppContainer\ component wraps applications, providing a \RootTagContext\ and supporting custom wrapper components. The \renderApplication\ function now accepts a \hydrate\ option to toggle between rendering and hydration modes, and \unmountComponentAtNode\ has been updated to call the root's \unmount\ method. These changes improve compatibility with React 18+ features and enable SSR scenarios.

packages/react-native-web/src/exports/AppRegistry · high confidence

The ImageBackground component has been rewritten to use React's forwardRef API, allowing refs to be properly forwarded to the underlying View and Image elements. It now explicitly handles width and height styles by proxying them to the background Image to work around current implementation limitations, ensuring that container styles are applied correctly. The component also includes updated type definitions and a new test suite verifying correct rendering of children, image styles, and container styles.

packages/react-native-web/src/exports/ImageBackground · high confidence

The Picker component has been refactored to render a native HTML \<select\> element instead of a custom UI, improving accessibility and performance. This change introduces a new PickerItem component that maps to \<option\> elements and supports the 'color' prop. The main Picker component now correctly forwards the 'onValueChange' callback to the DOM node, merges refs using a dedicated hook, and applies a default system font family. It also supports standard View props and handles the 'enabled' prop by mapping it to the native 'disabled' attribute.

packages/react-native-web/src/exports/Picker · high confidence

The ImageLoader module has been updated to use the native image.decode() API for better performance and to handle SVG decoding errors gracefully in Safari iOS 11, falling back to setTimeout when decode is unavailable. Additionally, the module now includes an ImageUriCache to manage image references and prevent memory leaks by cleaning up unused entries when the cache reaches its limit.

packages/react-native-web/src/modules/ImageLoader · high confidence

A new \AccessibilityUtil\ module has been introduced to handle the translation of React Native accessibility props into web-standard ARIA attributes. This module includes logic to determine if an element is disabled based on \accessibilityStates\, maps \accessibilityRole\ values to corresponding ARIA roles (such as mapping 'button' to 'button' or 'image' to 'img'), and converts roles into specific HTML semantic elements (e.g., mapping 'heading' to \h1\ or \h2\ based on \accessibilityLevel\). This change centralizes accessibility prop handling, ensuring that components like images and labels receive appropriate ARIA roles and that semantic HTML structure is generated based on accessibility roles.

packages/react-native-web/src/modules/AccessibilityUtil · high confidence

A new \forwardedProps\ module has been introduced in \packages/react-native-web/src/modules/forwardedProps\ to explicitly define which props are forwarded to the underlying DOM element. This change establishes a clear separation of concerns by categorizing props into accessibility, click, focus, keyboard, mouse, touch, and style groups. Notably, it adds support for W3C-standard ARIA attributes (such as \aria-\\ and \inert\) alongside the legacy React Native \accessibility\\ props, ensuring better compatibility with modern accessibility standards while maintaining backward compatibility. It also includes forwarding for PointerEvent props (e.g., \onPointerDown\, \onPointerUp\), enhancing interaction handling for touch and pointer devices.

packages/react-native-web/src/modules/forwardedProps · high confidence

The Pressable component has been updated to include support for hover states via new onHoverIn and onHoverOut callbacks, allowing components to react to mouse hover events. Additionally, it now supports the onKeyDown prop, enabling keyboard-based interactions to be handled directly within the component. These changes enhance the accessibility and interactivity of Pressable elements by aligning them more closely with standard web interaction patterns.

packages/react-native-web/src/exports/Pressable · high confidence

The processColor utility in react-native-web has been updated to rely on the @react-native/normalize-colors package, ensuring that color processing behavior aligns more closely with standard React Native. This change affects how color strings and numbers are converted into 32-bit integer representations, providing a more standardized approach to color normalization across the library.

packages/react-native-web/src/exports/processColor · high confidence

The package entry point has been reorganized to explicitly export a curated set of React Native APIs, components, and hooks for web. This change introduces new exports including the Share and Alert APIs, the LogBox diagnostic tool, the InputAccessoryView component, and the useWindowDimensions hook, while removing deprecated or platform-specific modules like ListView, ART, and various IOS-specific components. Users will now interact with a standardized, web-optimized API surface that replaces the previous default ES module export and internal PropTypes usage.

packages/react-native-web/src · high confidence

The documentation website has been visually refreshed with a new design system that includes CSS variables for spacing, typography, and theming, supporting both light and dark modes based on system preferences. The layout now features a responsive navigation drawer for mobile devices that preserves scroll position across page loads, and the home page displays a new logo, updated feature highlights, and an embedded CodeSandbox preview.

packages/react-native-web-docs/src/includes · high confidence

The CSS prefixing logic in react-native-web has been refactored to use the \inline-style-prefixer\ library. This change replaces the previous implementation with a modular approach using specific plugins (crossFade, imageSet, logical, position, sizing, transition) and a defined prefix map for properties like mask, columns, and text decoration, ensuring consistent vendor prefixing across supported browsers.

packages/react-native-web/src/modules/prefixStyles · high confidence

The Touchable module has been restructured to improve code organization and performance. New utility files, BoundingDimensions and Position, have been introduced to manage element geometry using object pooling, reducing memory allocation overhead. Additionally, ensurePositiveDelayProps was added to validate that delay properties are non-negative, ensuring consistent behavior for touch interactions.

packages/react-native-web/src/exports/Touchable · high confidence

The RefreshControl and StatusBar modules have been refactored from class-based implementations to function components. RefreshControl now renders a View and accepts standard props (such as refreshing, onRefresh, and tintColor) while ignoring unsupported properties, and StatusBar is implemented as a no-op component with stub methods to maintain API compatibility without affecting the web UI.

packages/react-native-web/src/exports/RefreshControl · high confidence

The Animated and Easing modules have been restructured to support React Server Components. The Animated export now includes the 'use client' directive, ensuring it runs in the client environment, while the Easing export remains a standard server-compatible module. This change aligns the module organization with React's new rendering model.

packages/react-native-web/src/exports/Animated · high confidence

The library has reorganized its internal module structure, introducing dedicated export paths for core utilities. The PixelRatio module is now available at \exports/PixelRatio\, providing methods to access device pixel density, font scale, and convert layout sizes to pixel values. Additionally, TextInputState is exposed at \modules/TextInputState\ to manage the focused state of text input fields, coordinating focus and blur actions through the UIManager. This change reflects a shift in how these internal capabilities are exposed and accessed within the react-native-web package.

packages/react-native-web/src/exports/PixelRatio, packages/react-native-web/src/modules/TextInputState · medium confidence

The Benchmark component in the benchmarks app has been rewritten to support measuring forced layout times. The new implementation includes dedicated modules for timing (using high-resolution performance.now()), mathematical statistics (mean, median, standard deviation), and strict Flow types. A key behavioral change is the addition of a \forceLayout\ prop; when enabled, the benchmark forces a style recalculation during each sample cycle by accessing \document.body.offsetWidth\, allowing users to measure performance impact of layout thrashing alongside standard mount/update/unmount cycles.

packages/benchmarks/src/app/Benchmark · high confidence

The StyleSheet compiler in react-native-web has been rewritten to generate atomic CSS classes instead of inline styles, significantly improving performance and enabling better style caching. This change introduces support for W3C logical CSS properties (such as marginInline, paddingBlock, borderInlineStart, and insetInline), allowing styles to automatically adapt to different text directions (LTR/RTL) without manual intervention. The compiler now handles shortform property expansion, normalizes color values, and manages unitless numbers more robustly, ensuring that React Native style objects are correctly translated into efficient, cascade-friendly CSS rules.

packages/react-native-web/src/exports/StyleSheet/compiler · high confidence

The StyleSheet module has been rewritten to use a new DOM-based architecture that injects CSS rules into \<style\> tags with strict ordering, ensuring correct cascade precedence for styles. This change introduces a new validation layer that rejects invalid style declarations (such as !important values, unsupported shorthand properties, and incorrect property names) in development, and adds support for W3C logical CSS properties (e.g., marginInline, borderStart) alongside deprecation warnings for legacy shadow props. The module also now supports array syntax for boxShadow and transformOrigin, and provides a getSheet() API to retrieve the generated CSS text for server-side rendering or style inspection.

packages/react-native-web/src/exports/StyleSheet · high confidence

The benchmarks application has been rewritten to support React 18, utilizing the new \createRoot\ API for rendering. The new structure dynamically loads implementation components from the \./implementations/\ directory and runs specific performance tests, including mounting deep and wide trees and updating dynamic styles, providing users with updated metrics for these core rendering scenarios.

packages/benchmarks/src · high confidence

The benchmarks application has been rewritten to provide a structured interface for comparing library performance. The new UI features a three-panel layout (view, list, and action) that adapts to screen width, allowing users to select benchmarks and libraries via pickers, run tests, and view detailed results including mean time, standard deviation, and forced layout/scripting metrics. The app now includes dedicated components for buttons, icons, and report cards, and utilizes a centralized theme system for consistent styling across platforms.

packages/benchmarks/src/app · high confidence

The project now uses a centralized configuration set in the \configs\ directory to manage linting, formatting, transpilation, and testing. ESLint is configured to support React 18 and Flow 0.148.0, while Babel is set up to transpile code for specific browser versions (Chrome 49+, Firefox 91+, etc.) and handle Flow types. Jest testing is standardized with a DOM setup file that polyfills missing JSDOM features like \ResizeObserver\ and \clientWidth\, ensuring consistent test environments for both DOM and Node.js contexts.

configs · high confidence

The library now correctly handles unitless numeric values for CSS Grid layout properties (such as gridRow, gridColumn, and their start/end/gap variants) and aspectRatio. This change ensures that these style properties are processed without requiring explicit units, aligning with standard CSS behavior and improving compatibility for grid-based layouts.

packages/react-native-web/src/modules/unitlessNumbers · high confidence

The Switch component has been updated to allow users to customize the colors of the track and thumb in both active and disabled states via new props (activeThumbColor, activeTrackColor, thumbColor, trackColor). It also improves accessibility by applying the aria-label to the underlying native control and ensuring the component has the correct 'switch' role, while maintaining support for focus rings and high contrast modes.

packages/react-native-web/src/exports/Switch · high confidence

The Text component implementation has been modernized to use a React Context (TextAncestorContext) to manage nested text structures, ensuring that nested Text elements render as spans within a root div rather than nested divs. This change, along with the introduction of the \hrefAttrs\ prop for customizing link attributes and the adoption of \useResponderEvents\ for touch/click handling, improves layout correctness and interaction behavior for users relying on nested text or link interactions.

packages/react-native-web/src/exports/Text · high confidence

The TouchableOpacity component now correctly handles opacity transitions when the component is disabled. The implementation ensures that the visual dimming effect (opacity change) is only applied when the component is not disabled, and it properly manages the transition duration and opacity override states to prevent visual glitches or incorrect styling during press interactions on disabled elements.

packages/react-native-web/src/exports/TouchableOpacity · high confidence

The UIManager module now uses getBoundingClientRect for measureInWindow to improve layout measurement accuracy, and refines the focus method to avoid setting tabIndex on specific elements like BODY or INPUT. Additionally, measureLayout and measure operations are now asynchronous via setTimeout to prevent blocking, and updateView handles style and class attributes more explicitly.

packages/react-native-web/src/exports/UIManager · high confidence

The createDOMProps module now explicitly maps React Native accessibility props (such as accessibilityLabel, accessibilityRole, and accessibilityState) to their corresponding W3C ARIA attributes (like aria-label, role, and aria-selected) within the DOM property generation logic. This change centralizes the conversion of accessibility-related props, ensuring that both legacy React Native accessibility properties and standard ARIA attributes are correctly forwarded to the underlying DOM elements, thereby improving screen reader compatibility and adherence to web accessibility standards.

packages/react-native-web/src/modules/createDOMProps · high confidence

The Vibration module in react-native-web has been updated to provide a default pattern of 400ms when the vibrate method is called without arguments. Previously, calling vibrate() with no parameters would pass undefined to the underlying navigator.vibrate API; the new implementation ensures a consistent 400ms vibration occurs by default, aligning better with expected behavior while maintaining compatibility with explicit pattern inputs.

packages/react-native-web/src/exports/Vibration · high confidence

The View component has been refactored to support W3C-standard ARIA properties (e.g., aria-label, aria-hidden) alongside the legacy accessibility props, which are now marked as deprecated. It introduces an hrefAttrs prop to control link attributes like download and rel when the View renders as an anchor, and adds support for PointerEvent props. The component now uses a 'use client' directive for React Server Components compatibility, enforces that text nodes cannot be direct children, and handles writing direction via the dir and lang props.

packages/react-native-web/src/exports/View · high confidence

The YellowBox export in the React Native Web package has been refactored from its previous implementation into a function component. This change aligns the component with modern React patterns, ensuring it is now defined as a standard functional component that renders an UnimplementedView, while maintaining the existing ignoreWarnings API for backward compatibility.

packages/react-native-web/src/exports/YellowBox · high confidence

The findNodeHandle export in react-native-web has been updated to explicitly throw an error when called, informing users that the function is not supported on the web platform and suggesting they use the ref property on components instead. This change ensures that attempts to use this React Native-specific API on the web fail with a clear, actionable message rather than potentially causing silent failures or undefined behavior.

packages/react-native-web/src/exports/findNodeHandle · high confidence

A new utility module has been added to detect web-specific color values (such as 'currentColor', 'inherit', and CSS variables) to improve processColor compatibility with React Native.

packages/react-native-web/src/modules/isWebColor · high confidence

The NativeModules export now includes the UIManager, making it available to consumers who rely on this module for native module access. This change ensures that the UIManager is properly exposed through the NativeModules interface, aligning with React Native's expected module structure.

packages/react-native-web/src/exports/NativeModules · high confidence

The \useColorScheme\ hook now correctly manages the listener subscription lifecycle. It ensures the change listener is added only once and, crucially, is properly removed when the component unmounts, preventing memory leaks and stale updates. This fix guarantees that the hook remains active across component rerenders without duplicating subscriptions.

packages/react-native-web/src/exports/useColorScheme · high confidence

This update resolves several issues within the press event system (specifically in \PressResponder\ and \usePressEvents\). It ensures that disabled pressables correctly propagate click events, fixes a regression where \onPress\ was incorrectly triggered for Ctrl+click on Windows, and addresses a bug where the \onPress\ callback was not firing for keyboard interactions. Additionally, it prevents the context menu from appearing on long-press on Windows and improves memory management by avoiding the retention of DOM nodes in the responder.

packages/react-native-web/src/modules/usePressEvents · high confidence

The TextInput component has been rewritten to modernize its internal architecture and expand its feature set. Users now benefit from improved event handling, including support for onKeyPress (with arrow and Escape keys), onContentSizeChange, and corrected onSelectionChange behavior. The component now supports additional props such as caretHidden, disabled, showSoftInputOnFocus, and inputAccessoryViewID, while also mapping deprecated keyboardType values to the W3C-standard inputMode. Fixes address focus management, cursor positioning with secureTextEntry, and browser-specific rendering issues in Firefox and Safari.

packages/react-native-web/src/exports/TextInput · high confidence

The ScrollView implementation has been restructured by extracting core web-specific scroll logic (throttling, disabling, and indicator hiding) into a new \ScrollViewBase\ component, while the main \ScrollView\ class now focuses on responder management and prop forwarding. This change ensures that scroll events are correctly propagated and normalized, fixes issues with nested scroll views not responding to descendant events, and properly forwards the \dataSet\ prop and \style\ when \refreshControl\ is present.

packages/react-native-web/src/exports/ScrollView · high confidence

The \packages/react-native-web/src/vendor/react-native/Animated\ module has been updated with a new implementation of the React Native Animated API. This change includes a complete rewrite of the core animation logic, introducing dedicated modules for \AnimatedEvent\ handling, \NativeAnimatedHelper\ for bridging to native drivers, and specific animation types like \SpringAnimation\, \TimingAnimation\, and \DecayAnimation\. The update also adds a new \AnimatedMock\ module to replace animations with empty states during testing, ensuring predictable snapshot tests, and updates the \Easing\ module with standard easing functions. These changes improve the reliability and performance of animations in react-native-web by aligning the implementation more closely with the upstream React Native source.

packages/react-native-web/src/vendor/react-native · high confidence

Added Jest snapshots for Image component props; Added comprehensive test suite for TextInput component; Added snapshot tests for ActivityIndicator component; Added snapshot tests for Babel plugin module rewrites; Added snapshot tests for CheckBox component props; Added snapshot tests for ScrollView centerContent and refreshControl props; Added snapshot tests for Switch component disabled state styling; Added test coverage for React Native Web Modal component; Added test suite for Pressable component interactions; Added test suite for React Native Web Image component; Added tests for Animated interpolation logic; Added tests for AppRegistry initialization and SSR behavior; Added tests for DOM property creation and accessibility handling; Added tests for Dimensions API behavior; Added tests for Platform.select and Platform.isTesting; Added tests for ProgressBar accessibility attributes; Added tests for ScrollView props and methods; Added tests for Switch component accessibility and state behavior; Added tests for UIManager focus and updateView behavior; Added tests for accessibility role mapping utilities; Added tests for babel-plugin-react-native-web import/export rewriting; Added tests for createElement accessibility prop mapping; Added tests for processColor utility; Added tests for the Picker component; Added tests for the new StyleSheet compiler and DOM integration; Added tests for the useEvent hook; Added unit tests for View component props and behavior; Added unit tests for dom-event-testing-library; Added unit tests for the Text component; Snapshot tests added for Picker children rendering; Snapshot tests added for Pressable component behavior; Snapshot tests added for Text component rendering and props; Snapshot tests added for View component rendering; Snapshot tests added for createElement DOM output; Snapshot tests for AppRegistry CSS output.

The react-native-web package now supports React 18 and 19, with peer dependencies updated to allow either version. The core dependency inline-style-prefixer has been upgraded to version 7.0.1, and the examples app has been updated to use React 18. The benchmarks package now targets React 19.0.0. Development tooling includes updates to Jest 29.7.0, ESLint 8.19.0, and Babel 7.18.6 across the monorepo.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 46 → 48 (+1.7)
• Rubric changed (rubric-2026.09.11 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 50 → 50 (+0.0)
• Architecture 67 → 67 (+0.2)
• Maturity 59 → 59 (-0.7)
• Readiness 50 → 38 (-11.9)
• Security 37 → 53 (+15.8)
• Accessibility 70 → 70 (+0.0)
• Performance 100 (new)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Dormant codebase
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• Hotspot: packages/react-native-web/src/exports/StyleSheet/compiler/index.js (packages/react-native-web/src/exports/StyleSheet/compiler/index.js)
• Medium CVE: [GHSA redacted] (package-lock.json)
• Medium CVE: [GHSA redacted] (package-lock.json)
• Repeated repair: packages/react-native-web/src/exports/AppRegistry/tests/index-test.node.js (packages/react-native-web/src/exports/AppRegistry/tests/index-test.node.js)
• Repeated repair: packages/react-native-web/src/exports/StyleSheet/tests/compiler-test.js (packages/react-native-web/src/exports/StyleSheet/tests/compiler-test.js)

• Concentrated knowledge decay
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• High CVE: [GHSA redacted] (package-lock.json)
• Hotspot: packages/react-native-web/src/exports/Image/index.js (packages/react-native-web/src/exports/Image/index.js)
• Low cohesion: ScrollView (LCOM4 6) (packages/react-native-web/src/exports/ScrollView/index.js)
• Medium vulnerability: [GHSA redacted] (package-lock.json)
• Medium vulnerability: [GHSA redacted] (package-lock.json)
• Outdated (npm): @babel/runtime
• Outdated (npm): @react-native/normalize-colors
• Outdated (npm): classnames
• Outdated (npm): d3-scale-chromatic
• Outdated (npm): fbjs
• Outdated (npm): next
• Outdated (npm): react
• Outdated (npm): react-dom
• Outdated (npm): react-native-web
• Outdated (npm): styleq
• Split packages/react-native-web
• index.default (cognitive 19) (packages/babel-plugin-react-native-web/src/index.js)

• 9 commits — 4 feature/other, 5 fixes

• packages/react-native-web — 4 commits
• (root) — 2 commits
• packages/react-native-web-docs — 2 commits
• packages/babel-plugin-react-native-web — 1 commit

• fix: Fix TextInput maxLength documentation (#2856)
• fix: Fix TextInput placeholder documentation (#2854)
• fix: Fix useColorScheme subscription lifecycle (#2853)
• fix: [fix] Export InputAccessoryView from the package entry
• fix: [fix] Image: update load handlers ref in a layout effect
• change: 0.21.3
• change: Image: do not restart loading when load callback identities change (#2851)
• change: Image: shorten load handlers ref comment
• change: chore: normalize package repository metadata (#2841)

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

necolas/react-native-web was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.