Skip to content

Commit b2290b1

Browse files
necolasnecolas
committed
Consolidate all React Native API imports to internal module
1 parent d048144 commit b2290b1

15 files changed

Lines changed: 102 additions & 94 deletions

‎packages/react-strict-dom/src/native/html.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { createStrictDOMTextComponent as createStrictText } from './modules/crea
2828
// $FlowFixMe[nonstrict-import]
2929
import { createStrictDOMTextInputComponent as createStrictTextInput } from './modules/createStrictDOMTextInputComponent';
3030
// $FlowFixMe[nonstrict-import]
31-
import { Platform } from 'react-native';
31+
import * as ReactNative from './react-native';
3232
import * as stylex from './stylex';
3333

3434
const styles = stylex.create({
@@ -45,7 +45,10 @@ const styles = stylex.create({
4545
borderWidth: 1
4646
},
4747
code: {
48-
fontFamily: Platform.select({ ios: 'Menlo', default: 'monospace' })
48+
fontFamily: ReactNative.Platform.select({
49+
ios: 'Menlo',
50+
default: 'monospace'
51+
})
4952
},
5053
heading: {
5154
fontSize: '1.5rem',

‎packages/react-strict-dom/src/native/modules/ContextInheritedStyles.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
import type { Style } from '../../types/styles';
1111

1212
import * as React from 'react';
13-
import { useMemo, useState } from 'react';
1413
import { flattenStyle } from './flattenStyle';
1514
import { shallowEqual } from './shallowEqual';
1615

@@ -34,7 +33,7 @@ if (__DEV__) {
3433
export function ProvideInheritedStyles(props: ProviderProps): React.Node {
3534
const { children, value } = props;
3635
const inheritedStyles = useInheritedStyles();
37-
const flatStyle = useMemo(() => {
36+
const flatStyle = React.useMemo(() => {
3837
if (
3938
value == null ||
4039
(typeof value === 'object' && Object.keys(value).length === 0)
@@ -47,7 +46,7 @@ export function ProvideInheritedStyles(props: ProviderProps): React.Node {
4746
}
4847
}, [inheritedStyles, value]);
4948

50-
const [cachedFlatStyle, setCachedFlatStyle] = useState(flatStyle);
49+
const [cachedFlatStyle, setCachedFlatStyle] = React.useState(flatStyle);
5150

5251
if (
5352
flatStyle !== cachedFlatStyle &&

‎packages/react-strict-dom/src/native/modules/TextString.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
*/
99

1010
import * as React from 'react';
11-
import { Text } from 'react-native';
11+
import * as ReactNative from '../react-native';
12+
1213
import { useCustomProperties } from './ContextCustomProperties';
1314
import { useStyleProps } from './useStyleProps';
1415

@@ -30,6 +31,6 @@ export function TextString(props: Props): React.Node {
3031

3132
return (
3233
// $FlowFixMe
33-
<Text {...nativeProps} children={children} />
34+
<ReactNative.Text {...nativeProps} children={children} />
3435
);
3536
}

‎packages/react-strict-dom/src/native/modules/createStrictDOMComponent.js‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ import type { ReactNativeProps } from '../../types/renderer.native';
1111
import type { StrictProps as StrictPropsOriginal } from '../../types/StrictProps';
1212

1313
import * as React from 'react';
14-
import { Animated, Pressable } from 'react-native';
15-
import { experimental_LayoutConformance as LayoutConformance } from 'react-native';
16-
import { ViewNativeComponent, TextAncestorContext } from '../react-native';
14+
import * as ReactNative from '../react-native';
1715

1816
import { ProvideCustomProperties } from './ContextCustomProperties';
1917
import { ProvideDisplayInside, useDisplayInside } from './ContextDisplayInside';
@@ -29,10 +27,10 @@ type StrictProps = $ReadOnly<{
2927
children?: React.Node | ((ReactNativeProps) => React.Node)
3028
}>;
3129

32-
const AnimatedPressable = Animated.createAnimatedComponent<
33-
React.ElementConfig<typeof Pressable>,
34-
typeof Pressable
35-
>(Pressable);
30+
const AnimatedPressable = ReactNative.Animated.createAnimatedComponent<
31+
React.ElementConfig<typeof ReactNative.Pressable>,
32+
typeof ReactNative.Pressable
33+
>(ReactNative.Pressable);
3634

3735
export function createStrictDOMComponent<T, P: StrictProps>(
3836
tagName: string,
@@ -41,9 +39,11 @@ export function createStrictDOMComponent<T, P: StrictProps>(
4139
const component: React.AbstractComponent<P, T> = React.forwardRef(
4240
function (props, forwardedRef) {
4341
let NativeComponent =
44-
tagName === 'button' ? Pressable : ViewNativeComponent;
42+
tagName === 'button'
43+
? ReactNative.Pressable
44+
: ReactNative.ViewNativeComponent;
4545
const elementRef = useStrictDOMElement<T>({ tagName });
46-
const hasTextAncestor = React.useContext(TextAncestorContext);
46+
const hasTextAncestor = React.useContext(ReactNative.TextAncestorContext);
4747

4848
/**
4949
* Resolve global HTML and style props
@@ -59,9 +59,9 @@ export function createStrictDOMComponent<T, P: StrictProps>(
5959

6060
if (
6161
nativeProps.onPress != null &&
62-
NativeComponent === ViewNativeComponent
62+
NativeComponent === ReactNative.ViewNativeComponent
6363
) {
64-
NativeComponent = Pressable;
64+
NativeComponent = ReactNative.Pressable;
6565
}
6666

6767
// Tag-specific props
@@ -78,7 +78,7 @@ export function createStrictDOMComponent<T, P: StrictProps>(
7878

7979
// Component-specific props
8080

81-
if (NativeComponent === Pressable) {
81+
if (NativeComponent === ReactNative.Pressable) {
8282
if (props.disabled === true) {
8383
nativeProps.disabled = true;
8484
nativeProps.focusable = false;
@@ -142,10 +142,10 @@ export function createStrictDOMComponent<T, P: StrictProps>(
142142

143143
// Use Animated components if necessary
144144
if (nativeProps.animated === true) {
145-
if (NativeComponent === ViewNativeComponent) {
146-
NativeComponent = Animated.View;
145+
if (NativeComponent === ReactNative.ViewNativeComponent) {
146+
NativeComponent = ReactNative.Animated.View;
147147
}
148-
if (NativeComponent === Pressable) {
148+
if (NativeComponent === ReactNative.Pressable) {
149149
NativeComponent = AnimatedPressable;
150150
}
151151
}
@@ -164,7 +164,9 @@ export function createStrictDOMComponent<T, P: StrictProps>(
164164

165165
// Enable W3C layout support
166166
if (props['data-layoutconformance'] === 'strict') {
167-
element = <LayoutConformance children={element} mode="strict" />;
167+
element = (
168+
<ReactNative.LayoutConformance children={element} mode="strict" />
169+
);
168170
}
169171

170172
if (
@@ -200,9 +202,9 @@ export function createStrictDOMComponent<T, P: StrictProps>(
200202

201203
if (hasTextAncestor) {
202204
return (
203-
<TextAncestorContext.Provider value={false}>
205+
<ReactNative.TextAncestorContext.Provider value={false}>
204206
{element}
205-
</TextAncestorContext.Provider>
207+
</ReactNative.TextAncestorContext.Provider>
206208
);
207209
}
208210

‎packages/react-strict-dom/src/native/modules/createStrictDOMImageComponent.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
import type { StrictReactDOMImageProps } from '../../types/StrictReactDOMImageProps';
1111

1212
import * as React from 'react';
13-
import { Animated, Image } from 'react-native';
13+
import * as ReactNative from '../react-native';
14+
1415
import { mergeRefs } from '../../shared/mergeRefs';
1516
import { useNativeProps } from './useNativeProps';
1617
import { useStrictDOMElement } from './useStrictDOMElement';
@@ -22,7 +23,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
2223
): component(ref?: React.RefSetter<T>, ...P) {
2324
const component: React.AbstractComponent<P, T> = React.forwardRef(
2425
function (props, forwardedRef) {
25-
let NativeComponent = Image;
26+
let NativeComponent = ReactNative.Image;
2627
const elementRef = useStrictDOMElement<T>({ tagName });
2728

2829
const {
@@ -106,7 +107,7 @@ export function createStrictDOMImageComponent<P: StrictReactDOMImageProps, T>(
106107

107108
// Use Animated components if necessary
108109
if (nativeProps.animated === true) {
109-
NativeComponent = Animated.Image;
110+
NativeComponent = ReactNative.Animated.Image;
110111
}
111112

112113
const element: React.Node =

‎packages/react-strict-dom/src/native/modules/createStrictDOMTextComponent.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import type { ReactNativeProps } from '../../types/renderer.native';
1111
import type { StrictProps as StrictPropsOriginal } from '../../types/StrictProps';
1212

1313
import * as React from 'react';
14-
import { Animated, Platform, Text } from 'react-native';
14+
import * as ReactNative from '../react-native';
15+
1516
import { ProvideCustomProperties } from './ContextCustomProperties';
1617
import { ProvideInheritedStyles } from './ContextInheritedStyles';
1718
import { errorMsg } from '../../shared/logUtils';
@@ -34,7 +35,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
3435
): component(ref?: React.RefSetter<T>, ...P) {
3536
const component: React.AbstractComponent<P, T> = React.forwardRef(
3637
function (props, forwardedRef) {
37-
let NativeComponent = Text;
38+
let NativeComponent = ReactNative.Text;
3839
const elementRef = useStrictDOMElement<T>({ tagName });
3940

4041
const { href, label } = props;
@@ -91,7 +92,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
9192
// Workaround: Android doesn't support ellipsis truncation if Text is selectable
9293
// See #136
9394
const disableUserSelect =
94-
Platform.OS === 'android' &&
95+
ReactNative.Platform.OS === 'android' &&
9596
nativeProps.numberOfLines != null &&
9697
nativeProps.style.userSelect !== 'none';
9798

@@ -102,7 +103,7 @@ export function createStrictDOMTextComponent<T, P: StrictProps>(
102103

103104
// Use Animated components if necessary
104105
if (nativeProps.animated === true) {
105-
NativeComponent = Animated.Text;
106+
NativeComponent = ReactNative.Animated.Text;
106107
}
107108

108109
/**

‎packages/react-strict-dom/src/native/modules/createStrictDOMTextInputComponent.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,17 @@ import type { StrictReactDOMInputProps } from '../../types/StrictReactDOMInputPr
1111
import type { StrictReactDOMTextAreaProps } from '../../types/StrictReactDOMTextAreaProps';
1212

1313
import * as React from 'react';
14-
import { Animated, TextInput } from 'react-native';
14+
import * as ReactNative from '../react-native';
15+
1516
import { errorMsg } from '../../shared/logUtils';
1617
import { mergeRefs } from '../../shared/mergeRefs';
1718
import { useNativeProps } from './useNativeProps';
1819
import { useStrictDOMElement } from './useStrictDOMElement';
1920

20-
const AnimatedTextInput = Animated.createAnimatedComponent<
21-
React.ElementConfig<typeof TextInput>,
22-
typeof TextInput
23-
>(TextInput);
21+
const AnimatedTextInput = ReactNative.Animated.createAnimatedComponent<
22+
React.ElementConfig<typeof ReactNative.TextInput>,
23+
typeof ReactNative.TextInput
24+
>(ReactNative.TextInput);
2425

2526
export function createStrictDOMTextInputComponent<
2627
P: StrictReactDOMInputProps | StrictReactDOMTextAreaProps,
@@ -31,8 +32,9 @@ export function createStrictDOMTextInputComponent<
3132
): component(ref?: React.RefSetter<T>, ...P) {
3233
const component: React.AbstractComponent<P, T> = React.forwardRef(
3334
function (props, forwardedRef) {
34-
let NativeComponent: typeof TextInput | typeof AnimatedTextInput =
35-
TextInput;
35+
let NativeComponent:
36+
| typeof ReactNative.TextInput
37+
| typeof AnimatedTextInput = ReactNative.TextInput;
3638
const elementRef = useStrictDOMElement<T>({ tagName });
3739

3840
const {

‎packages/react-strict-dom/src/native/modules/usePseudoStates.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
import type { Style } from '../../types/styles';
1111

12-
import { useMemo, useState } from 'react';
12+
import * as React from 'react';
1313

1414
type InteractionHandlers = {
1515
onBlur?: () => void,
@@ -31,10 +31,10 @@ type Interaction = {
3131
};
3232

3333
export function usePseudoStates(style: Style): Interaction {
34-
const [focus, setFocus] = useState(false);
35-
const [mouseHover, setMouseHover] = useState(false);
36-
const [pointerHover, setPointerHover] = useState(false);
37-
const [active, setActive] = useState(false);
34+
const [focus, setFocus] = React.useState(false);
35+
const [mouseHover, setMouseHover] = React.useState(false);
36+
const [pointerHover, setPointerHover] = React.useState(false);
37+
const [active, setActive] = React.useState(false);
3838

3939
let isHoverStyledElement = false;
4040
let isFocusStyledElement = false;
@@ -61,7 +61,7 @@ export function usePseudoStates(style: Style): Interaction {
6161
}
6262
}
6363

64-
const handlers = useMemo(() => {
64+
const handlers = React.useMemo(() => {
6565
let value = null;
6666
if (isHoverStyledElement || isFocusStyledElement || isActiveStyledElement) {
6767
value = {} as InteractionHandlers;

‎packages/react-strict-dom/src/native/modules/useStrictDOMElement.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99

1010
import type { CallbackRef } from '../../types/react';
1111

12-
import { useCallback } from 'react';
12+
import * as React from 'react';
13+
1314
import { useElementCallback } from '../../shared/useElementCallback';
1415
import { errorMsg } from '../../shared/logUtils';
1516

@@ -33,7 +34,7 @@ type Options = {
3334

3435
export function useStrictDOMElement<T>({ tagName }: Options): CallbackRef<T> {
3536
const elementCallback = useElementCallback(
36-
useCallback(
37+
React.useCallback(
3738
// $FlowFixMe[unclear-type]
3839
(node: any) => {
3940
Object.defineProperty(node, 'nodeName', {

‎packages/react-strict-dom/src/native/modules/useStyleProps.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@ import type {
1414
} from '../../types/renderer.native';
1515

1616
import * as stylex from '../stylex';
17-
import { useColorScheme, useWindowDimensions } from 'react-native';
17+
import * as ReactNative from '../react-native';
18+
1819
import { flattenStyle } from './flattenStyle';
1920
import { useInheritedStyles } from './ContextInheritedStyles';
2021
import { usePseudoStates } from './usePseudoStates';
@@ -63,8 +64,8 @@ export function useStyleProps(
6364
writingDirection: dir
6465
} = options;
6566

66-
const { fontScale, height, width } = useWindowDimensions();
67-
const colorScheme = useColorScheme();
67+
const { fontScale, height, width } = ReactNative.useWindowDimensions();
68+
const colorScheme = ReactNative.useColorScheme();
6869

6970
// These values are already computed
7071
const {

0 commit comments

Comments
 (0)