react · necolas · Jul 3, 2025 · Jul 2, 2025
diff --git a/packages/react-strict-dom/src/native/html.js b/packages/react-strict-dom/src/native/html.js
@@ -28,7 +28,7 @@ import { createStrictDOMTextComponent as createStrictText } from './modules/crea
 // $FlowFixMe[nonstrict-import]
 import { createStrictDOMTextInputComponent as createStrictTextInput } from './modules/createStrictDOMTextInputComponent';
 // $FlowFixMe[nonstrict-import]
-import { Platform } from 'react-native';
+import * as ReactNative from './react-native';
 import * as stylex from './stylex';
 
 const styles = stylex.create({
@@ -45,7 +45,10 @@ const styles = stylex.create({
     borderWidth: 1
   },
   code: {
-    fontFamily: Platform.select({ ios: 'Menlo', default: 'monospace' })
+    fontFamily: ReactNative.Platform.select({
+      ios: 'Menlo',
+      default: 'monospace'
+    })
   },
   heading: {
     fontSize: '1.5rem',

diff --git a/packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js b/packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js
@@ -10,7 +10,6 @@
 import type { Style } from '../../types/styles';
 
 import * as React from 'react';
-import { useMemo, useState } from 'react';
 import { flattenStyle } from './flattenStyle';
 import { shallowEqual } from './shallowEqual';
 
@@ -34,7 +33,7 @@ if (__DEV__) {
 export function ProvideInheritedStyles(props: ProviderProps): React.Node {
   const { children, value } = props;
   const inheritedStyles = useInheritedStyles();
-  const flatStyle = useMemo(() => {
+  const flatStyle = React.useMemo(() => {
     if (
       value == null ||
       (typeof value === 'object' && Object.keys(value).length === 0)
@@ -47,7 +46,7 @@ export function ProvideInheritedStyles(props: ProviderProps): React.Node {
     }
   }, [inheritedStyles, value]);
 
-  const [cachedFlatStyle, setCachedFlatStyle] = useState(flatStyle);
+  const [cachedFlatStyle, setCachedFlatStyle] = React.useState(flatStyle);
 
   if (
     flatStyle !== cachedFlatStyle &&

diff --git a/packages/react-strict-dom/src/native/modules/TextString.js b/packages/react-strict-dom/src/native/modules/TextString.js
@@ -8,7 +8,8 @@
  */
 
 import * as React from 'react';
-import { Text } from 'react-native';
+import * as ReactNative from '../react-native';
+
 import { useCustomProperties } from './ContextCustomProperties';
 import { useStyleProps } from './useStyleProps';
 
@@ -30,6 +31,6 @@ export function TextString(props: Props): React.Node {
 
   return (
     // $FlowFixMe
-    <Text {...nativeProps} children={children} />
+    <ReactNative.Text {...nativeProps} children={children} />
   );
 }
diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js
@@ -11,9 +11,7 @@ import type { ReactNativeProps } from '../../types/renderer.native';
 import type { StrictProps as StrictPropsOriginal } from '../../types/StrictProps';
 
 import * as React from 'react';
-import { Animated, Pressable } from 'react-native';
-import { experimental_LayoutConformance as LayoutConformance } from 'react-native';
-import { ViewNativeComponent, TextAncestorContext } from '../react-native';
+import * as ReactNative from '../react-native';
 
 import { ProvideCustomProperties } from './ContextCustomProperties';
 import { ProvideDisplayInside, useDisplayInside } from './ContextDisplayInside';
@@ -29,10 +27,10 @@ type StrictProps = $ReadOnly<{
   children?: React.Node | ((ReactNativeProps) => React.Node)
 }>;
 
-const AnimatedPressable = Animated.createAnimatedComponent<
-  React.ElementConfig<typeof Pressable>,
-  typeof Pressable
->(Pressable);
+const AnimatedPressable = ReactNative.Animated.createAnimatedComponent<
+  React.ElementConfig<typeof ReactNative.Pressable>,
+  typeof ReactNative.Pressable
+>(ReactNative.Pressable);
 
 export function createStrictDOMComponent<T, P: StrictProps>(
   tagName: string,
@@ -41,9 +39,11 @@ export function createStrictDOMComponent<T, P: StrictProps>(
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
       let NativeComponent =
-        tagName === 'button' ? Pressable : ViewNativeComponent;
+        tagName === 'button'
+          ? ReactNative.Pressable
+          : ReactNative.ViewNativeComponent;
       const elementRef = useStrictDOMElement<T>({ tagName });
-      const hasTextAncestor = React.useContext(TextAncestorContext);
+      const hasTextAncestor = React.useContext(ReactNative.TextAncestorContext);
 
       /**
        * Resolve global HTML and style props
@@ -59,9 +59,9 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 
       if (
         nativeProps.onPress != null &&
-        NativeComponent === ViewNativeComponent
+        NativeComponent === ReactNative.ViewNativeComponent
       ) {
-        NativeComponent = Pressable;
+        NativeComponent = ReactNative.Pressable;
       }
 
       // Tag-specific props
@@ -78,7 +78,7 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 
       // Component-specific props
 
-      if (NativeComponent === Pressable) {
+      if (NativeComponent === ReactNative.Pressable) {
         if (props.disabled === true) {
           nativeProps.disabled = true;
           nativeProps.focusable = false;
@@ -142,10 +142,10 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 
       // Use Animated components if necessary
       if (nativeProps.animated === true) {
-        if (NativeComponent === ViewNativeComponent) {
-          NativeComponent = Animated.View;
+        if (NativeComponent === ReactNative.ViewNativeComponent) {
+          NativeComponent = ReactNative.Animated.View;
         }
-        if (NativeComponent === Pressable) {
+        if (NativeComponent === ReactNative.Pressable) {
           NativeComponent = AnimatedPressable;
         }
       }
@@ -164,7 +164,9 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 
       // Enable W3C layout support
       if (props['data-layoutconformance'] === 'strict') {
-        element = <LayoutConformance children={element} mode="strict" />;
+        element = (
+          <ReactNative.LayoutConformance children={element} mode="strict" />
+        );
       }
 
       if (
@@ -200,9 +202,9 @@ export function createStrictDOMComponent<T, P: StrictProps>(
 
       if (hasTextAncestor) {
         return (
-          <TextAncestorContext.Provider value={false}>
+          <ReactNative.TextAncestorContext.Provider value={false}>
             {element}
-          </TextAncestorContext.Provider>
+          </ReactNative.TextAncestorContext.Provider>
         );
       }
 

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js
@@ -10,7 +10,8 @@
 import type { StrictReactDOMImageProps } from '../../types/StrictReactDOMImageProps';
 
 import * as React from 'react';
-import { Animated, Image } from 'react-native';
+import * as ReactNative from '../react-native';
+
 import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
@@ -22,7 +23,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
 ): component(ref?: React.RefSetter<T>, ...P) {
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
-      let NativeComponent = Image;
+      let NativeComponent = ReactNative.Image;
       const elementRef = useStrictDOMElement<T>({ tagName });
 
       const {
@@ -106,7 +107,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
 
       // Use Animated components if necessary
       if (nativeProps.animated === true) {
-        NativeComponent = Animated.Image;
+        NativeComponent = ReactNative.Animated.Image;
       }
 
       const element: React.Node =

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js
@@ -11,7 +11,8 @@ import type { ReactNativeProps } from '../../types/renderer.native';
 import type { StrictProps as StrictPropsOriginal } from '../../types/StrictProps';
 
 import * as React from 'react';
-import { Animated, Platform, Text } from 'react-native';
+import * as ReactNative from '../react-native';
+
 import { ProvideCustomProperties } from './ContextCustomProperties';
 import { ProvideInheritedStyles } from './ContextInheritedStyles';
 import { errorMsg } from '../../shared/logUtils';
@@ -34,7 +35,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
 ): component(ref?: React.RefSetter<T>, ...P) {
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
-      let NativeComponent = Text;
+      let NativeComponent = ReactNative.Text;
       const elementRef = useStrictDOMElement<T>({ tagName });
 
       const { href, label } = props;
@@ -91,7 +92,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
       // Workaround: Android doesn't support ellipsis truncation if Text is selectable
       // See #136
       const disableUserSelect =
-        Platform.OS === 'android' &&
+        ReactNative.Platform.OS === 'android' &&
         nativeProps.numberOfLines != null &&
         nativeProps.style.userSelect !== 'none';
 
@@ -102,7 +103,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
 
       // Use Animated components if necessary
       if (nativeProps.animated === true) {
-        NativeComponent = Animated.Text;
+        NativeComponent = ReactNative.Animated.Text;
       }
 
       /**

diff --git a/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js b/packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js
@@ -11,16 +11,17 @@ import type { StrictReactDOMInputProps } from '../../types/StrictReactDOMInputPr
 import type { StrictReactDOMTextAreaProps } from '../../types/StrictReactDOMTextAreaProps';
 
 import * as React from 'react';
-import { Animated, TextInput } from 'react-native';
+import * as ReactNative from '../react-native';
+
 import { errorMsg } from '../../shared/logUtils';
 import { mergeRefs } from '../../shared/mergeRefs';
 import { useNativeProps } from './useNativeProps';
 import { useStrictDOMElement } from './useStrictDOMElement';
 
-const AnimatedTextInput = Animated.createAnimatedComponent<
-  React.ElementConfig<typeof TextInput>,
-  typeof TextInput
->(TextInput);
+const AnimatedTextInput = ReactNative.Animated.createAnimatedComponent<
+  React.ElementConfig<typeof ReactNative.TextInput>,
+  typeof ReactNative.TextInput
+>(ReactNative.TextInput);
 
 export function createStrictDOMTextInputComponent<
   P: StrictReactDOMInputProps | StrictReactDOMTextAreaProps,
@@ -31,8 +32,9 @@ export function createStrictDOMTextInputComponent<
 ): component(ref?: React.RefSetter<T>, ...P) {
   const component: React.AbstractComponent<P, T> = React.forwardRef(
     function (props, forwardedRef) {
-      let NativeComponent: typeof TextInput | typeof AnimatedTextInput =
-        TextInput;
+      let NativeComponent:
+        | typeof ReactNative.TextInput
+        | typeof AnimatedTextInput = ReactNative.TextInput;
       const elementRef = useStrictDOMElement<T>({ tagName });
 
       const {

diff --git a/packages/react-strict-dom/src/native/modules/usePseudoStates.js b/packages/react-strict-dom/src/native/modules/usePseudoStates.js
@@ -9,7 +9,7 @@
 
 import type { Style } from '../../types/styles';
 
-import { useMemo, useState } from 'react';
+import * as React from 'react';
 
 type InteractionHandlers = {
   onBlur?: () => void,
@@ -31,10 +31,10 @@ type Interaction = {
 };
 
 export function usePseudoStates(style: Style): Interaction {
-  const [focus, setFocus] = useState(false);
-  const [mouseHover, setMouseHover] = useState(false);
-  const [pointerHover, setPointerHover] = useState(false);
-  const [active, setActive] = useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const [mouseHover, setMouseHover] = React.useState(false);
+  const [pointerHover, setPointerHover] = React.useState(false);
+  const [active, setActive] = React.useState(false);
 
   let isHoverStyledElement = false;
   let isFocusStyledElement = false;
@@ -61,7 +61,7 @@ export function usePseudoStates(style: Style): Interaction {
     }
   }
 
-  const handlers = useMemo(() => {
+  const handlers = React.useMemo(() => {
     let value = null;
     if (isHoverStyledElement || isFocusStyledElement || isActiveStyledElement) {
       value = {} as InteractionHandlers;

diff --git a/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js b/packages/react-strict-dom/src/native/modules/useStrictDOMElement.js
@@ -9,7 +9,8 @@
 
 import type { CallbackRef } from '../../types/react';
 
-import { useCallback } from 'react';
+import * as React from 'react';
+
 import { useElementCallback } from '../../shared/useElementCallback';
 import { errorMsg } from '../../shared/logUtils';
 
@@ -33,7 +34,7 @@ type Options = {
 
 export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
   const elementCallback = useElementCallback(
-    useCallback(
+    React.useCallback(
       // $FlowFixMe[unclear-type]
       (node: any) => {
         Object.defineProperty(node, 'nodeName', {

diff --git a/packages/react-strict-dom/src/native/modules/useStyleProps.js b/packages/react-strict-dom/src/native/modules/useStyleProps.js
@@ -14,7 +14,8 @@ import type {
 } from '../../types/renderer.native';
 
 import * as stylex from '../stylex';
-import { useColorScheme, useWindowDimensions } from 'react-native';
+import * as ReactNative from '../react-native';
+
 import { flattenStyle } from './flattenStyle';
 import { useInheritedStyles } from './ContextInheritedStyles';
 import { usePseudoStates } from './usePseudoStates';
@@ -63,8 +64,8 @@ export function useStyleProps(
     writingDirection: dir
   } = options;
 
-  const { fontScale, height, width } = useWindowDimensions();
-  const colorScheme = useColorScheme();
+  const { fontScale, height, width } = ReactNative.useWindowDimensions();
+  const colorScheme = ReactNative.useColorScheme();
 
   // These values are already computed
   const {