diff --git a/change/@office-iss-react-native-win32-d9d51616-e863-4814-9731-b55e765d0ded.json b/change/@office-iss-react-native-win32-d9d51616-e863-4814-9731-b55e765d0ded.json
new file mode 100644
index 00000000000..e752519ecc4
--- /dev/null
+++ b/change/@office-iss-react-native-win32-d9d51616-e863-4814-9731-b55e765d0ded.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "integraye nightly",
+ "packageName": "@office-iss/react-native-win32",
+ "email": "74712637+iamAbhi-916@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/@react-native-windows-automation-channel-dbc77308-3e6b-4bb5-8d82-e224137795f9.json b/change/@react-native-windows-automation-channel-dbc77308-3e6b-4bb5-8d82-e224137795f9.json
new file mode 100644
index 00000000000..ea50b4c5391
--- /dev/null
+++ b/change/@react-native-windows-automation-channel-dbc77308-3e6b-4bb5-8d82-e224137795f9.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix",
+ "packageName": "@react-native-windows/automation-channel",
+ "email": "74712637+iamAbhi-916@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/react-native-platform-override-782dbef9-4234-4204-aa7a-599b6c4e7809.json b/change/react-native-platform-override-782dbef9-4234-4204-aa7a-599b6c4e7809.json
new file mode 100644
index 00000000000..7a46ce408c2
--- /dev/null
+++ b/change/react-native-platform-override-782dbef9-4234-4204-aa7a-599b6c4e7809.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix",
+ "packageName": "react-native-platform-override",
+ "email": "74712637+iamAbhi-916@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-f2a1b3c0-2bed-48e4-9fc6-bd09cec743bf.json b/change/react-native-windows-f2a1b3c0-2bed-48e4-9fc6-bd09cec743bf.json
new file mode 100644
index 00000000000..15b21420d7f
--- /dev/null
+++ b/change/react-native-windows-f2a1b3c0-2bed-48e4-9fc6-bd09cec743bf.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "fix",
+ "packageName": "react-native-windows",
+ "email": "74712637+iamAbhi-916@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/@office-iss/react-native-win32-tester/overrides.json b/packages/@office-iss/react-native-win32-tester/overrides.json
index c88646b2f7e..112fa8c4495 100644
--- a/packages/@office-iss/react-native-win32-tester/overrides.json
+++ b/packages/@office-iss/react-native-win32-tester/overrides.json
@@ -5,13 +5,13 @@
"excludePatterns": [
"src/js/examples-win32/**"
],
- "baseVersion": "0.80.0-nightly-20250506-3ac16dd6a",
+ "baseVersion": "0.81.0-nightly-20250521-3cb70bb6a",
"overrides": [
{
"type": "patch",
"file": "src/js/components/ListExampleShared.win32.js",
"baseFile": "packages/rn-tester/js/components/ListExampleShared.js",
- "baseHash": "d39ad505e22d525b00b8f63165ce2c2bbcc86152"
+ "baseHash": "eb604f3c06468e8aaa2671985a772b26f666e5de"
},
{
"type": "patch",
diff --git a/packages/@office-iss/react-native-win32-tester/package.json b/packages/@office-iss/react-native-win32-tester/package.json
index 424f704fcb1..52c51022b90 100644
--- a/packages/@office-iss/react-native-win32-tester/package.json
+++ b/packages/@office-iss/react-native-win32-tester/package.json
@@ -30,7 +30,7 @@
"@types/node": "^18.0.0",
"eslint": "^8.19.0",
"just-scripts": "^1.3.3",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-platform-override": "^1.9.56",
"typescript": "5.0.4"
},
diff --git a/packages/@office-iss/react-native-win32-tester/src/js/components/ListExampleShared.win32.js b/packages/@office-iss/react-native-win32-tester/src/js/components/ListExampleShared.win32.js
index 6c0d7732b43..ca1d28b09e0 100644
--- a/packages/@office-iss/react-native-win32-tester/src/js/components/ListExampleShared.win32.js
+++ b/packages/@office-iss/react-native-win32-tester/src/js/components/ListExampleShared.win32.js
@@ -12,6 +12,7 @@
import RNTesterText from './RNTesterText';
import React from 'react';
+import {memo} from 'react';
import {
ActivityIndicator,
Animated,
@@ -164,7 +165,7 @@ class SeparatorComponent extends React.PureComponent<{...}> {
}
}
-const LoadingComponent: React.ComponentType<{}> = React.memo(() => (
+const LoadingComponent: React.ComponentType<{}> = memo(() => (
diff --git a/packages/@office-iss/react-native-win32/.flowconfig b/packages/@office-iss/react-native-win32/.flowconfig
index d7e5a6eb497..a80fb2da7b5 100644
--- a/packages/@office-iss/react-native-win32/.flowconfig
+++ b/packages/@office-iss/react-native-win32/.flowconfig
@@ -174,4 +174,4 @@ untyped-import
untyped-type-import
[version]
-^0.269.1
+^0.271.0
diff --git a/packages/@office-iss/react-native-win32/overrides.json b/packages/@office-iss/react-native-win32/overrides.json
index 794ea150210..4f64971ef6f 100644
--- a/packages/@office-iss/react-native-win32/overrides.json
+++ b/packages/@office-iss/react-native-win32/overrides.json
@@ -7,19 +7,19 @@
"**/__snapshots__/**",
"src-win/rntypes/**"
],
- "baseVersion": "0.80.0-nightly-20250506-3ac16dd6a",
+ "baseVersion": "0.81.0-nightly-20250521-3cb70bb6a",
"overrides": [
{
"type": "derived",
"file": ".flowconfig",
"baseFile": ".flowconfig",
- "baseHash": "70ed729d5f52c241530e8459cc40263d4e9fa9c0"
+ "baseHash": "dbea35126905a8314fa0a64ed2912896bc6d307b"
},
{
"type": "derived",
"file": "src-win/index.win32.js",
"baseFile": "packages/react-native/index.js",
- "baseHash": "96361b83bfc122f1d78cc7d87ea0d7c3bfac138f"
+ "baseHash": "b447e699186ab3e95da9dc4520b9c2517776e723"
},
{
"type": "platform",
@@ -60,7 +60,7 @@
"type": "derived",
"file": "src-win/Libraries/Components/Button.win32.js",
"baseFile": "packages/react-native/Libraries/Components/Button.js",
- "baseHash": "4e77e13aa5774e813fbd874a13a920ea12e3ed91"
+ "baseHash": "6063d726e6255d1c55e07587f9ce09f1b7284301"
},
{
"type": "platform",
@@ -85,14 +85,14 @@
"type": "patch",
"file": "src-win/Libraries/Components/Pressable/Pressable.win32.js",
"baseFile": "packages/react-native/Libraries/Components/Pressable/Pressable.js",
- "baseHash": "96bdd4aebf4133fd2fe6d1b448f9d7b4cd3e8982",
+ "baseHash": "eff51d201199c68c6f7ca268e315e538dcc01ab9",
"issue": 6240
},
{
"type": "patch",
"file": "src-win/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
"baseFile": "packages/react-native/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js",
- "baseHash": "c96925930d9664306a8aef8b4102c43055ea03be"
+ "baseHash": "d1cc663442d184b62799b748c475a5a2c5c558c7"
},
{
"type": "copy",
@@ -108,13 +108,13 @@
"type": "derived",
"file": "src-win/Libraries/Components/TextInput/TextInput.flow.win32.js",
"baseFile": "packages/react-native/Libraries/Components/TextInput/TextInput.flow.js",
- "baseHash": "f407548782cade71af32a52ecb440f72a403f06e"
+ "baseHash": "b611f4e98e9c7818dfac087e4f14384d3cc16b6a"
},
{
"type": "derived",
"file": "src-win/Libraries/Components/TextInput/TextInput.win32.js",
"baseFile": "packages/react-native/Libraries/Components/TextInput/TextInput.js",
- "baseHash": "9965c0079652083ab549bc2799eb9528b56a1b2d"
+ "baseHash": "2a5835c5cbdb36bd110e26f9be737aaaeb1fd97c"
},
{
"type": "patch",
@@ -153,7 +153,7 @@
"type": "derived",
"file": "src-win/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js",
"baseFile": "packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js",
- "baseHash": "8706705c1f8d3dd5390ea631ce5ae60e300ae50d"
+ "baseHash": "1cad0522ba348d657e7857bf84628d88e776170b"
},
{
"type": "platform",
@@ -177,7 +177,7 @@
"type": "patch",
"file": "src-win/Libraries/Components/View/View.win32.js",
"baseFile": "packages/react-native/Libraries/Components/View/View.js",
- "baseHash": "2dd3e58cf6c4bc0882550eedd8150435972365eb"
+ "baseHash": "121c2126d26c94c8e508e3fb19ffe33f7be814b1"
},
{
"type": "derived",
@@ -218,7 +218,7 @@
"type": "patch",
"file": "src-win/Libraries/Core/Devtools/loadBundleFromServer.win32.js",
"baseFile": "packages/react-native/Libraries/Core/Devtools/loadBundleFromServer.js",
- "baseHash": "e0158fd16d4a787e5a94d69e2b7a721e81b7c3da",
+ "baseHash": "ac08c96a4bebd677597a40ea1525a2d5d1ee8742",
"issue": 12704
},
{
@@ -236,7 +236,7 @@
"type": "derived",
"file": "src-win/Libraries/Image/Image.win32.js",
"baseFile": "packages/react-native/Libraries/Image/Image.ios.js",
- "baseHash": "c0bc913aa95b6d1309ba44ef7968ba58fc488427",
+ "baseHash": "5d62f4a6c4edfe3007eb3b80704a1dfb68e5ff8a",
"issue": 4320
},
{
@@ -303,13 +303,13 @@
"type": "derived",
"file": "src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js",
"baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js",
- "baseHash": "3a3d7da499937cce35c9bd17a11f10b2eeac04cc"
+ "baseHash": "cdf958aebabbe9067d34a2df3e6f2fe7ce09f51e"
},
{
"type": "derived",
"file": "src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js",
"baseFile": "packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js",
- "baseHash": "b355418205aa52cf33fb7e4d521b26083eada49d"
+ "baseHash": "987653809d7838bb80d3a975abc9f0fd3bc13d93"
},
{
"type": "derived",
@@ -412,13 +412,13 @@
"type": "derived",
"file": "src-win/Libraries/Text/Text.d.ts",
"baseFile": "packages/react-native/Libraries/Text/Text.d.ts",
- "baseHash": "b5f44957bc61497fcb7203934bdbc6ca9725cf42"
+ "baseHash": "d3807571f477ef8ba4bb20c1ee899b1a5814941d"
},
{
"type": "derived",
"file": "src-win/Libraries/Text/Text.win32.js",
"baseFile": "packages/react-native/Libraries/Text/Text.js",
- "baseHash": "1f802db19830e468b84640fc5c7740a11e154250"
+ "baseHash": "108e59816ed3b3c8183d0687a66088755580c00d"
},
{
"type": "derived",
@@ -431,7 +431,7 @@
"type": "derived",
"file": "src-win/Libraries/Text/TextProps.win32.js",
"baseFile": "packages/react-native/Libraries/Text/TextProps.js",
- "baseHash": "d31f973c14140792d9d28d208fca15d092a8a4e2"
+ "baseHash": "6ee62a1b3a4384c2b5bd1dd10a13664c72e5dc88"
},
{
"type": "patch",
@@ -477,7 +477,7 @@
"type": "patch",
"file": "src-win/Libraries/Utilities/PlatformTypes.js",
"baseFile": "packages/react-native/Libraries/Utilities/PlatformTypes.js",
- "baseHash": "0bd36210528f74f9081d858c9ab64ead92c54950",
+ "baseHash": "8beb4d8d786f33f9eeb6edcff939c38765e19055",
"issue": 14686
},
{
@@ -490,14 +490,14 @@
"type": "patch",
"file": "src-win/src/private/animated/NativeAnimatedHelper.win32.js",
"baseFile": "packages/react-native/src/private/animated/NativeAnimatedHelper.js",
- "baseHash": "3247a8e436a7beeda45ce7d77343229b5204cbfc",
+ "baseHash": "e897f1bd33ed982044b97a01d9f606b9ebcd4505",
"issue": 11041
},
{
"type": "copy",
"file": "src-win/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js",
"baseFile": "packages/react-native/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js",
- "baseHash": "2d33789b0c7a45996dc23f26c4b09fb2026a9285"
+ "baseHash": "f2cc01b07b779b75002daec9c2761616ad01f4ca"
},
{
"type": "derived",
diff --git a/packages/@office-iss/react-native-win32/package.json b/packages/@office-iss/react-native-win32/package.json
index 834c75b132f..e78348e6e32 100644
--- a/packages/@office-iss/react-native-win32/package.json
+++ b/packages/@office-iss/react-native-win32/package.json
@@ -88,7 +88,7 @@
"just-scripts": "^1.3.3",
"prettier": "2.8.8",
"react": "19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-platform-override": "^1.9.56",
"typescript": "5.0.4"
},
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Button.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Button.win32.js
index e718aa16cdd..4f8811e43ec 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Button.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Button.win32.js
@@ -288,10 +288,10 @@ const Touchable: typeof TouchableNativeFeedback | typeof TouchableOpacity =
type ButtonRef = React.ElementRef;
-const Button: component(
- ref?: React.RefSetter,
- ...props: ButtonProps
-) = React.forwardRef((props: ButtonProps, ref: React.RefSetter) => {
+const Button = React.forwardRef(function Button(
+ props: ButtonProps,
+ ref: React.RefSetter,
+) {
// Win32
const {
accessibilityLabel,
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Pressable/Pressable.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Pressable/Pressable.win32.js
index 8b9456a8003..332a40c70f0 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Pressable/Pressable.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Pressable/Pressable.win32.js
@@ -28,7 +28,7 @@ import useAndroidRippleForView, {
type PressableAndroidRippleConfig,
} from './useAndroidRippleForView';
import * as React from 'react';
-import {useMemo, useRef, useState} from 'react';
+import {memo, useMemo, useRef, useState} from 'react';
import type {HandledKeyboardEvent} from '../../Components/View/ViewPropTypes';
import View from '../View/View';
@@ -211,10 +211,13 @@ type Instance = React.ElementRef;
* Component used to build display components that should respond to whether the
* component is currently pressed or not.
*/
-function Pressable(
- props: PressableProps,
- forwardedRef: React.RefSetter,
-): React.Node {
+function Pressable({
+ ref: forwardedRef,
+ ...props
+}: {
+ ref?: React.RefSetter,
+ ...PressableProps,
+}): React.Node {
const {
accessible,
accessibilityState,
@@ -398,7 +401,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
return [pressed || forcePressed, setPressed];
}
-const MemoedPressable = React.memo(React.forwardRef(Pressable));
+const MemoedPressable = memo(Pressable);
MemoedPressable.displayName = 'Pressable';
export default (MemoedPressable: component(
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js
index 5691ce0e156..707b4ee7965 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js
@@ -17,11 +17,23 @@ import Platform from '../../Utilities/Platform';
export type {ProgressBarAndroidProps};
+// A utility type to preserve the semantics of the union uses in the definition
+// of ProgressBarAndroidProps. TS's Omit does not distribute over unions, so
+// we define our own version which does. This does not affect Flow.
+// $FlowExpectedError[unclear-type]
+type Omit = T extends any ? Pick, K>> : T;
+
+/**
+ * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.
+ * It can now be installed and imported from `@react-native-community/progress-bar-android` instead of 'react-native'.
+ * @see https://github.com/react-native-community/progress-bar-android
+ * @deprecated
+ */
let ProgressBarAndroid: component(
ref?: React.RefSetter<
React.ElementRef,
>,
- ...props: ProgressBarAndroidProps
+ ...props: Omit
);
if (Platform.OS === 'android') {
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.flow.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.flow.win32.js
index 3ece820ac7e..ca1a29b6053 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.flow.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.flow.win32.js
@@ -16,11 +16,7 @@ import type {
} from '../../Types/CoreEventTypes';
import type {ViewProps} from '../View/ViewPropTypes';
-import {
- type ColorValue,
- type TextStyleProp,
- type ViewStyleProp,
-} from '../../StyleSheet/StyleSheet';
+import {type ColorValue, type TextStyleProp} from '../../StyleSheet/StyleSheet';
import * as React from 'react';
/**
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js
index 7772ec4db88..866b84445aa 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/TextInput/TextInput.win32.js
@@ -61,7 +61,7 @@ import TextInputState from './TextInputState';
import invariant from 'invariant';
import nullthrows from 'nullthrows';
import * as React from 'react';
-import {useCallback, useLayoutEffect, useRef, useState} from 'react';
+import {useCallback, useLayoutEffect, useMemo, useRef, useState} from 'react';
let AndroidTextInput;
let AndroidTextInputCommands;
@@ -604,7 +604,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
rejectResponderTermination,
} = props;
- const config = React.useMemo(
+ const config = useMemo(
() => ({
hitSlop,
onPress: (event: GestureResponderEvent) => {
@@ -981,27 +981,28 @@ const autoCompleteWebToTextContentTypeMap = {
username: 'username',
};
-const ExportedForwardRef: component(
+const TextInput: component(
ref?: React.RefSetter,
...props: React.ElementConfig
-) = React.forwardRef(function TextInput(
- {
- allowFontScaling = true,
- rejectResponderTermination = true,
- underlineColorAndroid = 'transparent',
- autoComplete,
- textContentType,
- readOnly,
- editable,
- enterKeyHint,
- returnKeyType,
- inputMode,
- showSoftInputOnFocus,
- keyboardType,
- ...restProps
- },
- forwardedRef: React.RefSetter,
-) {
+) = function TextInput({
+ ref: forwardedRef,
+ allowFontScaling = true,
+ rejectResponderTermination = true,
+ underlineColorAndroid = 'transparent',
+ autoComplete,
+ textContentType,
+ readOnly,
+ editable,
+ enterKeyHint,
+ returnKeyType,
+ inputMode,
+ showSoftInputOnFocus,
+ keyboardType,
+ ...restProps
+}: {
+ ref?: React.RefSetter,
+ ...React.ElementConfig,
+}) {
return (
);
-});
+};
-ExportedForwardRef.displayName = 'TextInput';
+TextInput.displayName = 'TextInput';
// $FlowFixMe[prop-missing]
-ExportedForwardRef.State = {
+TextInput.State = {
currentlyFocusedInput: TextInputState.currentlyFocusedInput,
currentlyFocusedField: TextInputState.currentlyFocusedField,
@@ -1073,4 +1074,4 @@ const verticalAlignToTextAlignVerticalMap = {
};
// $FlowFixMe[unclear-type] Unclear type. Using `any` type is not safe.
-export default ExportedForwardRef as any as TextInputType;
+export default TextInput as any as TextInputType;
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js
index 9da6da38a00..0f1ebd44b21 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js
@@ -13,12 +13,14 @@ import type {TouchableWithoutFeedbackProps} from './TouchableWithoutFeedback';
import Pressability, {
type PressabilityConfig,
} from '../../Pressability/Pressability';
+import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
import {findHostInstance_DEPRECATED} from '../../ReactNative/RendererProxy';
import processColor from '../../StyleSheet/processColor';
import Platform from '../../Utilities/Platform';
import {Commands} from '../View/ViewNativeComponent';
import invariant from 'invariant';
import * as React from 'react';
+import {cloneElement} from 'react';
type TVProps = {
/**
@@ -283,6 +285,103 @@ class TouchableNativeFeedback extends React.Component<
}
}
+ render(): React.Node {
+ const element = React.Children.only<$FlowFixMe>(this.props.children);
+ const children: Array = [element.props.children];
+ if (__DEV__) {
+ if (element.type === View) {
+ children.push(
+ ,
+ );
+ }
+ }
+
+ // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
+ // adopting `Pressability`, so preserve that behavior.
+ const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} =
+ this.state.pressability.getEventHandlers();
+
+ let _accessibilityState = {
+ busy: this.props['aria-busy'] ?? this.props.accessibilityState?.busy,
+ checked:
+ this.props['aria-checked'] ?? this.props.accessibilityState?.checked,
+ disabled:
+ this.props['aria-disabled'] ?? this.props.accessibilityState?.disabled,
+ expanded:
+ this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
+ selected:
+ this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+ };
+
+ _accessibilityState =
+ this.props.disabled != null
+ ? {
+ ..._accessibilityState,
+ disabled: this.props.disabled,
+ }
+ : _accessibilityState;
+
+ const accessibilityValue = {
+ max: this.props['aria-valuemax'] ?? this.props.accessibilityValue?.max,
+ min: this.props['aria-valuemin'] ?? this.props.accessibilityValue?.min,
+ now: this.props['aria-valuenow'] ?? this.props.accessibilityValue?.now,
+ text: this.props['aria-valuetext'] ?? this.props.accessibilityValue?.text,
+ };
+
+ const accessibilityLiveRegion =
+ this.props['aria-live'] === 'off'
+ ? 'none'
+ : this.props['aria-live'] ?? this.props.accessibilityLiveRegion;
+
+ const accessibilityLabel =
+ this.props['aria-label'] ?? this.props.accessibilityLabel;
+ return cloneElement(
+ element,
+ {
+ ...eventHandlersWithoutBlurAndFocus,
+ ...getBackgroundProp(
+ this.props.background === undefined
+ ? TouchableNativeFeedback.SelectableBackground()
+ : this.props.background,
+ this.props.useForeground === true,
+ ),
+ accessible: this.props.accessible !== false,
+ accessibilityHint: this.props.accessibilityHint,
+ accessibilityLanguage: this.props.accessibilityLanguage,
+ accessibilityLabel: accessibilityLabel,
+ accessibilityRole: this.props.accessibilityRole,
+ accessibilityState: _accessibilityState,
+ accessibilityActions: this.props.accessibilityActions,
+ onAccessibilityAction: this.props.onAccessibilityAction,
+ accessibilityValue: accessibilityValue,
+ importantForAccessibility:
+ this.props['aria-hidden'] === true
+ ? 'no-hide-descendants'
+ : this.props.importantForAccessibility,
+ accessibilityViewIsModal:
+ this.props['aria-modal'] ?? this.props.accessibilityViewIsModal,
+ accessibilityLiveRegion: accessibilityLiveRegion,
+ accessibilityElementsHidden:
+ this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden,
+ hasTVPreferredFocus: this.props.hasTVPreferredFocus,
+ hitSlop: this.props.hitSlop,
+ focusable:
+ this.props.focusable !== false &&
+ this.props.onPress !== undefined &&
+ !this.props.disabled,
+ nativeID: this.props.id ?? this.props.nativeID,
+ nextFocusDown: this.props.nextFocusDown,
+ nextFocusForward: this.props.nextFocusForward,
+ nextFocusLeft: this.props.nextFocusLeft,
+ nextFocusRight: this.props.nextFocusRight,
+ nextFocusUp: this.props.nextFocusUp,
+ onLayout: this.props.onLayout,
+ testID: this.props.testID,
+ },
+ ...children,
+ );
+ }
+
componentDidUpdate(
prevProps: TouchableNativeFeedbackProps,
prevState: TouchableNativeFeedbackState,
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Core/Devtools/loadBundleFromServer.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Core/Devtools/loadBundleFromServer.win32.js
index 42db8dea250..4c8e5e57006 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Core/Devtools/loadBundleFromServer.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Core/Devtools/loadBundleFromServer.win32.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
import Networking from '../../Network/RCTNetworking';
@@ -20,6 +19,34 @@ let pendingRequests = 0;
const cachedPromisesByUrl = new Map>();
+export class LoadBundleFromServerError extends Error {
+ url: string;
+ isTimeout: boolean;
+ constructor(
+ message: string,
+ url: string,
+ isTimeout: boolean,
+ options?: {cause: mixed, ...},
+ ): void {
+ super(message, options);
+ this.url = url;
+ this.isTimeout = isTimeout;
+ this.name = 'LoadBundleFromServerError';
+ }
+}
+
+export class LoadBundleFromServerRequestError extends LoadBundleFromServerError {
+ constructor(
+ message: string,
+ url: string,
+ isTimeout: boolean,
+ options?: {cause: mixed, ...},
+ ): void {
+ super(message, url, isTimeout, options);
+ this.name = 'LoadBundleFromServerRequestError';
+ }
+}
+
function asyncRequest(
url: string,
): Promise<{body: string, headers: {[string]: string}}> {
@@ -62,10 +89,19 @@ function asyncRequest(
);
completeListener = Networking.addListener(
'didCompleteNetworkResponse',
- ([requestId, error]) => {
+ ([requestId, errorMessage, isTimeout]) => {
if (requestId === id) {
- if (error) {
- reject(error);
+ if (errorMessage) {
+ reject(
+ new LoadBundleFromServerRequestError(
+ 'Could not load bundle',
+ url,
+ isTimeout,
+ {
+ cause: errorMessage,
+ },
+ ),
+ );
} else {
//$FlowFixMe[incompatible-call]
resolve({body: responseText, headers});
@@ -122,9 +158,15 @@ export default function loadBundleFromServer(
headers['Content-Type'].indexOf('application/json') >= 0
) {
// Errors are returned as JSON.
- throw new Error(
- JSON.parse(body).message ||
- `Unknown error fetching '${bundlePathAndQuery}'`,
+ throw new LoadBundleFromServerError(
+ 'Could not load bundle',
+ bundlePathAndQuery,
+ false, // isTimeout
+ {
+ cause:
+ JSON.parse(body).message ||
+ `Unknown error fetching '${bundlePathAndQuery}'`,
+ },
);
}
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Image/Image.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Image/Image.win32.js
index c82ba212f20..1b7b4273de6 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Image/Image.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Image/Image.win32.js
@@ -8,12 +8,14 @@
* @format
*/
+import type {HostInstance} from '../../src/private/types/HostInstance';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageProps} from './ImageProps';
import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
import TextAncestor from '../Text/TextAncestor'; // [Windows]
import invariant from 'invariant'; // [Windows]
-import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
import NativeImageLoaderWin32 from './NativeImageLoaderWin32'; // [Win32] Replace iOS
import {createRootTag} from '../ReactNative/RootTag';
@@ -122,7 +124,13 @@ async function queryCache(
*
* See https://reactnative.dev/docs/image
*/
-let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
+let BaseImage: AbstractImageIOS = ({
+ ref: forwardedRef,
+ ...props
+}: {
+ ref?: React.RefSetter,
+ ...ImageProps,
+}) => {
const source = getImageSourcesFromImageProps(props) || {
uri: undefined,
width: undefined,
@@ -215,7 +223,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
}}
);
-});
+};
const imageComponentDecorator = unstable_getImageComponentDecorator();
if (imageComponentDecorator != null) {
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js
index 4ed214cfaa3..4ca5c3138ea 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js
@@ -19,6 +19,7 @@ import LogBoxButton from './LogBoxButton';
import LogBoxInspectorSection from './LogBoxInspectorSection';
import * as LogBoxStyle from './LogBoxStyle';
import * as React from 'react';
+import {useState} from 'react';
type Props = $ReadOnly<{
log: LogBoxLog,
@@ -49,7 +50,7 @@ function getPrettyFileName(path: string) {
return fileName;
}
function LogBoxInspectorReactFrames(props: Props): React.Node {
- const [collapsed, setCollapsed] = React.useState(true);
+ const [collapsed, setCollapsed] = useState(true);
if (
props.log.getAvailableComponentStack() == null ||
props.log.getAvailableComponentStack().length < 1
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js
index 217f2e5fefe..adf33ec9bc6 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js
@@ -17,6 +17,7 @@ import Text from '../../Text/Text';
import LogBoxButton from './LogBoxButton';
import * as LogBoxStyle from './LogBoxStyle';
import * as React from 'react';
+import {useEffect, useState} from 'react';
type Props = $ReadOnly<{
onPress?: ?(event: GestureResponderEvent) => void,
@@ -26,12 +27,12 @@ type Props = $ReadOnly<{
function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
// [Win32] Dont use Animated
/*
- const [state, setState] = React.useState({
+ const [state, setState] = useState({
animation: null,
rotate: null,
});
- React.useEffect(() => {
+ useEffect(() => {
if (props.status === 'PENDING') {
if (state.animation == null) {
const animated = new Animated.Value(0);
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.d.ts b/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.d.ts
index 274062abe7a..ff3ceec9358 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.d.ts
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.d.ts
@@ -296,6 +296,13 @@ export interface TextProps
* Controls how touch events are handled. Similar to `View`'s `pointerEvents`.
*/
pointerEvents?: ViewStyle['pointerEvents'] | undefined;
+
+ /**
+ * Defines how far your touch may move off of the button, before deactivating the button.
+ */
+ pressRetentionOffset?:
+ | {top: number; left: number; bottom: number; right: number}
+ | undefined;
}
/**
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.win32.js
index 5190c7fb53d..4311277c706 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Text/Text.win32.js
@@ -38,268 +38,185 @@ type TextForwardRef = React.ElementRef<
const TextImpl: component(
ref?: React.RefSetter,
...props: TextProps
-) = React.forwardRef(
- (
- {
- accessible,
- accessibilityControls, // Win32
- accessibilityDescribedBy, // Win32
- accessibilityDescription, // Win32
- accessibilityLabel,
- accessibilityLevel, // Win32
- accessibilityPositionInSet, // Win32
- accessibilitySetSize, // Win32
- accessibilityState,
- allowFontScaling,
- 'aria-busy': ariaBusy,
- 'aria-checked': ariaChecked,
- 'aria-controls': ariaControls, // Win32
- 'aria-describedby': ariaDescribedBy, // Win32
- 'aria-description': ariaDescription, // Win32
- 'aria-disabled': ariaDisabled,
- 'aria-expanded': ariaExpanded,
- 'aria-label': ariaLabel,
- 'aria-level': ariaLevel, // Win32
- 'aria-multiselectable': ariaMultiselectable, // Win32
- 'aria-posinset': ariaPosinset, // Win32
- 'aria-required': ariaRequired, // Win32
- 'aria-selected': ariaSelected,
- 'aria-setsize': ariaSetsize, // Win32
- children,
- ellipsizeMode,
- disabled,
- id,
- nativeID,
- numberOfLines,
- onLongPress,
- onPress,
- onPressIn,
- onPressOut,
- onResponderGrant,
- onResponderMove,
- onResponderRelease,
- onResponderTerminate,
- onResponderTerminationRequest,
- onStartShouldSetResponder,
- pressRetentionOffset,
- selectable,
- selectionColor,
- suppressHighlighting,
- style,
- ...restProps
- }: TextProps,
- forwardedRef,
- ) => {
- const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
- const _accessibilityControls = ariaControls ?? accessibilityControls; // Win32
- const _accessibilityDescribedBy =
- ariaDescribedBy ?? accessibilityDescribedBy; // Win32
- const _accessibilityDescription =
- ariaDescription ?? accessibilityDescription; // Win32
- const _accessibilityLevel = ariaLevel ?? accessibilityLevel; // Win32
- const _accessibilityPositionInSet =
- ariaPosinset ?? accessibilityPositionInSet; // Win32
- const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize; // Win32
-
- let _accessibilityState: ?TextProps['accessibilityState'] =
- accessibilityState;
- if (
- ariaBusy != null ||
- ariaChecked != null ||
- ariaDisabled != null ||
- ariaExpanded != null ||
- ariaSelected != null
- ) {
- if (_accessibilityState != null) {
- _accessibilityState = {
- busy: ariaBusy ?? _accessibilityState.busy,
- checked: ariaChecked ?? _accessibilityState.checked,
- disabled: ariaDisabled ?? _accessibilityState.disabled,
- expanded: ariaExpanded ?? _accessibilityState.expanded,
- multiselectable:
- ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
- required: ariaRequired ?? accessibilityState?.required, // Win32
- selected: ariaSelected ?? _accessibilityState.selected,
- };
- } else {
- _accessibilityState = {
- busy: ariaBusy,
- checked: ariaChecked,
- disabled: ariaDisabled,
- expanded: ariaExpanded,
- multiselectable: ariaMultiselectable, // Win32,
- required: ariaRequired, // Win32
- selected: ariaSelected,
- };
- }
+) = ({
+ ref: forwardedRef,
+ accessible,
+ accessibilityControls, // Win32
+ accessibilityDescribedBy, // Win32
+ accessibilityDescription, // Win32
+ accessibilityLabel,
+ accessibilityLevel, // Win32
+ accessibilityPositionInSet, // Win32
+ accessibilitySetSize, // Win32
+ accessibilityState,
+ allowFontScaling,
+ 'aria-busy': ariaBusy,
+ 'aria-checked': ariaChecked,
+ 'aria-controls': ariaControls, // Win32
+ 'aria-describedby': ariaDescribedBy, // Win32
+ 'aria-description': ariaDescription, // Win32
+ 'aria-disabled': ariaDisabled,
+ 'aria-expanded': ariaExpanded,
+ 'aria-label': ariaLabel,
+ 'aria-level': ariaLevel, // Win32
+ 'aria-multiselectable': ariaMultiselectable, // Win32
+ 'aria-posinset': ariaPosinset, // Win32
+ 'aria-required': ariaRequired, // Win32
+ 'aria-selected': ariaSelected,
+ 'aria-setsize': ariaSetsize, // Win32
+ children,
+ ellipsizeMode,
+ disabled,
+ id,
+ nativeID,
+ numberOfLines,
+ onLongPress,
+ onPress,
+ onPressIn,
+ onPressOut,
+ onResponderGrant,
+ onResponderMove,
+ onResponderRelease,
+ onResponderTerminate,
+ onResponderTerminationRequest,
+ onStartShouldSetResponder,
+ pressRetentionOffset,
+ selectable,
+ selectionColor,
+ suppressHighlighting,
+ style,
+ ...restProps
+}: {
+ ref?: React.RefSetter,
+ ...TextProps,
+}) => {
+ const _accessibilityLabel = ariaLabel ?? accessibilityLabel;
+ const _accessibilityControls = ariaControls ?? accessibilityControls; // Win32
+ const _accessibilityDescribedBy = ariaDescribedBy ?? accessibilityDescribedBy; // Win32
+ const _accessibilityDescription = ariaDescription ?? accessibilityDescription; // Win32
+ const _accessibilityLevel = ariaLevel ?? accessibilityLevel; // Win32
+ const _accessibilityPositionInSet =
+ ariaPosinset ?? accessibilityPositionInSet; // Win32
+ const _accessibilitySetSize = ariaSetsize ?? accessibilitySetSize; // Win32
+
+ let _accessibilityState: ?TextProps['accessibilityState'] =
+ accessibilityState;
+ if (
+ ariaBusy != null ||
+ ariaChecked != null ||
+ ariaDisabled != null ||
+ ariaExpanded != null ||
+ ariaSelected != null
+ ) {
+ if (_accessibilityState != null) {
+ _accessibilityState = {
+ busy: ariaBusy ?? _accessibilityState.busy,
+ checked: ariaChecked ?? _accessibilityState.checked,
+ disabled: ariaDisabled ?? _accessibilityState.disabled,
+ expanded: ariaExpanded ?? _accessibilityState.expanded,
+ multiselectable:
+ ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32
+ required: ariaRequired ?? accessibilityState?.required, // Win32
+ selected: ariaSelected ?? _accessibilityState.selected,
+ };
+ } else {
+ _accessibilityState = {
+ busy: ariaBusy,
+ checked: ariaChecked,
+ disabled: ariaDisabled,
+ expanded: ariaExpanded,
+ multiselectable: ariaMultiselectable, // Win32,
+ required: ariaRequired, // Win32
+ selected: ariaSelected,
+ };
}
+ }
- const _accessibilityStateDisabled = _accessibilityState?.disabled;
- const _disabled = disabled ?? _accessibilityStateDisabled;
+ const _accessibilityStateDisabled = _accessibilityState?.disabled;
+ const _disabled = disabled ?? _accessibilityStateDisabled;
- const isPressable =
- (onPress != null ||
- onLongPress != null ||
- onStartShouldSetResponder != null) &&
- _disabled !== true;
+ const isPressable =
+ (onPress != null ||
+ onLongPress != null ||
+ onStartShouldSetResponder != null) &&
+ _disabled !== true;
- // TODO: Move this processing to the view configuration.
- const _selectionColor =
- selectionColor != null ? processColor(selectionColor) : undefined;
+ // TODO: Move this processing to the view configuration.
+ const _selectionColor =
+ selectionColor != null ? processColor(selectionColor) : undefined;
- let _style = style;
- if (__DEV__) {
- if (PressabilityDebug.isEnabled() && onPress != null) {
- _style = [style, {color: 'magenta'}];
- }
+ let _style = style;
+ if (__DEV__) {
+ if (PressabilityDebug.isEnabled() && onPress != null) {
+ _style = [style, {color: 'magenta'}];
}
+ }
- let _numberOfLines = numberOfLines;
- if (_numberOfLines != null && !(_numberOfLines >= 0)) {
- if (__DEV__) {
- console.error(
- `'numberOfLines' in must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
- );
- }
- _numberOfLines = 0;
+ let _numberOfLines = numberOfLines;
+ if (_numberOfLines != null && !(_numberOfLines >= 0)) {
+ if (__DEV__) {
+ console.error(
+ `'numberOfLines' in must be a non-negative number, received: ${_numberOfLines}. The value will be set to 0.`,
+ );
}
-
- let _selectable = selectable;
-
- let processedStyle = flattenStyle(_style);
- if (processedStyle != null) {
- let overrides: ?{...TextStyleInternal} = null;
- if (typeof processedStyle.fontWeight === 'number') {
- overrides = overrides || ({}: {...TextStyleInternal});
- overrides.fontWeight =
- // $FlowFixMe[incompatible-cast]
- (processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
- }
-
- if (processedStyle.userSelect != null) {
- _selectable = userSelectToSelectableMap[processedStyle.userSelect];
- overrides = overrides || ({}: {...TextStyleInternal});
- overrides.userSelect = undefined;
- }
-
- if (processedStyle.verticalAlign != null) {
- overrides = overrides || ({}: {...TextStyleInternal});
- overrides.textAlignVertical =
- verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
- overrides.verticalAlign = undefined;
- }
-
- if (overrides != null) {
- // $FlowFixMe[incompatible-type]
- _style = [_style, overrides];
- }
+ _numberOfLines = 0;
+ }
+
+ let _selectable = selectable;
+
+ let processedStyle = flattenStyle(_style);
+ if (processedStyle != null) {
+ let overrides: ?{...TextStyleInternal} = null;
+ if (typeof processedStyle.fontWeight === 'number') {
+ overrides = overrides || ({}: {...TextStyleInternal});
+ overrides.fontWeight =
+ // $FlowFixMe[incompatible-cast]
+ (processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
}
- const _nativeID = id ?? nativeID;
-
- const hasTextAncestor = useContext(TextAncestor);
- if (hasTextAncestor) {
- if (isPressable) {
- return (
-
- );
- }
+ if (processedStyle.userSelect != null) {
+ _selectable = userSelectToSelectableMap[processedStyle.userSelect];
+ overrides = overrides || ({}: {...TextStyleInternal});
+ overrides.userSelect = undefined;
+ }
- return (
-
- {children}
-
- );
+ if (processedStyle.verticalAlign != null) {
+ overrides = overrides || ({}: {...TextStyleInternal});
+ overrides.textAlignVertical =
+ verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
+ overrides.verticalAlign = undefined;
}
- // If the disabled prop and accessibilityState.disabled are out of sync but not both in
- // falsy states we need to update the accessibilityState object to use the disabled prop.
- if (
- _disabled !== _accessibilityStateDisabled &&
- ((_disabled != null && _disabled !== false) ||
- (_accessibilityStateDisabled != null &&
- _accessibilityStateDisabled !== false))
- ) {
- _accessibilityState = {..._accessibilityState, disabled: _disabled};
+ if (overrides != null) {
+ // $FlowFixMe[incompatible-type]
+ _style = [_style, overrides];
}
+ }
- const _accessible = Platform.select({
- ios: accessible !== false,
- android:
- accessible == null
- ? onPress != null || onLongPress != null
- : accessible,
- default: accessible !== false, // [Windows #13996 - default value is accessible !== false]
- });
+ const _nativeID = id ?? nativeID;
- let nativeText = null;
+ const hasTextAncestor = useContext(TextAncestor);
+ if (hasTextAncestor) {
if (isPressable) {
- nativeText = (
-
);
- } else {
- nativeText = (
-
- {children}
-
- );
}
- if (children == null) {
- return nativeText;
- }
-
- // If the children do not contain a JSX element it would not be possible to have a
- // nested `Text` component so we can skip adding the `TextAncestor` context wrapper
- // which has a performance overhead. Since we do this for performance reasons we need
- // to keep the check simple to avoid regressing overall perf. For this reason the
- // `children.length` constant is set to `3`, this should be a reasonable tradeoff
- // to capture the majority of `Text` uses but also not make this check too expensive.
- if (Array.isArray(children) && children.length <= 3) {
- let hasNonTextChild = false;
- for (let child of children) {
- if (child != null && typeof child === 'object') {
- hasNonTextChild = true;
- break;
- }
- }
- if (!hasNonTextChild) {
- return nativeText;
+ return (
+
+ {children}
+
+ );
+ }
+
+ // If the disabled prop and accessibilityState.disabled are out of sync but not both in
+ // falsy states we need to update the accessibilityState object to use the disabled prop.
+ if (
+ _disabled !== _accessibilityStateDisabled &&
+ ((_disabled != null && _disabled !== false) ||
+ (_accessibilityStateDisabled != null &&
+ _accessibilityStateDisabled !== false))
+ ) {
+ _accessibilityState = {..._accessibilityState, disabled: _disabled};
+ }
+
+ const _accessible = Platform.select({
+ ios: accessible !== false,
+ android:
+ accessible == null ? onPress != null || onLongPress != null : accessible,
+ default: accessible !== false, // [Windows #13996 - default value is accessible !== false]
+ });
+
+ let nativeText = null;
+ if (isPressable) {
+ nativeText = (
+
+ );
+ } else {
+ nativeText = (
+
+ {children}
+
+ );
+ }
+
+ if (children == null) {
+ return nativeText;
+ }
+
+ // If the children do not contain a JSX element it would not be possible to have a
+ // nested `Text` component so we can skip adding the `TextAncestor` context wrapper
+ // which has a performance overhead. Since we do this for performance reasons we need
+ // to keep the check simple to avoid regressing overall perf. For this reason the
+ // `children.length` constant is set to `3`, this should be a reasonable tradeoff
+ // to capture the majority of `Text` uses but also not make this check too expensive.
+ if (Array.isArray(children) && children.length <= 3) {
+ let hasNonTextChild = false;
+ for (let child of children) {
+ if (child != null && typeof child === 'object') {
+ hasNonTextChild = true;
+ break;
}
- } else if (typeof children !== 'object') {
+ }
+ if (!hasNonTextChild) {
return nativeText;
}
+ } else if (typeof children !== 'object') {
+ return nativeText;
+ }
- return (
- {nativeText}
- );
- },
-);
+ return (
+ {nativeText}
+ );
+};
TextImpl.displayName = 'Text';
@@ -520,7 +515,14 @@ type NativePressableTextProps = $ReadOnly<{
const NativePressableVirtualText: component(
ref: React.RefSetter,
...props: NativePressableTextProps
-) = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+) = ({
+ ref: forwardedRef,
+ textProps,
+ textPressabilityProps,
+}: {
+ ref?: React.RefSetter,
+ ...NativePressableTextProps,
+}) => {
const [isHighlighted, eventHandlersForText] = useTextPressability(
textPressabilityProps,
);
@@ -534,7 +536,7 @@ const NativePressableVirtualText: component(
ref={forwardedRef}
/>
);
-});
+};
/**
* Wrap the NativeText component and initialize pressability.
@@ -545,7 +547,14 @@ const NativePressableVirtualText: component(
const NativePressableText: component(
ref: React.RefSetter,
...props: NativePressableTextProps
-) = React.forwardRef(({textProps, textPressabilityProps}, forwardedRef) => {
+) = ({
+ ref: forwardedRef,
+ textProps,
+ textPressabilityProps,
+}: {
+ ref?: React.RefSetter,
+ ...NativePressableTextProps,
+}) => {
const [isHighlighted, eventHandlersForText] = useTextPressability(
textPressabilityProps,
);
@@ -559,7 +568,7 @@ const NativePressableText: component(
ref={forwardedRef}
/>
);
-});
+};
const userSelectToSelectableMap = {
auto: true,
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Text/TextProps.win32.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Text/TextProps.win32.js
index cbdb789cf9a..7f4c1aead1d 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Text/TextProps.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Text/TextProps.win32.js
@@ -12,9 +12,7 @@
import type {
AccessibilityActionEvent,
- AccessibilityActionInfo,
- AccessibilityRole,
- AccessibilityState,
+ AccessibilityProps,
Role,
} from '../Components/View/ViewAccessibility';
import type {ColorValue, TextStyleProp} from '../StyleSheet/StyleSheet';
@@ -124,27 +122,13 @@ export type TextPropsAndroid = {
};
type TextBaseProps = $ReadOnly<{
- /**
- * Indicates whether the view is an accessibility element.
- *
- * See https://reactnative.dev/docs/text#accessible
- */
- accessible?: ?boolean,
- accessibilityActions?: ?$ReadOnlyArray,
onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed,
- accessibilityHint?: ?Stringish,
- accessibilityLanguage?: ?Stringish,
- accessibilityLabel?: ?Stringish,
- accessibilityRole?: ?AccessibilityRole,
- accessibilityState?: ?AccessibilityState,
- 'aria-label'?: ?string,
accessibilityControls?: ?Stringish, // Win32
accessibilityDescribedBy?: ?Stringish, // Win32
accessibilityDescription?: ?Stringish, // Win32
accessibilityLevel?: ?number, // Win32
accessibilityPositionInSet?: ?number, // Win32
accessibilitySetSize?: ?number, // Win32
-
/**
* Whether fonts should scale to respect Text Size accessibility settings.
* The default is `true`.
@@ -158,17 +142,6 @@ type TextBaseProps = $ReadOnly<{
*
*/
android_hyphenationFrequency?: ?('normal' | 'none' | 'full'),
-
- /**
- * alias for accessibilityState
- *
- * see https://reactnative.dev/docs/accessibility#accessibilitystate
- */
- 'aria-busy'?: ?boolean,
- 'aria-checked'?: ?boolean | 'mixed',
- 'aria-disabled'?: ?boolean,
- 'aria-expanded'?: ?boolean,
- 'aria-selected'?: ?boolean,
'aria-multiselectable'?: ?boolean, // Win32
'aria-required'?: ?boolean, // Win32
'aria-controls'?: ?Stringish, // Win32
@@ -177,11 +150,6 @@ type TextBaseProps = $ReadOnly<{
'aria-level'?: ?number, // Win32
'aria-posinset'?: ?number, // Win32
'aria-setsize'?: ?number, // Win32
- /**
- * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
- * This prop is listed for cross-platform reasons and has no real effect on Android or iOS.
- */
- 'aria-labelledby'?: ?string,
children?: ?React.Node,
@@ -319,4 +287,5 @@ export type TextProps = $ReadOnly<{
...TextPropsIOS,
...TextPropsAndroid,
...TextBaseProps,
+ ...AccessibilityProps,
}>;
diff --git a/packages/@office-iss/react-native-win32/src-win/Libraries/Utilities/PlatformTypes.js b/packages/@office-iss/react-native-win32/src-win/Libraries/Utilities/PlatformTypes.js
index ebe2c4a623a..5c06cec88cb 100644
--- a/packages/@office-iss/react-native-win32/src-win/Libraries/Utilities/PlatformTypes.js
+++ b/packages/@office-iss/react-native-win32/src-win/Libraries/Utilities/PlatformTypes.js
@@ -18,7 +18,7 @@ export type PlatformOSType =
| 'native';
type OptionalPlatformSelectSpec = {
- [_key in PlatformOSType]?: T,
+ [key in PlatformOSType]?: T, // eslint-disable-line no-unused-vars
};
export type PlatformSelectSpec =
diff --git a/packages/@office-iss/react-native-win32/src-win/src/private/animated/NativeAnimatedHelper.win32.js b/packages/@office-iss/react-native-win32/src-win/src/private/animated/NativeAnimatedHelper.win32.js
index 1ec85f7916e..7b06ecdee2a 100644
--- a/packages/@office-iss/react-native-win32/src-win/src/private/animated/NativeAnimatedHelper.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/src/private/animated/NativeAnimatedHelper.win32.js
@@ -57,7 +57,7 @@ const eventListenerAnimationFinishedCallbacks: {
let globalEventEmitterGetValueListener: ?EventSubscription = null;
let globalEventEmitterAnimationFinishedListener: ?EventSubscription = null;
-const shouldSignalBatch =
+const shouldSignalBatch: boolean =
ReactNativeFeatureFlags.animatedShouldSignalBatch() ||
ReactNativeFeatureFlags.cxxNativeAnimatedEnabled();
@@ -97,6 +97,10 @@ function createNativeOperations(): $NonMaybeType {
// is possible because # arguments is fixed for each operation. For more
// details, see `NativeAnimatedModule.queueAndExecuteBatchedOperations`.
singleOpQueue.push(operationID, ...args);
+ if (shouldSignalBatch) {
+ clearImmediate(flushQueueImmediate);
+ flushQueueImmediate = setImmediate(API.flushQueue);
+ }
};
}
} else {
@@ -439,6 +443,7 @@ export default {
generateNewAnimationId,
assertNativeAnimatedModule,
shouldUseNativeDriver,
+ shouldSignalBatch,
transformDataType,
// $FlowExpectedError[unsafe-getters-setters] - unsafe getter lint suppression
// $FlowExpectedError[missing-type-arg] - unsafe getter lint suppression
diff --git a/packages/@office-iss/react-native-win32/src-win/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js b/packages/@office-iss/react-native-win32/src-win/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js
index 96d6f94b6af..bc95304aa0e 100644
--- a/packages/@office-iss/react-native-win32/src-win/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js
+++ b/packages/@office-iss/react-native-win32/src-win/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js
@@ -4,17 +4,16 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
- * @flow strict-local
+ * @flow strict
* @format
*/
import NativeReactDevToolsSettingsManager from './specs/NativeReactDevToolsSettingsManager';
-module.exports = {
- setGlobalHookSettings(settings: string) {
- NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
- },
- getGlobalHookSettings(): ?string {
- return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
- },
-};
+export function setGlobalHookSettings(settings: string) {
+ NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
+}
+
+export function getGlobalHookSettings(): ?string {
+ return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
+}
diff --git a/packages/@react-native-windows/automation-channel/package.json b/packages/@react-native-windows/automation-channel/package.json
index 1932d807f2f..869ebd550b8 100644
--- a/packages/@react-native-windows/automation-channel/package.json
+++ b/packages/@react-native-windows/automation-channel/package.json
@@ -32,7 +32,7 @@
"just-scripts": "^1.3.2",
"prettier": "2.8.8",
"react": "19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984",
"typescript": "5.0.4"
},
diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json
index a7ccc92ac6d..574eba35ca0 100644
--- a/packages/@react-native-windows/tester/overrides.json
+++ b/packages/@react-native-windows/tester/overrides.json
@@ -5,13 +5,13 @@
"excludePatterns": [
"src/js/examples-win/**"
],
- "baseVersion": "0.80.0-nightly-20250506-3ac16dd6a",
+ "baseVersion": "0.81.0-nightly-20250521-3cb70bb6a",
"overrides": [
{
"type": "copy",
"file": "js/examples/ContentURLAndroid/ContentURLAndroid.js",
"baseFile": "packages/rn-tester/js/examples/ContentURLAndroid/ContentURLAndroid.js",
- "baseHash": "f54f9e74fbe883c58a5ea6a6425b5ad548134940",
+ "baseHash": "8c8ae861aa6984218efc0f127bf6aba4b7960040",
"issue": 14844
},
{
@@ -43,7 +43,7 @@
"type": "patch",
"file": "src/js/examples/FlatList/BaseFlatListExample.windows.js",
"baseFile": "packages/rn-tester/js/examples/FlatList/BaseFlatListExample.js",
- "baseHash": "44b784dbde64d0ca1616f0e31a07f232939d8dd7",
+ "baseHash": "533b9b1c2889c22af9ba923e17a8951ffbbfe3d7",
"issue": 12869
},
{
@@ -57,7 +57,7 @@
"type": "copy",
"file": "src/js/examples/FlatList/FlatList-multiColumn.windows.js",
"baseFile": "packages/rn-tester/js/examples/FlatList/FlatList-multiColumn.js",
- "baseHash": "51da04f9ee49f1a5fd857db17361443636d73bca",
+ "baseHash": "5b2487a526ee0e4dd0e01f87f334fef99822d682",
"issue": 12869
},
{
@@ -85,7 +85,7 @@
"type": "patch",
"file": "src/js/examples/Image/ImageExample.windows.js",
"baseFile": "packages/rn-tester/js/examples/Image/ImageExample.js",
- "baseHash": "20dec87a4f2c4c098adf9e3becc0969fb2b3036c",
+ "baseHash": "a3931ef84647705af55804b29eadb845d5185e87",
"issue": 12869
},
{
@@ -111,19 +111,13 @@
"type": "derived",
"file": "src/js/examples/Text/TextExample.windows.js",
"baseFile": "packages/rn-tester/js/examples/Text/TextExample.android.js",
- "baseHash": "b40001649bf2c261009213ba56c7bc0bf2998419"
- },
- {
- "type": "derived",
- "file": "src/js/examples/Text/TextInlineViewsExample.windows.js",
- "baseFile": "packages/rn-tester/js/examples/Text/TextInlineViewsExample.js",
- "baseHash": "63088038921558214c480b323dd2099698911f3f"
+ "baseHash": "b821fd7ae82ed4470ea3f06baafb87ac99c953f1"
},
{
"type": "patch",
"file": "src/js/examples/TextInput/TextInputExample.windows.js",
"baseFile": "packages/rn-tester/js/examples/TextInput/TextInputExample.android.js",
- "baseHash": "8cc115a30795ee2fcf174e91f9cdbf56f4513a93",
+ "baseHash": "ed91ff793aa3c1305d75f795be74adcffe540edb",
"issue": 5688
},
{
diff --git a/packages/@react-native-windows/tester/package.json b/packages/@react-native-windows/tester/package.json
index f1e2249c2c4..6d82d71d46d 100644
--- a/packages/@react-native-windows/tester/package.json
+++ b/packages/@react-native-windows/tester/package.json
@@ -33,7 +33,7 @@
"@types/node": "^18.0.0",
"eslint": "^8.19.0",
"just-scripts": "^1.3.3",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-platform-override": "^1.9.56",
"react-native-windows": "^0.0.0-canary.984",
"typescript": "5.0.4"
diff --git a/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js
index d5548c7e503..7f202bdd541 100644
--- a/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js
+++ b/packages/@react-native-windows/tester/src/js/examples/FlatList/BaseFlatListExample.windows.js
@@ -67,48 +67,42 @@ type Props = {
children?: ?React.Node,
};
-const BaseFlatListExample = React.forwardRef(
- // $FlowFixMe[incompatible-call]
- (
- props: Props,
- ref:
- | ((null | FlatList) => mixed)
- | {current: null | FlatList, ...},
- ) => {
- return (
-
- {props.testOutput != null ? (
-
-
- {props.testOutput}
-
- {props.onTest != null ? (
-
- ) : null}
-
- ) : null}
- {props.children}
- item + index}
- style={styles.list}
- // $FlowFixMe[incompatible-type-arg]
- renderItem={Item}
- accessible
- />
-
- );
- },
-);
+const BaseFlatListExample: component(
+ ref: React.RefSetter>,
+ ...props: Props
+) = ({ref, ...props}: {ref: React.RefSetter>, ...Props}) => {
+ return (
+
+ {props.testOutput != null ? (
+
+
+ {props.testOutput}
+
+ {props.onTest != null ? (
+
+ ) : null}
+
+ ) : null}
+ {props.children}
+ item + index}
+ style={styles.list}
+ // $FlowFixMe[incompatible-type-arg]
+ renderItem={Item}
+ />
+
+ );
+};
export default (BaseFlatListExample: React.AbstractComponent<
Props,
diff --git a/packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-multiColumn.windows.js b/packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-multiColumn.windows.js
index 45cdacbb035..92079c3a00d 100644
--- a/packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-multiColumn.windows.js
+++ b/packages/@react-native-windows/tester/src/js/examples/FlatList/FlatList-multiColumn.windows.js
@@ -27,17 +27,18 @@ import {
} from '../../components/ListExampleShared';
import RNTesterPage from '../../components/RNTesterPage';
import RNTesterText from '../../components/RNTesterText';
-import React from 'react';
+import * as React from 'react';
+import {useState} from 'react';
import {Alert, FlatList, StyleSheet, View} from 'react-native';
import infoLog from 'react-native/Libraries/Utilities/infoLog';
function MultiColumnExample(): React.Node {
- const [data, setData] = React.useState(genNewerItems(1000));
- const [filterText, setFilterText] = React.useState('');
- const [fixedHeight, setFixedHeight] = React.useState(true);
- const [logViewable, setLogViewable] = React.useState(false);
- const [numColumns, setNumColumns] = React.useState(2);
- const [virtualized, setVirtualized] = React.useState(true);
+ const [data, setData] = useState(genNewerItems(1000));
+ const [filterText, setFilterText] = useState('');
+ const [fixedHeight, setFixedHeight] = useState(true);
+ const [logViewable, setLogViewable] = useState(false);
+ const [numColumns, setNumColumns] = useState(2);
+ const [virtualized, setVirtualized] = useState(true);
const _onChangeFilterText = (_filterText: string) => {
setFilterText(_filterText);
@@ -66,6 +67,7 @@ function MultiColumnExample(): React.Node {
return {length, offset: length * index, index};
};
+ // eslint-disable-next-line react/no-unstable-nested-components
const _renderItemComponent = ({
item,
}: ListRenderItemInfo): $FlowFixMe => {
diff --git a/packages/@react-native-windows/tester/src/js/examples/Image/ImageExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Image/ImageExample.windows.js
index d282ae8b94c..d151b043d0c 100644
--- a/packages/@react-native-windows/tester/src/js/examples/Image/ImageExample.windows.js
+++ b/packages/@react-native-windows/tester/src/js/examples/Image/ImageExample.windows.js
@@ -17,6 +17,7 @@ import RNTesterButton from '../../components/RNTesterButton';
import RNTesterText from '../../components/RNTesterText';
import ImageCapInsetsExample from './ImageCapInsetsExample';
import React from 'react';
+import {useEffect, useState} from 'react';
import {Image, ImageBackground, StyleSheet, Text, View} from 'react-native';
const IMAGE1 =
@@ -41,9 +42,9 @@ type BlobImageProps = $ReadOnly<{
}>;
const BlobImage = ({url}: BlobImageProps): React.Node => {
- const [objectURL, setObjectURL] = React.useState(null);
+ const [objectURL, setObjectURL] = useState(null);
- React.useEffect(() => {
+ useEffect(() => {
// $FlowFixMe[unused-promise]
(async () => {
const result = await fetch(url);
@@ -94,11 +95,11 @@ const NetworkImageCallbackExample = ({
source,
prefetchedSource,
}: NetworkImageCallbackExampleProps): React.Node => {
- const [events, setEvents] = React.useState<$ReadOnlyArray>([]);
- const [startLoadPrefetched, setStartLoadPrefetched] = React.useState(false);
- const [mountTime, setMountTime] = React.useState(Date.now());
+ const [events, setEvents] = useState<$ReadOnlyArray>([]);
+ const [startLoadPrefetched, setStartLoadPrefetched] = useState(false);
+ const [mountTime, setMountTime] = useState(Date.now());
- React.useEffect(() => {
+ useEffect(() => {
setMountTime(Date.now());
}, []);
@@ -732,7 +733,7 @@ const ImageFunctionsExample = () => {
};
function CacheControlAndroidExample(): React.Node {
- const [reload, setReload] = React.useState(0);
+ const [reload, setReload] = useState(0);
const onReload = () => {
setReload(prevReload => prevReload + 1);
diff --git a/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js
index cfe99739eb6..da179757d02 100644
--- a/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js
+++ b/packages/@react-native-windows/tester/src/js/examples/Text/TextExample.windows.js
@@ -18,7 +18,8 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
import RNTesterText from '../../components/RNTesterText';
import TextLegend from '../../components/TextLegend';
import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
-import TextInlineViewsExample from './TextInlineViewsExample';
+import TextSharedExamples from './TextSharedExamples';
+
const TextInlineView = require('../../components/TextInlineView');
const React = require('react');
const {
@@ -1653,13 +1654,6 @@ const examples = [
return ;
},
},
- {
- title: 'Empty Text',
- name: 'emptyText',
- render(): React.Node {
- return ;
- },
- },
{
title: 'Toggling Attributes',
name: 'togglingAttributes',
@@ -1918,6 +1912,7 @@ const examples = [
);
},
},
+ ...TextSharedExamples,
{
title: 'Customized Accessibility',
name: 'textAccessibility',
diff --git a/packages/@react-native-windows/tester/src/js/examples/Text/TextInlineViewsExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Text/TextInlineViewsExample.windows.js
deleted file mode 100644
index a60cf411f31..00000000000
--- a/packages/@react-native-windows/tester/src/js/examples/Text/TextInlineViewsExample.windows.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-
-import * as React from 'react';
-import {Text, View} from 'react-native';
-
-function InlineView(props: {
- textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify',
- long?: boolean,
-}): React.Node {
- return (
-
-
- Parent
- Child
-
- Child
- {props !== null && props.long === true && (
-
- aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas
-
- )}
-
-
- );
-}
-
-export function TextInlineViewsExample(props: {}): React.Node {
- return (
- <>
-
- BoringLayout
-
-
-
-
-
- StaticLayout
-
-
-
-
-
- >
- );
-}
-
-export default ({
- title: 'TextInlineViewsExample',
- name: 'inlineViews',
- description:
- ('Shows how inline views are rendered when text is subject to alignment.': string),
- expect: 'The red box should align correctly with the rest of the text.',
- render: (): React.Node => ,
-}: RNTesterModuleExample);
diff --git a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
index 5825a357099..9d80e0e8380 100644
--- a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
+++ b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
@@ -17,11 +17,12 @@ import type {
import ExampleTextInput from './ExampleTextInput';
import TextInputSharedExamples from './TextInputSharedExamples';
-import React, {useState} from 'react';
+import React from 'react';
+import {useState} from 'react';
import {StyleSheet, Switch, Text, View} from 'react-native';
const ToggleDefaultPaddingExample = (): React.Node => {
- const [hasPadding, setHasPadding] = React.useState(false);
+ const [hasPadding, setHasPadding] = useState(false);
return (
diff --git a/packages/@react-native/monorepo/overrides.json b/packages/@react-native/monorepo/overrides.json
index 2663e907053..fa62e24df55 100644
--- a/packages/@react-native/monorepo/overrides.json
+++ b/packages/@react-native/monorepo/overrides.json
@@ -1,11 +1,11 @@
{
- "baseVersion": "0.80.0-nightly-20250506-3ac16dd6a",
+ "baseVersion": "0.81.0-nightly-20250521-3cb70bb6a",
"overrides": [
{
"type": "patch",
"file": "package.json",
"baseFile": "package.json",
- "baseHash": "4fad7b8d451333c0ccee6561c12a320d0556810f"
+ "baseHash": "709467c84f3132be8a835d22cb8586194cd1e333"
}
]
}
\ No newline at end of file
diff --git a/packages/@react-native/monorepo/package.json b/packages/@react-native/monorepo/package.json
index e7dbdae196b..331119d514c 100644
--- a/packages/@react-native/monorepo/package.json
+++ b/packages/@react-native/monorepo/package.json
@@ -26,8 +26,7 @@
"test-e2e-local-clean": "node ./scripts/release-testing/test-e2e-local-clean.js",
"test-e2e-local": "node ./scripts/release-testing/test-e2e-local.js",
"test-ios": "./scripts/objc-test.sh test",
- "test-typescript-offline": "dtslint --localTs node_modules/typescript/lib packages/react-native/types",
- "test-typescript": "dtslint packages/react-native/types",
+ "test-typescript": "tsc -p packages/react-native/types/tsconfig.test.json",
"test": "jest",
"fantom": "JS_DIR='..' yarn jest --config packages/react-native-fantom/config/jest.config.js",
"trigger-react-native-release": "node ./scripts/releases-local/trigger-react-native-release.js",
@@ -46,7 +45,6 @@
"@babel/plugin-transform-regenerator": "^7.24.7",
"@babel/preset-env": "^7.25.3",
"@babel/preset-flow": "^7.24.7",
- "@definitelytyped/dtslint": "^0.0.127",
"@jest/create-cache-key-function": "^29.7.0",
"@react-native/metro-babel-transformer": "0.80.0-nightly-20250506-3ac16dd6a",
"@react-native/metro-config": "0.80.0-nightly-20250506-3ac16dd6a",
@@ -77,7 +75,7 @@
"eslint-plugin-redundant-undefined": "^0.4.0",
"eslint-plugin-relay": "^1.8.3",
"flow-api-translator": "0.28.1",
- "flow-bin": "^0.269.1",
+ "flow-bin": "^0.271.0",
"glob": "^7.1.1",
"hermes-eslint": "0.28.1",
"hermes-transform": "0.28.1",
@@ -87,9 +85,11 @@
"jest-diff": "^29.7.0",
"jest-junit": "^10.0.0",
"jest-snapshot": "^29.7.0",
- "metro-babel-register": "^0.82.0",
- "metro-memory-fs": "^0.82.0",
- "metro-transform-plugins": "^0.82.0",
+ "markdownlint-cli2": "^0.17.2",
+ "markdownlint-rule-relative-links": "^3.0.0",
+ "metro-babel-register": "^0.82.3",
+ "metro-memory-fs": "^0.82.3",
+ "metro-transform-plugins": "^0.82.3",
"micromatch": "^4.0.4",
"node-fetch": "^2.2.0",
"nullthrows": "^1.1.1",
@@ -108,4 +108,4 @@
"resolutions": {
"react-is": "19.1.0"
}
-}
\ No newline at end of file
+}
diff --git a/packages/@react-native/tester/js/RNTesterAppShared.js b/packages/@react-native/tester/js/RNTesterAppShared.js
index 8cdd4207e38..b0a268ba9d9 100644
--- a/packages/@react-native/tester/js/RNTesterAppShared.js
+++ b/packages/@react-native/tester/js/RNTesterAppShared.js
@@ -28,6 +28,7 @@ import {
initialNavigationState,
} from './utils/testerStateUtils';
import * as React from 'react';
+import {useCallback, useEffect, useMemo, useReducer} from 'react';
import {
BackHandler,
Button,
@@ -64,7 +65,7 @@ const RNTesterApp = ({
},
customBackButton?: BackButton,
}): React.Node => {
- const [state, dispatch] = React.useReducer(
+ const [state, dispatch] = useReducer(
RNTesterNavigationReducer,
initialNavigationState,
);
@@ -81,19 +82,19 @@ const RNTesterApp = ({
const isScreenTiny = useWindowDimensions().height < 600;
- const examplesList = React.useMemo(
+ const examplesList = useMemo(
() => getExamplesListWithRecentlyUsed({recentlyUsed, testList}),
[recentlyUsed, testList],
);
- const handleBackPress = React.useCallback(() => {
+ const handleBackPress = useCallback(() => {
if (activeModuleKey != null) {
dispatch({type: RNTesterNavigationActionsType.BACK_BUTTON_PRESS});
}
}, [dispatch, activeModuleKey]);
// Setup hardware back button press listener
- React.useEffect(() => {
+ useEffect(() => {
const handleHardwareBackPress = () => {
if (activeModuleKey) {
handleBackPress();
@@ -109,7 +110,7 @@ const RNTesterApp = ({
return () => subscription.remove();
}, [activeModuleKey, handleBackPress]);
- const handleModuleCardPress = React.useCallback(
+ const handleModuleCardPress = useCallback(
({exampleType, key, title}: any) => {
dispatch({
type: RNTesterNavigationActionsType.MODULE_CARD_PRESS,
@@ -119,7 +120,7 @@ const RNTesterApp = ({
[dispatch],
);
- const handleModuleExampleCardPress = React.useCallback(
+ const handleModuleExampleCardPress = useCallback(
(exampleName: string) => {
dispatch({
type: RNTesterNavigationActionsType.EXAMPLE_CARD_PRESS,
@@ -129,7 +130,7 @@ const RNTesterApp = ({
[dispatch],
);
- const handleNavBarPress = React.useCallback(
+ const handleNavBarPress = useCallback(
(args: {screen: ScreenTypes}) => {
if (args.screen === 'playgrounds') {
dispatch({
@@ -151,7 +152,7 @@ const RNTesterApp = ({
);
// Setup Linking event subscription
- const handleOpenUrlRequest = React.useCallback(
+ const handleOpenUrlRequest = useCallback(
({url}: {url: string, ...}) => {
// Supported URL pattern(s):
// * rntester://example/
@@ -229,7 +230,7 @@ const RNTesterApp = ({
},
[dispatch],
);
- React.useEffect(() => {
+ useEffect(() => {
// Initial deeplink
Linking.getInitialURL()
.then(url => url != null && handleOpenUrlRequest({url: url}))
diff --git a/packages/@react-native/tester/js/components/ListExampleShared.js b/packages/@react-native/tester/js/components/ListExampleShared.js
index 11a927447b8..22051f0b983 100644
--- a/packages/@react-native/tester/js/components/ListExampleShared.js
+++ b/packages/@react-native/tester/js/components/ListExampleShared.js
@@ -12,6 +12,7 @@
import RNTesterText from './RNTesterText';
import React from 'react';
+import {memo} from 'react';
import {
ActivityIndicator,
Animated,
@@ -162,7 +163,7 @@ class SeparatorComponent extends React.PureComponent<{...}> {
}
}
-const LoadingComponent: React.ComponentType<{}> = React.memo(() => (
+const LoadingComponent: React.ComponentType<{}> = memo(() => (
diff --git a/packages/@react-native/tester/js/components/RNTConfigurationBlock.js b/packages/@react-native/tester/js/components/RNTConfigurationBlock.js
index a0fddb9a300..e1a9c165690 100644
--- a/packages/@react-native/tester/js/components/RNTConfigurationBlock.js
+++ b/packages/@react-native/tester/js/components/RNTConfigurationBlock.js
@@ -12,6 +12,7 @@
import {RNTesterThemeContext} from './RNTesterTheme';
import * as React from 'react';
+import {useContext} from 'react';
import {StyleSheet, View} from 'react-native';
type Props = $ReadOnly<{
@@ -23,7 +24,7 @@ type Props = $ReadOnly<{
* Container view for a block of configuration options for an example.
*/
export default function RNTConfigurationBlock(props: Props): React.Node {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
['style'];
@@ -35,7 +36,7 @@ export default function RNTPressableRow({
style,
accessibilityLabel,
}: Props): React.Node {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
const label = accessibilityLabel ?? `${title} ${description ?? ''}`;
return (
;
const RNTesterBlock = ({description, title, children}: Props): React.Node => {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
{
// Filter platform-specific es
const {title, description, platform, render: ExampleComponent} = e;
diff --git a/packages/@react-native/tester/js/components/RNTesterModuleList.js b/packages/@react-native/tester/js/components/RNTesterModuleList.js
index 0af3c21d7c6..7d93feb24ec 100644
--- a/packages/@react-native/tester/js/components/RNTesterModuleList.js
+++ b/packages/@react-native/tester/js/components/RNTesterModuleList.js
@@ -10,6 +10,7 @@
import {RNTesterThemeContext} from './RNTesterTheme';
import RNTPressableRow from './RNTPressableRow';
+import {memo} from 'react';
const RNTesterExampleFilter = require('./RNTesterExampleFilter');
const React = require('react');
@@ -61,7 +62,7 @@ const renderSectionHeader = ({section}: {section: any, ...}) => (
);
-const RNTesterModuleList: React.ComponentType = React.memo(
+const RNTesterModuleList: React.ComponentType = memo(
({sections, handleModuleCardPress}: any) => {
const filter = ({example, filterRegex, category}: any) =>
filterRegex.test(example.module.title) &&
diff --git a/packages/@react-native/tester/js/components/RNTesterNavbar.js b/packages/@react-native/tester/js/components/RNTesterNavbar.js
index 8faadf3775a..84f5eaa3b74 100644
--- a/packages/@react-native/tester/js/components/RNTesterNavbar.js
+++ b/packages/@react-native/tester/js/components/RNTesterNavbar.js
@@ -13,6 +13,7 @@ import type {RNTesterTheme} from './RNTesterTheme';
import {RNTesterThemeContext} from './RNTesterTheme';
import * as React from 'react';
+import {useContext} from 'react';
import {Image, Pressable, StyleSheet, Text, View} from 'react-native';
type NavBarOnPressHandler = ({screen: ScreenTypes}) => void;
@@ -126,7 +127,7 @@ const RNTesterNavbar = ({
screen,
isExamplePageOpen,
}: Props): React.Node => {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
const isAPIActive = screen === 'apis' && !isExamplePageOpen;
const isComponentActive = screen === 'components' && !isExamplePageOpen;
diff --git a/packages/@react-native/tester/js/components/RNTesterTheme.js b/packages/@react-native/tester/js/components/RNTesterTheme.js
index 8cc4cf6f0a7..ed43d9d138c 100644
--- a/packages/@react-native/tester/js/components/RNTesterTheme.js
+++ b/packages/@react-native/tester/js/components/RNTesterTheme.js
@@ -11,6 +11,8 @@
import type {ColorValue, ImageSource} from 'react-native';
import * as React from 'react';
+import {createContext} from 'react';
+import {use} from 'react';
import {Appearance} from 'react-native';
export type RNTesterTheme = {
@@ -137,7 +139,9 @@ export const RNTesterDarkTheme = {
};
export const themes = {light: RNTesterLightTheme, dark: RNTesterDarkTheme};
-export const RNTesterThemeContext: React.Context =
- React.createContext(
- Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light,
- );
+export const RNTesterThemeContext: React.Context = createContext(
+ Appearance.getColorScheme() === 'dark' ? themes.dark : themes.light,
+);
+export function useTheme(): RNTesterTheme {
+ return use(RNTesterThemeContext);
+}
diff --git a/packages/@react-native/tester/js/components/TextLegend.js b/packages/@react-native/tester/js/components/TextLegend.js
index da8c4521ada..3a5c62dc9b4 100644
--- a/packages/@react-native/tester/js/components/TextLegend.js
+++ b/packages/@react-native/tester/js/components/TextLegend.js
@@ -11,6 +11,7 @@
import RNTesterText from '../components/RNTesterText';
import RNTOption from './RNTOption';
import * as React from 'react';
+import {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const PANGRAMS = {
@@ -39,11 +40,11 @@ const PANGRAMS = {
};
export default function TextLegend(): React.Node {
- const [language, setLanguage] = React.useState('english');
- const [alignment, setAlignment] = React.useState('left');
+ const [language, setLanguage] = useState('english');
+ const [alignment, setAlignment] = useState('left');
// $FlowFixMe[missing-empty-array-annot]
- const [textMetrics, setTextMetrics] = React.useState([]);
- const [fontSize, setFontSize] = React.useState(50);
+ const [textMetrics, setTextMetrics] = useState([]);
+ const [fontSize, setFontSize] = useState(50);
return (
setFontSize(fontSize + 3)}>
diff --git a/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js b/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
index d7c4b9e89de..351abea1e13 100644
--- a/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
+++ b/packages/@react-native/tester/js/examples/Accessibility/AccessibilityExample.js
@@ -17,7 +17,7 @@ import RNTesterText from '../../components/RNTesterText';
import checkImageSource from './check.png';
import mixedCheckboxImageSource from './mixed.png';
import uncheckImageSource from './uncheck.png';
-import React, {createRef} from 'react';
+import React, {createRef, useEffect, useRef, useState} from 'react';
import {
AccessibilityInfo,
Alert,
@@ -1314,7 +1314,7 @@ class AnnounceForAccessibility extends React.Component<{}> {
}
function SetAccessibilityFocusExample(props: {}): React.Node {
- const myRef = React.useRef>(null);
+ const myRef = useRef>(null);
const onPress = () => {
if (myRef && myRef.current) {
@@ -1561,8 +1561,8 @@ function DisplayOptionStatusExample({
optionChecker: () => Promise,
optionName: string,
}) {
- const [statusEnabled, setStatusEnabled] = React.useState(false);
- React.useEffect(() => {
+ const [statusEnabled, setStatusEnabled] = useState(false);
+ useEffect(() => {
const listener = AccessibilityInfo.addEventListener(
// $FlowFixMe[prop-missing]
// $FlowFixMe[invalid-computed-prop]
@@ -1589,7 +1589,7 @@ function DisplayOptionStatusExample({
}
function AccessibilityExpandedExample(): React.Node {
- const [expand, setExpanded] = React.useState(false);
+ const [expand, setExpanded] = useState(false);
const expandAction = {name: 'expand'};
const collapseAction = {name: 'collapse'};
return (
diff --git a/packages/@react-native/tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js b/packages/@react-native/tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
index 29e19c9aacc..ee42a28f7c9 100644
--- a/packages/@react-native/tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
+++ b/packages/@react-native/tester/js/examples/ActionSheetIOS/ActionSheetIOSExample.js
@@ -13,6 +13,7 @@
import type {HostInstance} from 'react-native';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
+import {createRef} from 'react';
const ScreenshotManager = require('../../../NativeModuleExample/NativeScreenshotManager');
const React = require('react');
@@ -207,7 +208,7 @@ class ActionSheetAnchorExample extends React.Component<
clicked: 'none',
};
- anchorRef: {current: null | HostInstance} = React.createRef();
+ anchorRef: {current: null | HostInstance} = createRef();
render(): React.Node {
return (
@@ -434,7 +435,7 @@ class ShareScreenshotAnchorExample extends React.Component<
text: '',
};
- anchorRef: {current: null | HostInstance} = React.createRef();
+ anchorRef: {current: null | HostInstance} = createRef();
render(): React.Node {
return (
diff --git a/packages/@react-native/tester/js/examples/Alert/AlertExample.js b/packages/@react-native/tester/js/examples/Alert/AlertExample.js
index 6c0f1a7353e..027614271aa 100644
--- a/packages/@react-native/tester/js/examples/Alert/AlertExample.js
+++ b/packages/@react-native/tester/js/examples/Alert/AlertExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
import RNTesterText from '../../components/RNTesterText';
import * as React from 'react';
+import {useState} from 'react';
import {Alert, Pressable, StyleSheet, Text, View} from 'react-native';
// Shows log on the screen
@@ -46,7 +47,7 @@ const AlertWithDefaultButton = () => {
};
const AlertWithTwoButtons = () => {
- const [message, setMessage] = React.useState('');
+ const [message, setMessage] = useState('');
const alertMessage = 'Your subscription has expired!';
@@ -70,7 +71,7 @@ const AlertWithTwoButtons = () => {
};
const AlertWithThreeButtons = () => {
- const [message, setMessage] = React.useState('');
+ const [message, setMessage] = useState('');
const alertMessage = 'Do you want to save your changes?';
@@ -96,7 +97,7 @@ const AlertWithThreeButtons = () => {
};
const AlertWithManyButtons = () => {
- const [message, setMessage] = React.useState('');
+ const [message, setMessage] = useState('');
const alertMessage =
'Credibly reintermediate next-generation potentialities after goal-oriented ' +
@@ -126,7 +127,7 @@ const AlertWithManyButtons = () => {
};
const AlertWithCancelableTrue = () => {
- const [message, setMessage] = React.useState('');
+ const [message, setMessage] = useState('');
const alertMessage = 'Tapping outside this dialog will dismiss this alert.';
@@ -158,7 +159,7 @@ const AlertWithCancelableTrue = () => {
};
const AlertWithStyles = () => {
- const [message, setMessage] = React.useState('');
+ const [message, setMessage] = useState('');
const alertMessage = 'Look at the button styles!';
@@ -195,7 +196,7 @@ const AlertWithStyles = () => {
};
const AlertWithStylesPreferred = () => {
- const [message, setMessage] = React.useState('');
+ const [message, setMessage] = useState('');
const alertMessage =
"The Preferred button is styled with 'preferred', so it is emphasized over the cancel button.";
@@ -228,7 +229,7 @@ const AlertWithStylesPreferred = () => {
};
const PromptOptions = () => {
- const [promptValue, setPromptValue] = React.useState<
+ const [promptValue, setPromptValue] = useState<
string | {login: string, password: string},
>('');
diff --git a/packages/@react-native/tester/js/examples/Animated/ColorStylesExample.js b/packages/@react-native/tester/js/examples/Animated/ColorStylesExample.js
index 548e0fd7dc2..7b44870e6c2 100644
--- a/packages/@react-native/tester/js/examples/Animated/ColorStylesExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ColorStylesExample.js
@@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useState} from 'react';
import {Animated, StyleSheet, Text, View} from 'react-native';
function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
@@ -123,7 +124,7 @@ function AnimatedView({useNativeDriver}: {useNativeDriver: boolean}) {
}
function AnimatedColorStyleExample(): React.Node {
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/CombineExample.js b/packages/@react-native/tester/js/examples/Animated/CombineExample.js
index 90117168024..700dfcab230 100644
--- a/packages/@react-native/tester/js/examples/Animated/CombineExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/CombineExample.js
@@ -13,7 +13,9 @@ import type {Numeric} from 'react-native/Libraries/Animated/AnimatedImplementati
import RNTesterButton from '../../components/RNTesterButton';
import * as React from 'react';
+import {useState} from 'react';
import {Animated, StyleSheet, Text, TextInput, View} from 'react-native';
+
export default ({
title: 'Combine Example',
name: 'Combine View',
@@ -23,8 +25,8 @@ export default ({
}: RNTesterModuleExample);
const CombineExample = () => {
- const [aValue, setAValue] = React.useState('0.4');
- const [bValue, setBValue] = React.useState('0.5');
+ const [aValue, setAValue] = useState('0.4');
+ const [bValue, setBValue] = useState('0.5');
const a = new Animated.Value(parseFloat(aValue));
const b = new Animated.Value(parseFloat(bValue));
const add = Animated.add(a, b);
@@ -33,7 +35,7 @@ const CombineExample = () => {
const divide =
parseFloat(aValue) !== 0 ? Animated.divide(b, a) : new Animated.Value(1);
const mod = Animated.modulo(a, parseFloat(bValue));
- const [animation, setAnimation] = React.useState(add);
+ const [animation, setAnimation] = useState(add);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js b/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
index 413e0a45059..5b72071a311 100644
--- a/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ComposeAnimationsWithEasingExample.js
@@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import * as React from 'react';
+import {useContext} from 'react';
import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
@@ -30,7 +31,7 @@ const styles = StyleSheet.create({
function CompositeAnimationsWithEasingExample(): React.Node {
const anims = [1, 2, 3].map(() => new Animated.Value(0));
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/ComposingExample.js b/packages/@react-native/tester/js/examples/Animated/ComposingExample.js
index f894035bff1..c05a916a135 100644
--- a/packages/@react-native/tester/js/examples/Animated/ComposingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ComposingExample.js
@@ -17,6 +17,7 @@ import RNTesterButton from '../../components/RNTesterButton';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useContext, useMemo, useRef, useState} from 'react';
import {
Animated,
FlatList,
@@ -146,14 +147,12 @@ function ComposingExampleItem({
// Figure out how far along the x axis we should translate the box by taking into
// account the window width, box size, and padding
const maxXTranslation = windowWidth - boxSize - 4 * padding;
- const boxIndexes = React.useMemo(() => [0, 1, 2, 3, 4], []);
- const xTranslations = React.useRef(
- boxIndexes.map(() => new Animated.Value(0)),
- );
- const animation = React.useRef(
+ const boxIndexes = useMemo(() => [0, 1, 2, 3, 4], []);
+ const xTranslations = useRef(boxIndexes.map(() => new Animated.Value(0)));
+ const animation = useRef(
compositeAnimation(xTranslations.current, useNativeDriver),
);
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
@@ -208,7 +207,7 @@ function ComposingExampleItem({
}
function ComposingExample(props: Props): React.Node {
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
<>
diff --git a/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js b/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js
index 8656015bb26..2c4fea2dc5a 100644
--- a/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/ContinuousInteractionsExample.js
@@ -12,10 +12,11 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import * as React from 'react';
+import {useContext} from 'react';
import {Text} from 'react-native';
function AnimatedContinuousInteractionsExample(): React.Node {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
Checkout the Gratuitous Animation App!
diff --git a/packages/@react-native/tester/js/examples/Animated/EasingExample.js b/packages/@react-native/tester/js/examples/Animated/EasingExample.js
index 2ec1fc78a1b..af9612ffded 100644
--- a/packages/@react-native/tester/js/examples/Animated/EasingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/EasingExample.js
@@ -15,6 +15,7 @@ import RNTesterButton from '../../components/RNTesterButton';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useContext, useRef, useState} from 'react';
import {
Animated,
Easing,
@@ -86,8 +87,8 @@ function EasingItem({
item: EasingListItem,
useNativeDriver: boolean,
}): React.Node {
- const opacityAndScale = React.useRef(new Animated.Value(1));
- const animation = React.useRef(
+ const opacityAndScale = useRef(new Animated.Value(1));
+ const animation = useRef(
Animated.timing(opacityAndScale.current, {
toValue: 1,
duration: 1200,
@@ -104,7 +105,7 @@ function EasingItem({
},
];
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
@@ -128,7 +129,7 @@ function EasingItem({
}
function EasingExample(props: Props): React.Node {
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
<>
diff --git a/packages/@react-native/tester/js/examples/Animated/FadeInViewExample.js b/packages/@react-native/tester/js/examples/Animated/FadeInViewExample.js
index 3043a3f9b7d..56b8d402805 100644
--- a/packages/@react-native/tester/js/examples/Animated/FadeInViewExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/FadeInViewExample.js
@@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useEffect, useState} from 'react';
import {Animated, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
@@ -36,8 +37,8 @@ function FadeInView({
children: React.Node,
}) {
//opacity 0
- const [fadeAnim] = React.useState(() => new Animated.Value(0));
- React.useEffect(() => {
+ const [fadeAnim] = useState(() => new Animated.Value(0));
+ useEffect(() => {
Animated.timing(
// Uses easing functions
fadeAnim, // The value to drive
@@ -64,8 +65,8 @@ function FadeInView({
}
function FadeInExample(): React.Node {
- const [show, setShow] = React.useState(true);
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [show, setShow] = useState(true);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/LoopingExample.js b/packages/@react-native/tester/js/examples/Animated/LoopingExample.js
index ffa891294f9..4e24cf3f28e 100644
--- a/packages/@react-native/tester/js/examples/Animated/LoopingExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/LoopingExample.js
@@ -14,7 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
-import {useEffect} from 'react';
+import {useEffect, useMemo, useState} from 'react';
import {Animated, StyleSheet, Text, View} from 'react-native';
export default ({
@@ -31,8 +31,8 @@ function LoopingView({
useNativeDriver: boolean,
running: boolean,
}) {
- const opacity = React.useMemo(() => new Animated.Value(1), []);
- const scale = React.useMemo(() => new Animated.Value(1), []);
+ const opacity = useMemo(() => new Animated.Value(1), []);
+ const scale = useMemo(() => new Animated.Value(1), []);
useEffect(() => {
if (!running) {
@@ -65,8 +65,8 @@ function LoopingView({
}
function LoopingExample(props: {}): React.Node {
- const [running, setRunning] = React.useState(false);
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [running, setRunning] = useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/MovingBoxExample.js b/packages/@react-native/tester/js/examples/Animated/MovingBoxExample.js
index 2ead9f1743f..12694ca92c4 100644
--- a/packages/@react-native/tester/js/examples/Animated/MovingBoxExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/MovingBoxExample.js
@@ -14,7 +14,9 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useRef, useState} from 'react';
import {Animated, StyleSheet, Text, View} from 'react-native';
+
const containerWidth = 200;
const boxSize = 50;
@@ -57,9 +59,9 @@ const styles = StyleSheet.create({
type Props = $ReadOnly<{}>;
function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
- const x = React.useRef(new Animated.Value(0));
- const [update, setUpdate] = React.useState(0);
- const [boxVisible, setBoxVisible] = React.useState(true);
+ const x = useRef(new Animated.Value(0));
+ const [update, setUpdate] = useState(0);
+ const [boxVisible, setBoxVisible] = useState(true);
const moveTo = (pos: number) => {
Animated.timing(x.current, {
@@ -110,7 +112,7 @@ function MovingBoxView({useNativeDriver}: {useNativeDriver: boolean}) {
}
function MovingBoxExample(props: Props): React.Node {
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
<>
diff --git a/packages/@react-native/tester/js/examples/Animated/PanGestureExample.js b/packages/@react-native/tester/js/examples/Animated/PanGestureExample.js
index 7c6dee65cd5..e294afb7565 100644
--- a/packages/@react-native/tester/js/examples/Animated/PanGestureExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/PanGestureExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
diff --git a/packages/@react-native/tester/js/examples/Animated/PressabilityWithNativeDrivers.js b/packages/@react-native/tester/js/examples/Animated/PressabilityWithNativeDrivers.js
index e6d462ca99e..2b92ca80a27 100644
--- a/packages/@react-native/tester/js/examples/Animated/PressabilityWithNativeDrivers.js
+++ b/packages/@react-native/tester/js/examples/Animated/PressabilityWithNativeDrivers.js
@@ -11,13 +11,14 @@
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import * as React from 'react';
+import {useRef, useState} from 'react';
import {Animated, Button, Text, View} from 'react-native';
const componentList: number[] = Array.from({length: 100}, (_, i) => i + 1);
function PressableWithNativeDriver() {
- const currScroll = React.useRef(new Animated.Value(0)).current;
- const [count, setCount] = React.useState(0);
+ const currScroll = useRef(new Animated.Value(0)).current;
+ const [count, setCount] = useState(0);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/RotatingImagesExample.js b/packages/@react-native/tester/js/examples/Animated/RotatingImagesExample.js
index 7962dd758ef..d1a7c24cf03 100644
--- a/packages/@react-native/tester/js/examples/Animated/RotatingImagesExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/RotatingImagesExample.js
@@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useState} from 'react';
import {Animated, StyleSheet, View} from 'react-native';
const styles = StyleSheet.create({
@@ -84,7 +85,7 @@ function RotatingImagesView({useNativeDriver}: {useNativeDriver: boolean}) {
}
function RotatingImagesExample(): React.Node {
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/TransformBounceExample.js b/packages/@react-native/tester/js/examples/Animated/TransformBounceExample.js
index 55361d55e11..bed88330164 100644
--- a/packages/@react-native/tester/js/examples/Animated/TransformBounceExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/TransformBounceExample.js
@@ -14,6 +14,7 @@ import RNTConfigurationBlock from '../../components/RNTConfigurationBlock';
import RNTesterButton from '../../components/RNTesterButton';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useState} from 'react';
import {Animated, StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
@@ -91,7 +92,7 @@ function TransformBounceView({useNativeDriver}: {useNativeDriver: boolean}) {
}
function TransformBounceExample(): React.Node {
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js b/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js
index 33bafe4c391..0187e6b024c 100644
--- a/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js
+++ b/packages/@react-native/tester/js/examples/Animated/TransformStylesExample.js
@@ -16,6 +16,7 @@ import {RNTesterThemeContext} from '../../components/RNTesterTheme';
import RNTOption from '../../components/RNTOption';
import ToggleNativeDriver from './utils/ToggleNativeDriver';
import * as React from 'react';
+import {useContext, useState} from 'react';
import {Animated, StyleSheet, Text, View} from 'react-native';
const transformProperties = {
@@ -78,8 +79,8 @@ function AnimatedView({
}
function AnimatedTransformStyleExample(): React.Node {
- const [properties, setProperties] = React.useState(transformProperties);
- const [useNativeDriver, setUseNativeDriver] = React.useState(false);
+ const [properties, setProperties] = useState(transformProperties);
+ const [useNativeDriver, setUseNativeDriver] = useState(false);
const onToggle = (property: string) =>
setProperties({
...properties,
@@ -90,7 +91,7 @@ function AnimatedTransformStyleExample(): React.Node {
selected: !properties[property].selected,
},
});
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
diff --git a/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js b/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js
index 29e7068ad06..3aa43468882 100644
--- a/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js
+++ b/packages/@react-native/tester/js/examples/Animated/utils/ToggleNativeDriver.js
@@ -10,6 +10,7 @@
import {RNTesterThemeContext} from '../../../components/RNTesterTheme';
import * as React from 'react';
+import {useContext} from 'react';
import {StyleSheet, Switch, Text, View} from 'react-native';
type ViewStyleProp = React.ElementConfig['style'];
@@ -25,7 +26,7 @@ export default function ToggleNativeDriver({
onValueChange,
style,
}: Props): React.Node {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
return (
Use Native Driver
diff --git a/packages/@react-native/tester/js/examples/AppState/AppStateExample.js b/packages/@react-native/tester/js/examples/AppState/AppStateExample.js
index b7bee917efc..ed1e146e9b2 100644
--- a/packages/@react-native/tester/js/examples/AppState/AppStateExample.js
+++ b/packages/@react-native/tester/js/examples/AppState/AppStateExample.js
@@ -15,7 +15,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
import {useEffect, useState} from 'react';
-import {AppState, Platform, View} from 'react-native';
+import {AppState, Platform} from 'react-native';
type Props = {
detectEvents?: boolean,
diff --git a/packages/@react-native/tester/js/examples/ContentURLAndroid/ContentURLAndroid.js b/packages/@react-native/tester/js/examples/ContentURLAndroid/ContentURLAndroid.js
index 225396f33cf..97b926a5c51 100644
--- a/packages/@react-native/tester/js/examples/ContentURLAndroid/ContentURLAndroid.js
+++ b/packages/@react-native/tester/js/examples/ContentURLAndroid/ContentURLAndroid.js
@@ -14,6 +14,7 @@ import RNTesterBlock from '../../components/RNTesterBlock';
import RNTesterPage from '../../components/RNTesterPage';
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
+import {useCallback, useState} from 'react';
import {
Image,
Platform,
@@ -39,8 +40,8 @@ function blobToBase64(blob: Blob) {
}
const ContentSelector = (): React.Node => {
- const [base64Image, setBase64Image] = React.useState('');
- const imageSelector = React.useCallback(async () => {
+ const [base64Image, setBase64Image] = useState('');
+ const imageSelector = useCallback(async () => {
try {
const NativeSampleTurboModule =
require('react-native/Libraries/TurboModule/samples/NativeSampleTurboModule').default;
diff --git a/packages/@react-native/tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js b/packages/@react-native/tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js
index c56357bbdb2..d2bd7a96f17 100644
--- a/packages/@react-native/tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js
+++ b/packages/@react-native/tester/js/examples/Experimental/Compatibility/CompatibilityAnimatedPointerMove.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../../types/RNTesterTypes';
import ToggleNativeDriver from '../../Animated/utils/ToggleNativeDriver';
import * as React from 'react';
+import {useRef, useState} from 'react';
import {Animated, StyleSheet, Text} from 'react-native';
const WIDTH = 200;
@@ -38,9 +39,9 @@ const styles = StyleSheet.create({
});
function CompatibilityAnimatedPointerMove(): React.Node {
- const xCoord = React.useRef(new Animated.Value(0)).current;
- const yCoord = React.useRef(new Animated.Value(0)).current;
- const [useNativeDriver, setUseNativeDriver] = React.useState(true);
+ const xCoord = useRef(new Animated.Value(0)).current;
+ const yCoord = useRef(new Animated.Value(0)).current;
+ const [useNativeDriver, setUseNativeDriver] = useState(true);
return (
<>
diff --git a/packages/@react-native/tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js b/packages/@react-native/tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js
index c11dc11cdc4..538e11239dc 100644
--- a/packages/@react-native/tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js
+++ b/packages/@react-native/tester/js/examples/Experimental/Compatibility/ManyPointersPropertiesExample.js
@@ -12,6 +12,7 @@ import type {RNTesterModuleExample} from '../../../types/RNTesterTypes';
import type {PointerEvent} from 'react-native';
import * as React from 'react';
+import {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const styles = StyleSheet.create({
@@ -43,7 +44,7 @@ function getModifiersText(evt: PointerEvent['nativeEvent']): string {
}
function ManyPointersPropertiesExample(): React.Node {
- const [data, setData] = React.useState<{}>({});
+ const [data, setData] = useState<{}>({});
const onPointerMove = (event: PointerEvent) => {
const pointerId = event.nativeEvent.pointerId;
// $FlowFixMe[invalid-computed-prop]
diff --git a/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js b/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js
index 3cc360bafac..77d54ecea8b 100644
--- a/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js
+++ b/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestEventRecorder.js
@@ -26,7 +26,7 @@ type EventRecord = {
event: Object,
};
-class RNTesterPlatformTestEventRecorder {
+export default class RNTesterPlatformTestEventRecorder {
allRecords: Array = [];
relevantEvents: Array = [];
rawOrder: number = 1;
@@ -101,41 +101,34 @@ class RNTesterPlatformTestEventRecorder {
};
}
- useRecorderTestEventHandlers(
+ createRecorderTestEventHandlers(
targetNames: $ReadOnlyArray,
callback?: (event: Object, eventType: string, targetName: string) => void,
): $ReadOnly<{[targetName: string]: ViewProps}> {
- // Yes this method exists as a class's prototype method but it will still only be used
- // in functional components
- // prettier-ignore
- // $FlowFixMe[react-rule-hook]
- return useMemo(() => { // eslint-disable-line react-hooks/rules-of-hooks
- const result: {[targetName: string]: ViewProps} = {};
- for (const targetName of targetNames) {
- const recordedEventHandler =
- this._generateRecordedEventHandlerWithCallback(
- targetName,
- (event, eventType) =>
- callback && callback(event, eventType, targetName),
- );
- // $FlowFixMe[incompatible-call]
- const eventListenerProps = this.relevantEvents.reduce(
- (acc: ViewProps, eventName) => {
- const eventPropName =
- 'on' + eventName[0].toUpperCase() + eventName.slice(1);
- return {
- ...acc,
- [eventPropName]: (e => {
- recordedEventHandler(e, eventName);
- }) as $FlowFixMe,
- };
- },
- {},
+ const result: {[targetName: string]: ViewProps} = {};
+ for (const targetName of targetNames) {
+ const recordedEventHandler =
+ this._generateRecordedEventHandlerWithCallback(
+ targetName,
+ (event, eventType) => callback?.(event, eventType, targetName),
);
- result[targetName] = eventListenerProps;
- }
- return result;
- }, [callback, targetNames]);
+ // $FlowFixMe[incompatible-call]
+ const eventListenerProps = this.relevantEvents.reduce(
+ (acc: ViewProps, eventName) => {
+ const eventPropName =
+ 'on' + eventName[0].toUpperCase() + eventName.slice(1);
+ return {
+ ...acc,
+ [eventPropName]: (e => {
+ recordedEventHandler(e, eventName);
+ }) as $FlowFixMe,
+ };
+ },
+ {},
+ );
+ result[targetName] = eventListenerProps;
+ }
+ return result;
}
getRecords(): Array {
@@ -176,4 +169,13 @@ class RNTesterPlatformTestEventRecorder {
}
}
-export default RNTesterPlatformTestEventRecorder;
+export function useRecorderTestEventHandlers(
+ eventRecorder: RNTesterPlatformTestEventRecorder,
+ targetNames: $ReadOnlyArray,
+ callback?: (event: Object, eventType: string, targetName: string) => void,
+): $ReadOnly<{[targetName: string]: ViewProps}> {
+ return useMemo(
+ () => eventRecorder.createRecorderTestEventHandlers(targetNames, callback),
+ [eventRecorder, targetNames, callback],
+ );
+}
diff --git a/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js b/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
index 4458a2c63a5..091fc0b6484 100644
--- a/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
+++ b/packages/@react-native/tester/js/examples/Experimental/PlatformTest/RNTesterPlatformTestResultView.js
@@ -18,7 +18,7 @@ import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
import RNTesterPlatformTestMinimizedResultView from './RNTesterPlatformTestMinimizedResultView';
import RNTesterPlatformTestResultsText from './RNTesterPlatformTestResultsText';
import * as React from 'react';
-import {useCallback, useMemo, useState} from 'react';
+import {memo, useCallback, useMemo, useState} from 'react';
import {
Button,
FlatList,
@@ -144,35 +144,33 @@ function TableHeader() {
);
}
-const TableRow = React.memo(
- ({testResult}: {testResult: PlatformTestResult}) => {
- return (
-
-
-
- {DISPLAY_STATUS_MAPPING[testResult.status]}
-
-
-
- {testResult.name}
-
-
- {testResult.assertions.map((assertion, assertionIdx) => {
- if (assertion.passing) {
- return null;
- }
- return (
-
- {assertion.name}: {assertion.description}{' '}
- {assertion.failureMessage}
-
- );
- })}
-
+const TableRow = memo(({testResult}: {testResult: PlatformTestResult}) => {
+ return (
+
+
+
+ {DISPLAY_STATUS_MAPPING[testResult.status]}
+
- );
- },
-);
+
+ {testResult.name}
+
+
+ {testResult.assertions.map((assertion, assertionIdx) => {
+ if (assertion.passing) {
+ return null;
+ }
+ return (
+
+ {assertion.name}: {assertion.description}{' '}
+ {assertion.failureMessage}
+
+ );
+ })}
+
+
+ );
+});
function renderTableRow({item}: ListRenderItemInfo) {
return ;
diff --git a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js
index 26574a1076d..bf6afd99125 100644
--- a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js
+++ b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveAcross.js
@@ -11,7 +11,9 @@
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
-import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
+import RNTesterPlatformTestEventRecorder, {
+ useRecorderTestEventHandlers,
+} from '../PlatformTest/RNTesterPlatformTestEventRecorder';
import * as React from 'react';
import {useCallback, useState} from 'react';
import {StyleSheet, View} from 'react-native';
@@ -126,7 +128,8 @@ function PointerEventPointerMoveAcrossTestCase(
[eventRecorder, pointermove_across],
);
- const eventProps = eventRecorder.useRecorderTestEventHandlers(
+ const eventProps = useRecorderTestEventHandlers(
+ eventRecorder,
targetNames,
eventHandler,
);
diff --git a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js
index f72b5761de7..79e4007f2f1 100644
--- a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js
+++ b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveBetween.js
@@ -11,7 +11,9 @@
import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatformTestTypes';
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
-import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
+import RNTesterPlatformTestEventRecorder, {
+ useRecorderTestEventHandlers,
+} from '../PlatformTest/RNTesterPlatformTestEventRecorder';
import * as React from 'react';
import {useCallback, useState} from 'react';
import {StyleSheet, View} from 'react-native';
@@ -102,7 +104,8 @@ function PointerEventPointerMoveBetweenTestCase(
[eventRecorder, pointermove_between],
);
- const eventProps = eventRecorder.useRecorderTestEventHandlers(
+ const eventProps = useRecorderTestEventHandlers(
+ eventRecorder,
targetNames,
eventHandler,
);
diff --git a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js
index 232d145beee..19986a80ed2 100644
--- a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js
+++ b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventPlatformTests/PointerEventPointerMoveEventOrder.js
@@ -12,7 +12,9 @@ import type {PlatformTestComponentBaseProps} from '../PlatformTest/RNTesterPlatf
import type {PointerEvent} from 'react-native';
import RNTesterPlatformTest from '../PlatformTest/RNTesterPlatformTest';
-import RNTesterPlatformTestEventRecorder from '../PlatformTest/RNTesterPlatformTestEventRecorder';
+import RNTesterPlatformTestEventRecorder, {
+ useRecorderTestEventHandlers,
+} from '../PlatformTest/RNTesterPlatformTestEventRecorder';
import * as React from 'react';
import {useCallback, useState} from 'react';
import {StyleSheet, View} from 'react-native';
@@ -111,7 +113,8 @@ function PointerEventPointerMoveEventOrderTestCase(
[endMoved, eventRecorder, pointer_test, startMoved],
);
- const eventProps = eventRecorder.useRecorderTestEventHandlers(
+ const eventProps = useRecorderTestEventHandlers(
+ eventRecorder,
['start', 'end'],
eventHandler,
);
diff --git a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsEventfulView.js b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsEventfulView.js
index 27e75cedc01..62d20442d11 100644
--- a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsEventfulView.js
+++ b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsEventfulView.js
@@ -11,6 +11,7 @@
import type {PointerEvent, ViewProps} from 'react-native';
import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
export default function EventfulView(props: {
@@ -35,8 +36,8 @@ export default function EventfulView(props: {
log: string => void,
...ViewProps,
}): React.Node {
- const ref = React.useRef>();
- React.useEffect(() => {
+ const ref = useRef>();
+ useEffect(() => {
// $FlowFixMe[prop-missing] Using private property
setTag(ref.current?._nativeTag);
}, [ref]);
@@ -64,7 +65,7 @@ export default function EventfulView(props: {
onCancelCapture,
...restProps
} = props;
- const [tag, setTag] = React.useState('');
+ const [tag, setTag] = useState('');
const eventLog =
(eventName: string, handler: ?(e: PointerEvent) => void) =>
diff --git a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsExample.js b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsExample.js
index 85e21967ad6..7df67b48fba 100644
--- a/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsExample.js
+++ b/packages/@react-native/tester/js/examples/Experimental/W3CPointerEventsExample.js
@@ -29,6 +29,7 @@ import PointerEventPointerOverOut from './W3CPointerEventPlatformTests/PointerEv
import PointerEventPrimaryTouchPointer from './W3CPointerEventPlatformTests/PointerEventPrimaryTouchPointer';
import EventfulView from './W3CPointerEventsEventfulView';
import * as React from 'react';
+import {useState} from 'react';
import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';
function AbsoluteChildExample({log}: {log: string => void}) {
@@ -105,7 +106,7 @@ function PointerEventScaffolding({
}: {
Example: component(log: (string) => void),
}) {
- const [eventsLog, setEventsLog] = React.useState('');
+ const [eventsLog, setEventsLog] = useState('');
const clear = () => setEventsLog('');
const log = (eventStr: string) => {
setEventsLog(currentEventsLog => `${eventStr}\n${currentEventsLog}`);
diff --git a/packages/@react-native/tester/js/examples/Filter/FilterExample.js b/packages/@react-native/tester/js/examples/Filter/FilterExample.js
index 1f02a2a366e..d980f2d7490 100644
--- a/packages/@react-native/tester/js/examples/Filter/FilterExample.js
+++ b/packages/@react-native/tester/js/examples/Filter/FilterExample.js
@@ -14,6 +14,7 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
import React from 'react';
+import {useState} from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
const alphaHotdog = require('../../assets/alpha-hotdog.png');
@@ -34,6 +35,7 @@ function StaticViewAndImage(props: Props): React.Node {
Hello world!
+ {/* $FlowFixMe - ImageStyle is not compatible with ViewStyle */}
setS(!s), 5000);
return (
diff --git a/packages/@react-native/tester/js/examples/FlatList/BaseFlatListExample.js b/packages/@react-native/tester/js/examples/FlatList/BaseFlatListExample.js
index a325b8a1f82..3d46dd5dc97 100644
--- a/packages/@react-native/tester/js/examples/FlatList/BaseFlatListExample.js
+++ b/packages/@react-native/tester/js/examples/FlatList/BaseFlatListExample.js
@@ -70,42 +70,39 @@ type Props = $ReadOnly<{
const BaseFlatListExample: component(
ref: React.RefSetter>,
...props: Props
-) = React.forwardRef(
- // $FlowFixMe[incompatible-call]
- (props: Props, ref) => {
- return (
-
- {props.testOutput != null ? (
-
-
- {props.testOutput}
-
- {props.onTest != null ? (
-
- ) : null}
-
- ) : null}
- {props.children}
- item + index}
- style={styles.list}
- // $FlowFixMe[incompatible-type-arg]
- renderItem={Item}
- />
-
- );
- },
-);
+) = ({ref, ...props}: {ref: React.RefSetter>, ...Props}) => {
+ return (
+
+ {props.testOutput != null ? (
+
+
+ {props.testOutput}
+
+ {props.onTest != null ? (
+
+ ) : null}
+
+ ) : null}
+ {props.children}
+ item + index}
+ style={styles.list}
+ // $FlowFixMe[incompatible-type-arg]
+ renderItem={Item}
+ />
+
+ );
+};
export default BaseFlatListExample;
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js
index af5110eea2d..ac20136573d 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-BaseOnViewableItemsChanged.js
@@ -14,6 +14,7 @@ import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
import BaseFlatListExample from './BaseFlatListExample';
import * as React from 'react';
+import {useCallback, useRef, useState} from 'react';
import {FlatList, StyleSheet, View} from 'react-native';
type FlatListProps = React.ElementProps;
@@ -31,8 +32,8 @@ export function FlatList_BaseOnViewableItemsChanged(props: {
waitForInteraction?: ?boolean,
}): React.Node {
const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
- const [output, setOutput] = React.useState('');
- const onViewableItemsChanged = React.useCallback(
+ const [output, setOutput] = useState('');
+ const onViewableItemsChanged = useCallback(
(info: {changed: Array, viewableItems: Array, ...}) =>
setOutput(
info.viewableItems
@@ -52,7 +53,7 @@ export function FlatList_BaseOnViewableItemsChanged(props: {
horizontal,
};
- const ref = React.useRef(null);
+ const ref = useRef(null);
const onTest =
useScrollRefScroll === true
? () => {
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-contentInset.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-contentInset.js
index 8717e8e19b5..059c685a5ed 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-contentInset.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-contentInset.js
@@ -12,15 +12,16 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import BaseFlatListExample from './BaseFlatListExample';
import * as React from 'react';
+import {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
export function FlatList_contentInset(): React.Node {
const [initialContentInset, toggledContentInset] = [44, 88];
- const [output, setOutput] = React.useState(
+ const [output, setOutput] = useState(
`contentInset top: ${initialContentInset.toString()}`,
);
- const [exampleProps, setExampleProps] = React.useState({
+ const [exampleProps, setExampleProps] = useState({
automaticallyAdjustContentInsets: false,
contentInset: {top: initialContentInset},
contentOffset: {y: -initialContentInset, x: 0},
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-inverted.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-inverted.js
index e90e55f1325..7b8190409a0 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-inverted.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-inverted.js
@@ -12,10 +12,11 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import BaseFlatListExample from './BaseFlatListExample';
import * as React from 'react';
+import {useState} from 'react';
export function FlatList_inverted(): React.Node {
- const [output, setOutput] = React.useState('inverted false');
- const [exampleProps, setExampleProps] = React.useState({
+ const [output, setOutput] = useState('inverted false');
+ const [exampleProps, setExampleProps] = useState({
inverted: false,
});
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-multiColumn.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-multiColumn.js
index 45cdacbb035..92079c3a00d 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-multiColumn.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-multiColumn.js
@@ -27,17 +27,18 @@ import {
} from '../../components/ListExampleShared';
import RNTesterPage from '../../components/RNTesterPage';
import RNTesterText from '../../components/RNTesterText';
-import React from 'react';
+import * as React from 'react';
+import {useState} from 'react';
import {Alert, FlatList, StyleSheet, View} from 'react-native';
import infoLog from 'react-native/Libraries/Utilities/infoLog';
function MultiColumnExample(): React.Node {
- const [data, setData] = React.useState(genNewerItems(1000));
- const [filterText, setFilterText] = React.useState('');
- const [fixedHeight, setFixedHeight] = React.useState(true);
- const [logViewable, setLogViewable] = React.useState(false);
- const [numColumns, setNumColumns] = React.useState(2);
- const [virtualized, setVirtualized] = React.useState(true);
+ const [data, setData] = useState(genNewerItems(1000));
+ const [filterText, setFilterText] = useState('');
+ const [fixedHeight, setFixedHeight] = useState(true);
+ const [logViewable, setLogViewable] = useState(false);
+ const [numColumns, setNumColumns] = useState(2);
+ const [virtualized, setVirtualized] = useState(true);
const _onChangeFilterText = (_filterText: string) => {
setFilterText(_filterText);
@@ -66,6 +67,7 @@ function MultiColumnExample(): React.Node {
return {length, offset: length * index, index};
};
+ // eslint-disable-next-line react/no-unstable-nested-components
const _renderItemComponent = ({
item,
}: ListRenderItemInfo): $FlowFixMe => {
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js
index a7d3042c6ae..14ac62cdd03 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-onEndReached.js
@@ -9,19 +9,21 @@
*/
'use strict';
+
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import BaseFlatListExample from './BaseFlatListExample';
import * as React from 'react';
+import {useRef, useState} from 'react';
export function FlatList_onEndReached(): React.Node {
- const [output, setOutput] = React.useState('');
+ const [output, setOutput] = useState('');
const exampleProps = {
onEndReached: (info: {distanceFromEnd: number, ...}) =>
setOutput('onEndReached'),
onEndReachedThreshold: 0,
};
- const ref = React.useRef(null);
+ const ref = useRef(null);
const onTest = () => {
const scrollResponder = ref?.current?.getScrollResponder();
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-onStartReached.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-onStartReached.js
index de1d2f4c9ba..91697fa7a12 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-onStartReached.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-onStartReached.js
@@ -9,14 +9,16 @@
*/
'use strict';
+
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import BaseFlatListExample, {ITEM_HEIGHT} from './BaseFlatListExample';
import * as React from 'react';
+import {useRef, useState} from 'react';
import {FlatList} from 'react-native';
export function FlatList_onStartReached(): React.Node {
- const [output, setOutput] = React.useState('');
+ const [output, setOutput] = useState('');
const exampleProps = {
onStartReached: (info: {distanceFromStart: number, ...}) =>
setOutput('onStartReached'),
@@ -28,7 +30,7 @@ export function FlatList_onStartReached(): React.Node {
index,
}),
};
- const ref = React.useRef>(null);
+ const ref = useRef>(null);
const onTest = () => {
ref.current?.scrollToOffset({offset: 0});
diff --git a/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js b/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js
index f046e26e2cd..2ced8706deb 100644
--- a/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js
+++ b/packages/@react-native/tester/js/examples/FlatList/FlatList-withSeparators.js
@@ -9,10 +9,12 @@
*/
'use strict';
+
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import BaseFlatListExample from './BaseFlatListExample';
import * as React from 'react';
+import {useRef} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const Separator =
@@ -44,7 +46,7 @@ export function FlatList_withSeparators(): React.Node {
const exampleProps = {
ItemSeparatorComponent: Separator('lightgreen', 'green'),
};
- const ref = React.useRef<$FlowFixMe>(null);
+ const ref = useRef<$FlowFixMe>(null);
return ;
}
diff --git a/packages/@react-native/tester/js/examples/Image/ImageExample.js b/packages/@react-native/tester/js/examples/Image/ImageExample.js
index 4a4b01294be..be221d94f52 100644
--- a/packages/@react-native/tester/js/examples/Image/ImageExample.js
+++ b/packages/@react-native/tester/js/examples/Image/ImageExample.js
@@ -17,6 +17,7 @@ import RNTesterButton from '../../components/RNTesterButton';
import RNTesterText from '../../components/RNTesterText';
import ImageCapInsetsExample from './ImageCapInsetsExample';
import React from 'react';
+import {useEffect, useState} from 'react';
import {Image, ImageBackground, StyleSheet, Text, View} from 'react-native';
const IMAGE1 =
@@ -38,9 +39,9 @@ type BlobImageProps = $ReadOnly<{
}>;
const BlobImage = ({url}: BlobImageProps): React.Node => {
- const [objectURL, setObjectURL] = React.useState(null);
+ const [objectURL, setObjectURL] = useState(null);
- React.useEffect(() => {
+ useEffect(() => {
// $FlowFixMe[unused-promise]
(async () => {
const result = await fetch(url);
@@ -86,11 +87,11 @@ const NetworkImageCallbackExample = ({
source,
prefetchedSource,
}: NetworkImageCallbackExampleProps): React.Node => {
- const [events, setEvents] = React.useState<$ReadOnlyArray>([]);
- const [startLoadPrefetched, setStartLoadPrefetched] = React.useState(false);
- const [mountTime, setMountTime] = React.useState(Date.now());
+ const [events, setEvents] = useState<$ReadOnlyArray>([]);
+ const [startLoadPrefetched, setStartLoadPrefetched] = useState(false);
+ const [mountTime, setMountTime] = useState(Date.now());
- React.useEffect(() => {
+ useEffect(() => {
setMountTime(Date.now());
}, []);
@@ -595,7 +596,7 @@ const VectorDrawableExample = () => {
};
function CacheControlAndroidExample(): React.Node {
- const [reload, setReload] = React.useState(0);
+ const [reload, setReload] = useState(0);
const onReload = () => {
setReload(prevReload => prevReload + 1);
diff --git a/packages/@react-native/tester/js/examples/Linking/LinkingExample.js b/packages/@react-native/tester/js/examples/Linking/LinkingExample.js
index 789d698148f..d200ad1ac02 100644
--- a/packages/@react-native/tester/js/examples/Linking/LinkingExample.js
+++ b/packages/@react-native/tester/js/examples/Linking/LinkingExample.js
@@ -12,6 +12,7 @@
import RNTesterBlock from '../../components/RNTesterBlock';
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
+import {useState} from 'react';
import {
Button,
Linking,
@@ -65,7 +66,7 @@ class OpenSettingsExample extends React.Component {
}
const SendIntentButton = ({action, extras}: Props) => {
- const [isOpeningIntent, setIsOpeningIntent] = React.useState(false);
+ const [isOpeningIntent, setIsOpeningIntent] = useState(false);
const handleIntent = async () => {
setIsOpeningIntent(true);
diff --git a/packages/@react-native/tester/js/examples/MixBlendMode/MixBlendModeExample.js b/packages/@react-native/tester/js/examples/MixBlendMode/MixBlendModeExample.js
index 833d5617167..63f823defed 100644
--- a/packages/@react-native/tester/js/examples/MixBlendMode/MixBlendModeExample.js
+++ b/packages/@react-native/tester/js/examples/MixBlendMode/MixBlendModeExample.js
@@ -6,13 +6,13 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
import React from 'react';
+import {useState} from 'react';
import {Image, ImageBackground, StyleSheet, Text, View} from 'react-native';
type Props = $ReadOnly<{
@@ -48,6 +48,7 @@ function LayeredImage(props: Props) {
+ {/* $FlowFixMe - ImageStyle is not compatible with ViewStyle */}
setS(!s), 5000);
return ;
}
function LayeredImageWithState(props: Props): React.Node {
- const [s, setS] = React.useState(true);
+ const [s, setS] = useState(true);
setTimeout(() => setS(!s), 5000);
return (
diff --git a/packages/@react-native/tester/js/examples/Performance/PerformanceComparisonExample.js b/packages/@react-native/tester/js/examples/Performance/PerformanceComparisonExample.js
index fb0ac33a9cd..0d9e92030c6 100644
--- a/packages/@react-native/tester/js/examples/Performance/PerformanceComparisonExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/PerformanceComparisonExample.js
@@ -6,7 +6,6 @@
*
* @format
* @flow strict-local
- * @oncall react_native
*/
'use strict';
diff --git a/packages/@react-native/tester/js/examples/Performance/components/ItemList.js b/packages/@react-native/tester/js/examples/Performance/components/ItemList.js
index 33c6ca24735..df370f958eb 100644
--- a/packages/@react-native/tester/js/examples/Performance/components/ItemList.js
+++ b/packages/@react-native/tester/js/examples/Performance/components/ItemList.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
diff --git a/packages/@react-native/tester/js/examples/Performance/components/itemData.js b/packages/@react-native/tester/js/examples/Performance/components/itemData.js
index f5e60263ae6..4cb1ee8bb09 100644
--- a/packages/@react-native/tester/js/examples/Performance/components/itemData.js
+++ b/packages/@react-native/tester/js/examples/Performance/components/itemData.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
const ALL_CHARS =
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js
index 0e795dc07bd..24f87e75d3b 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/EffectInRenderExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
@@ -16,12 +15,12 @@ import type {ItemDataType} from '../components/itemData';
import {generateRandomItems} from '../components/itemData';
import ItemList from '../components/ItemList';
import * as React from 'react';
-import {StrictMode, useCallback, useEffect, useState} from 'react';
+import {StrictMode, memo, useCallback, useEffect, useState} from 'react';
import {Text} from 'react-native';
const TIMEOUT = 500;
const FETCH_COUNT = 250;
-const ItemListMemo = React.memo(ItemList);
+const ItemListMemo = memo(ItemList);
function ItemFetcherBadExample(props: {
onFetched: (items: ItemDataType[]) => void,
@@ -65,8 +64,8 @@ function ItemFetcherGoodExample(props: {
}, [onFetched, count]);
}
-const ItemFetcherBadExampleMemo = React.memo(ItemFetcherBadExample);
-const ItemFetcherGoodExampleMemo = React.memo(ItemFetcherGoodExample);
+const ItemFetcherBadExampleMemo = memo(ItemFetcherBadExample);
+const ItemFetcherGoodExampleMemo = memo(ItemFetcherGoodExample);
function EffectInRenderBadExample(): React.Node {
const [visibleItems, setVisibleItems] = useState([]);
const [fetchedItems, setFetchedItems] = useState([]);
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js
index 4c81c639df4..ea9f9e7f285 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/NotMemoizeExpensiveTaskExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js
index 58b81f9e0aa..9970bedd551 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithNonPureChildExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
@@ -16,10 +15,11 @@ import type {ScrollEvent} from 'react-native';
import {LIST_100_ITEMS} from '../components/itemData';
import ItemList from '../components/ItemList';
import * as React from 'react';
+import {memo} from 'react';
import {Text} from 'react-native';
const {useCallback, useState} = React;
-const ItemListMemo = React.memo(ItemList);
+const ItemListMemo = memo(ItemList);
function ReRenderWithNonPureChildBadExample(): React.Node {
const [scrollOffset, setScrollOffset] = useState(0);
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js
index fd11f96d320..af82587c1af 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/ReRenderWithObjectPropExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
@@ -16,10 +15,11 @@ import type {ScrollEvent} from 'react-native';
import {LIST_100_ITEMS} from '../components/itemData';
import ItemList from '../components/ItemList';
import * as React from 'react';
+import {memo} from 'react';
import {Text} from 'react-native';
const {useState, useCallback} = React;
-const ItemListMemo = React.memo(ItemList);
+const ItemListMemo = memo(ItemList);
function ReRenderWithObjectPropBadExample(): React.Node {
const [scrollOffset, setScrollOffset] = useState(0);
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js
index 4a5a3a30580..743f67a2964 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/RenderOffscreenContentExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
@@ -14,8 +13,9 @@
import {LIST_100_ITEMS} from '../components/itemData';
import ItemList from '../components/ItemList';
import * as React from 'react';
+import {memo} from 'react';
-const ItemListMemo = React.memo(ItemList);
+const ItemListMemo = memo(ItemList);
function RenderOffscreenContentBadExample(): React.Node {
return ;
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js
index d3acfffc03f..e9ec97609ac 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
@@ -16,9 +15,10 @@ import type {ItemDataType} from '../components/itemData';
import {LIST_1000_ITEMS} from '../components/itemData';
import ItemList from '../components/ItemList';
import * as React from 'react';
+import {memo} from 'react';
const {useState, useEffect} = React;
-const ItemListMemo = React.memo(ItemList);
+const ItemListMemo = memo(ItemList);
function BadExample(props: {listData: ItemDataType[], filteredText: string}) {
const {listData, filteredText} = props;
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js
index d3acfffc03f..e9ec97609ac 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/SetStateInWrongEffectExample2.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
'use strict';
@@ -16,9 +15,10 @@ import type {ItemDataType} from '../components/itemData';
import {LIST_1000_ITEMS} from '../components/itemData';
import ItemList from '../components/ItemList';
import * as React from 'react';
+import {memo} from 'react';
const {useState, useEffect} = React;
-const ItemListMemo = React.memo(ItemList);
+const ItemListMemo = memo(ItemList);
function BadExample(props: {listData: ItemDataType[], filteredText: string}) {
const {listData, filteredText} = props;
diff --git a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/index.js b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/index.js
index 9381829472b..15cd8d2674a 100644
--- a/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/index.js
+++ b/packages/@react-native/tester/js/examples/Performance/performanceComparisonExamples/index.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
export {default as ReRenderWithNonPureChildExample} from './ReRenderWithNonPureChildExample';
diff --git a/packages/@react-native/tester/js/examples/PermissionsAndroid/PermissionsExample.js b/packages/@react-native/tester/js/examples/PermissionsAndroid/PermissionsExample.js
index c8fd8fb92d5..b216527852d 100644
--- a/packages/@react-native/tester/js/examples/PermissionsAndroid/PermissionsExample.js
+++ b/packages/@react-native/tester/js/examples/PermissionsAndroid/PermissionsExample.js
@@ -16,13 +16,14 @@ import RNTesterButton from '../../components/RNTesterButton';
import RNTesterText from '../../components/RNTesterText';
import RNTOption from '../../components/RNTOption';
import * as React from 'react';
+import {useState} from 'react';
import {PermissionsAndroid, StyleSheet, View} from 'react-native';
function PermissionsExample() {
- const [permission, setPermission] = React.useState(
+ const [permission, setPermission] = useState(
PermissionsAndroid.PERMISSIONS.CAMERA,
);
- const [hasPermission, setHasPermission] = React.useState('Not Checked');
+ const [hasPermission, setHasPermission] = useState('Not Checked');
const requestPermission = async () => {
let result;
diff --git a/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js b/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js
index dc7839941e5..519e515632c 100644
--- a/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js
+++ b/packages/@react-native/tester/js/examples/PixelRatio/PixelRatioExample.js
@@ -12,11 +12,12 @@
import RNTesterText from '../../components/RNTesterText';
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
-import React, {useState} from 'react';
+import * as React from 'react';
+import {useContext, useState} from 'react';
import {Button, PixelRatio, StyleSheet, TextInput, View} from 'react-native';
function LayoutSizeToPixel() {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
const [layoutDPSize, setLayoutDPSize] = useState(0);
const pixelSize = PixelRatio.getPixelSizeForLayoutSize(
layoutDPSize ? layoutDPSize : 0,
@@ -54,7 +55,7 @@ function LayoutSizeToPixel() {
}
function RoundToNearestPixel() {
- const theme = React.useContext(RNTesterThemeContext);
+ const theme = useContext(RNTesterThemeContext);
const [layoutDPSizeText, setLayoutDPSizeText] = useState('');
const layoutDPSize = parseFloat(layoutDPSizeText);
diff --git a/packages/@react-native/tester/js/examples/Playground/RNTesterPlayground.js b/packages/@react-native/tester/js/examples/Playground/RNTesterPlayground.js
index 9dbacb99701..d37d0d4a915 100644
--- a/packages/@react-native/tester/js/examples/Playground/RNTesterPlayground.js
+++ b/packages/@react-native/tester/js/examples/Playground/RNTesterPlayground.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
diff --git a/packages/@react-native/tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js b/packages/@react-native/tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js
index 8e54bd12432..fed5c839305 100644
--- a/packages/@react-native/tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js
+++ b/packages/@react-native/tester/js/examples/PopupMenuAndroid/PopupMenuAndroidExample.js
@@ -15,13 +15,14 @@ import type {Node} from 'react';
import PopupMenuAndroid from '@react-native/popup-menu-android';
import * as React from 'react';
+import {useRef, useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
type Fruit = 'Apple' | 'Pear' | 'Banana' | 'Orange' | 'Kiwi';
const PopupMenu = () => {
- const popupRef = React.useRef();
- const [fruit, setFruit] = React.useState();
+ const popupRef = useRef();
+ const [fruit, setFruit] = useState();
const fruits: Array = ['Apple', 'Pear', 'Banana', 'Orange', 'Kiwi'];
const items = fruits.map(item => ({
label: item,
diff --git a/packages/@react-native/tester/js/examples/SafeAreaView/SafeAreaViewExample.js b/packages/@react-native/tester/js/examples/SafeAreaView/SafeAreaViewExample.js
index 8a9e96873ff..d5905a95acf 100644
--- a/packages/@react-native/tester/js/examples/SafeAreaView/SafeAreaViewExample.js
+++ b/packages/@react-native/tester/js/examples/SafeAreaView/SafeAreaViewExample.js
@@ -12,6 +12,7 @@
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
+import {useState} from 'react';
import {
Button,
DeviceInfo,
@@ -22,7 +23,7 @@ import {
} from 'react-native';
function SafeAreaViewExample(): React.Node {
- const [modalVisible, setModalVisible] = React.useState(false);
+ const [modalVisible, setModalVisible] = useState(false);
const toggleModal = (visible: boolean) => {
setModalVisible(visible);
diff --git a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js
index c0d44afaa77..518b93d0af4 100644
--- a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js
+++ b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewExample.js
@@ -15,7 +15,7 @@ import RNTesterText from '../../components/RNTesterText';
import ScrollViewPressableStickyHeaderExample from './ScrollViewPressableStickyHeaderExample';
import nullthrows from 'nullthrows';
import * as React from 'react';
-import {useCallback, useState} from 'react';
+import {cloneElement, useCallback, useRef, useState} from 'react';
import {
Platform,
RefreshControl,
@@ -84,7 +84,7 @@ class AppendingList extends React.Component<
style={styles.scrollView}>
{this.state.items.map(item =>
// $FlowFixMe[prop-missing] React.Element internal inspection
- React.cloneElement(item, {key: item.props.msg}),
+ cloneElement(item, {key: item.props.msg}),
)}
{this.state.items.map(item =>
// $FlowFixMe[prop-missing] React.Element internal inspection
- React.cloneElement(item, {key: item.props.msg, style: null}),
+ cloneElement(item, {key: item.props.msg, style: null}),
)}
@@ -127,7 +127,7 @@ class AppendingList extends React.Component<
onPress={() => {
this.setState(state => ({
items: [
- React.cloneElement(state.items[0], {
+ cloneElement(state.items[0], {
style: {paddingBottom: Math.random() * 40},
}),
].concat(state.items.slice(1)),
@@ -159,7 +159,7 @@ class AppendingList extends React.Component<
onPress={() => {
this.setState(state => ({
items: state.items.slice(0, -1).concat(
- React.cloneElement(state.items[state.items.length - 1], {
+ cloneElement(state.items[state.items.length - 1], {
style: {paddingBottom: Math.random() * 40},
}),
),
@@ -569,7 +569,7 @@ const HorizontalScrollView = (props: {
itemCount?: number,
}) => {
const {direction} = props;
- const scrollRef = React.useRef>();
+ const scrollRef = useRef>();
const title = direction === 'ltr' ? 'LTR Layout' : 'RTL Layout';
const items =
props.itemCount == null ? ITEMS : ITEMS.slice(0, props.itemCount);
@@ -1013,7 +1013,7 @@ const KeyboardExample = () => {
const InvertStickyHeaders = () => {
const [invertStickyHeaders, setInvertStickyHeaders] = useState(false);
- const _scrollView = React.useRef>(null);
+ const _scrollView = useRef>(null);
return (
{/* $FlowFixMe[incompatible-use] */}
@@ -1054,7 +1054,7 @@ const InvertStickyHeaders = () => {
};
const MultipleStickyHeaders = () => {
- const _scrollView = React.useRef>(null);
+ const _scrollView = useRef>(null);
const stickyHeaderStyle = {backgroundColor: 'yellow'};
return (
diff --git a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js
index d820dfe904c..cdfbbb73361 100644
--- a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js
+++ b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewIndicatorInsetsIOSExample.js
@@ -3,11 +3,14 @@
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
+ *
+ * @format
*/
'use strict';
import * as React from 'react';
+import {useState} from 'react';
import {
Button,
Modal,
@@ -20,54 +23,78 @@ import {
} from 'react-native';
export function ScrollViewIndicatorInsetsExample() {
- const [automaticallyAdjustsScrollIndicatorInsets, setAutomaticallyAdjustsScrollIndicatorInsets] = React.useState(true);
- const [modalVisible, setModalVisible] = React.useState(false);
- const { height, width } = useWindowDimensions();
+ const [
+ automaticallyAdjustsScrollIndicatorInsets,
+ setAutomaticallyAdjustsScrollIndicatorInsets,
+ ] = useState(true);
+ const [modalVisible, setModalVisible] = useState(false);
+ const {height, width} = useWindowDimensions();
- return (
-
- setModalVisible(false)}
- presentationStyle="fullScreen"
- statusBarTranslucent={false}
- supportedOrientations={['portrait', 'landscape']}>
-
-
-
- When automaticallyAdjustsScrollIndicatorInsets is true, the scrollbar is inset to the status bar. When false, it reaches the edge of the modal.
- Check out the UIScrollView docs to learn more about automaticallyAdjustsScrollIndicatorInsets
-
-
- automaticallyAdjustsScrollIndicatorInsets is {automaticallyAdjustsScrollIndicatorInsets + ''}
+ return (
+
+ setModalVisible(false)}
+ presentationStyle="fullScreen"
+ statusBarTranslucent={false}
+ supportedOrientations={['portrait', 'landscape']}>
+
+
+
+
+ When{' '}
+
+ automaticallyAdjustsScrollIndicatorInsets
+ {' '}
+ is true, the scrollbar is inset to the status bar. When false,
+ it reaches the edge of the modal.
+
+
+ Check out the UIScrollView docs to learn more about{' '}
+
+ automaticallyAdjustsScrollIndicatorInsets
+
+
+
+
+
+
+ automaticallyAdjustsScrollIndicatorInsets
+ {' '}
+ is {automaticallyAdjustsScrollIndicatorInsets + ''}
+
setAutomaticallyAdjustsScrollIndicatorInsets(v)}
+ onValueChange={v =>
+ setAutomaticallyAdjustsScrollIndicatorInsets(v)
+ }
value={automaticallyAdjustsScrollIndicatorInsets}
- style={styles.switch}/>
-
-
-
-
-
-
- );
- }
+ style={styles.switch}
+ />
+
+
+
+
+
+
+ );
+}
const styles = StyleSheet.create({
modal: {
@@ -86,7 +113,7 @@ const styles = StyleSheet.create({
switch: {
marginBottom: 40,
},
- toggle:{
+ toggle: {
margin: 20,
alignItems: 'center',
},
@@ -106,6 +133,6 @@ exports.description =
exports.examples = [
{
title: ' automaticallyAdjustsScrollIndicatorInsets Example',
- render: (): React.Node => ,
+ render: (): React.Node => ,
},
];
diff --git a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js
index 95f64433aca..276da99e475 100644
--- a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js
+++ b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewKeyboardInsetsIOSExample.js
@@ -3,11 +3,14 @@
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
+ *
+ * @format
*/
'use strict';
import * as React from 'react';
+import {useState} from 'react';
import {
FlatList,
ScrollView,
@@ -19,10 +22,13 @@ import {
} from 'react-native';
export function ScrollViewKeyboardInsetsExample() {
- const [automaticallyAdjustKeyboardInsets, setAutomaticallyAdjustKeyboardInsets] = React.useState(true);
- const [flatList, setFlatList] = React.useState(false);
- const [inverted, setInverted] = React.useState(false);
- const [heightRestricted, setHeightRestricted] = React.useState(false);
+ const [
+ automaticallyAdjustKeyboardInsets,
+ setAutomaticallyAdjustKeyboardInsets,
+ ] = useState(true);
+ const [flatList, setFlatList] = useState(false);
+ const [inverted, setInverted] = useState(false);
+ const [heightRestricted, setHeightRestricted] = useState(false);
const scrollViewProps = {
style: heightRestricted && styles.scrollViewHeightRestricted,
@@ -32,13 +38,15 @@ export function ScrollViewKeyboardInsetsExample() {
};
const data = [...Array(20).keys()];
- const renderItem = ({ item, index }) => {
- const largeInput = (index % 5) === 4;
+ const renderItem = ({item, index}) => {
+ const largeInput = index % 5 === 4;
return (
-
+
);
};
@@ -46,52 +54,67 @@ export function ScrollViewKeyboardInsetsExample() {
return (
- automaticallyAdjustKeyboardInsets is {automaticallyAdjustKeyboardInsets + ''}
+
+ automaticallyAdjustKeyboardInsets is{' '}
+ {automaticallyAdjustKeyboardInsets + ''}
+
setAutomaticallyAdjustKeyboardInsets(v)}
value={automaticallyAdjustKeyboardInsets}
- style={styles.controlSwitch}/>
+ style={styles.controlSwitch}
+ />
- FlatList is {flatList + ''}
+
+ FlatList is {flatList + ''}
+
setFlatList(v)}
value={flatList}
- style={styles.controlSwitch}/>
+ style={styles.controlSwitch}
+ />
{flatList && (
- inverted is {inverted + ''}
+
+ inverted is {inverted + ''}
+
setInverted(v)}
value={inverted}
- style={styles.controlSwitch}/>
+ style={styles.controlSwitch}
+ />
)}
- HeightRestricted is {heightRestricted + ''}
+
+ HeightRestricted is{' '}
+ {heightRestricted + ''}
+
setHeightRestricted(v)}
value={heightRestricted}
- style={styles.controlSwitch}/>
+ style={styles.controlSwitch}
+ />
-
+
- {flatList
- ? (
-
- )
- : (
-
- {data.map((item, index) => renderItem({ item, index }))}
-
- )
- }
+ {flatList ? (
+
+ ) : (
+
+ {data.map((item, index) => renderItem({item, index}))}
+
+ )}
);
}
@@ -136,8 +159,7 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
- controlSwitch: {
- },
+ controlSwitch: {},
controlTextInput: {
flex: 1,
paddingVertical: 10,
@@ -159,6 +181,6 @@ exports.description =
exports.examples = [
{
title: ' automaticallyAdjustKeyboardInsets Example',
- render: (): React.Node => ,
+ render: (): React.Node => ,
},
];
diff --git a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js
index bc400223a4c..bc40525ddfa 100644
--- a/packages/@react-native/tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js
+++ b/packages/@react-native/tester/js/examples/ScrollView/ScrollViewPressableStickyHeaderExample.js
@@ -9,6 +9,7 @@
*/
import * as React from 'react';
+import {useRef, useState} from 'react';
import {
Button,
Pressable,
@@ -19,7 +20,7 @@ import {
} from 'react-native';
function StickyHeader() {
- const [backgroundColor, setBackgroundColor] = React.useState('blue');
+ const [backgroundColor, setBackgroundColor] = useState('blue');
return (
(null);
+ const scrollRef = useRef<$FlowFixMe>(null);
const components = [];
for (var i = 1; i < 10; i++) {
components.push(renderComponent1(i));
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
index 748cf11529c..093d6915568 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-BaseOnViewableItemsChanged.js
@@ -12,6 +12,7 @@ import type {ViewToken} from 'react-native/Libraries/Lists/ViewabilityHelper';
import SectionListBaseExample from './SectionListBaseExample';
import * as React from 'react';
+import {useRef, useState} from 'react';
import {SectionList, StyleSheet, View} from 'react-native';
type SectionListProps = React.ElementProps;
@@ -29,7 +30,7 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
waitForInteraction?: ?boolean,
}): React.Node {
const {offScreen, horizontal, useScrollRefScroll, waitForInteraction} = props;
- const [output, setOutput] = React.useState('');
+ const [output, setOutput] = useState('');
const viewabilityConfig: ViewabilityConfig = {
...BASE_VIEWABILITY_CONFIG,
waitForInteraction: waitForInteraction ?? false,
@@ -49,7 +50,7 @@ export function SectionList_BaseOnViewableItemsChanged(props: {
viewabilityConfig,
horizontal,
};
- const ref = React.useRef(null);
+ const ref = useRef(null);
const onTest =
useScrollRefScroll === true
? () => {
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-contentInset.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-contentInset.js
index 95c6ebf85e3..426e9cd2efb 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-contentInset.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-contentInset.js
@@ -14,15 +14,16 @@ import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
import SectionListBaseExample from './SectionListBaseExample';
import * as React from 'react';
+import {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
export function SectionList_contentInset(): React.Node {
const [initialContentInset, toggledContentInset] = [44, 88];
- const [output, setOutput] = React.useState(
+ const [output, setOutput] = useState(
`contentInset top: ${initialContentInset.toString()}`,
);
- const [exampleProps, setExampleProps] = React.useState({
+ const [exampleProps, setExampleProps] = useState({
automaticallyAdjustContentInsets: false,
contentInset: {top: initialContentInset},
contentOffset: {y: -initialContentInset, x: 0},
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-inverted.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-inverted.js
index cab5d421605..86bee5ab82a 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-inverted.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-inverted.js
@@ -9,12 +9,14 @@
*/
'use strict';
+
import SectionListBaseExample from './SectionListBaseExample';
import * as React from 'react';
+import {useState} from 'react';
export function SectionList_inverted(): React.Node {
- const [output, setOutput] = React.useState('inverted false');
- const [exampleProps, setExampleProps] = React.useState({
+ const [output, setOutput] = useState('inverted false');
+ const [exampleProps, setExampleProps] = useState({
inverted: false,
});
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-onEndReached.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-onEndReached.js
index 4ca950e0d11..d0c4f121454 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-onEndReached.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-onEndReached.js
@@ -10,15 +10,16 @@
import SectionListBaseExample from './SectionListBaseExample';
import * as React from 'react';
+import {useRef, useState} from 'react';
export function SectionList_onEndReached(): React.Node {
- const [output, setOutput] = React.useState('');
+ const [output, setOutput] = useState('');
const exampleProps = {
onEndReached: (info: {distanceFromEnd: number, ...}) =>
setOutput('onEndReached'),
onEndReachedThreshold: 0,
};
- const ref = React.useRef(null);
+ const ref = useRef(null);
const onTest = () => {
const scrollResponder = ref?.current?.getScrollResponder();
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-scrollable.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-scrollable.js
index 6a1bd9806fd..565646e6fb1 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-scrollable.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-scrollable.js
@@ -28,6 +28,7 @@ import {
import RNTesterPage from '../../components/RNTesterPage';
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
+import {useRef, useState} from 'react';
import {
Alert,
Animated,
@@ -178,12 +179,12 @@ export function SectionList_scrollable(Props: {...}): React.MixedElement {
[{nativeEvent: {contentOffset: {y: scrollPos}}}],
{useNativeDriver: true},
);
- const [filterText, setFilterText] = React.useState('');
- const [virtualized, setVirtualized] = React.useState(true);
- const [logViewable, setLogViewable] = React.useState(false);
- const [debug, setDebug] = React.useState(false);
- const [inverted, setInverted] = React.useState(false);
- const [data, setData] = React.useState(genNewerItems(1000));
+ const [filterText, setFilterText] = useState('');
+ const [virtualized, setVirtualized] = useState(true);
+ const [logViewable, setLogViewable] = useState(false);
+ const [debug, setDebug] = useState(false);
+ const [inverted, setInverted] = useState(false);
+ const [data, setData] = useState(genNewerItems(1000));
const filterRegex = new RegExp(String(filterText), 'i');
const filter = (item: Item) =>
@@ -212,7 +213,7 @@ export function SectionList_scrollable(Props: {...}): React.MixedElement {
setData([...data.slice(0, index), item, ...data.slice(index + 1)]);
};
- const ref = React.useRef>>(null);
+ const ref = useRef>>(null);
const scrollToLocation = (sectionIndex: number, itemIndex: number) => {
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
if (ref != null && ref.current?.scrollToLocation != null) {
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js
index dcd5b89aa0d..4ccd4f34008 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-stickyHeadersEnabled.js
@@ -9,14 +9,14 @@
*/
'use strict';
+
import SectionListBaseExample from './SectionListBaseExample';
import * as React from 'react';
+import {useState} from 'react';
export function SectionList_stickySectionHeadersEnabled(): React.Node {
- const [output, setOutput] = React.useState(
- 'stickySectionHeadersEnabled false',
- );
- const [exampleProps, setExampleProps] = React.useState({
+ const [output, setOutput] = useState('stickySectionHeadersEnabled false');
+ const [exampleProps, setExampleProps] = useState({
stickySectionHeadersEnabled: false,
});
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionList-withSeparators.js b/packages/@react-native/tester/js/examples/SectionList/SectionList-withSeparators.js
index 80358011cc9..c7823baf1de 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionList-withSeparators.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionList-withSeparators.js
@@ -10,6 +10,7 @@
import SectionListBaseExample from './SectionListBaseExample';
import * as React from 'react';
+import {useRef} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const Separator =
@@ -37,7 +38,7 @@ export function SectionList_withSeparators(): React.Node {
ItemSeparatorComponent: Separator('lightgreen', 'green', false),
SectionSeparatorComponent: Separator('lightblue', 'blue', true),
};
- const ref = React.useRef(null);
+ const ref = useRef(null);
return ;
}
diff --git a/packages/@react-native/tester/js/examples/SectionList/SectionListBaseExample.js b/packages/@react-native/tester/js/examples/SectionList/SectionListBaseExample.js
index de078de0061..23c11894e81 100644
--- a/packages/@react-native/tester/js/examples/SectionList/SectionListBaseExample.js
+++ b/packages/@react-native/tester/js/examples/SectionList/SectionListBaseExample.js
@@ -77,7 +77,14 @@ const SectionListBaseExample: component(
// $FlowIgnore[unclear-type]
ref: React.RefSetter>,
...props: Props
-) = React.forwardRef((props: Props, ref): React.Node => {
+) = ({
+ ref,
+ ...props
+}: {
+ // $FlowIgnore[unclear-type]
+ ref: React.RefSetter>,
+ ...Props,
+}): React.Node => {
return (
{props.testOutput != null ? (
@@ -112,7 +119,7 @@ const SectionListBaseExample: component(
/>
);
-});
+};
const styles = StyleSheet.create({
item: {
diff --git a/packages/@react-native/tester/js/examples/Share/ShareExample.js b/packages/@react-native/tester/js/examples/Share/ShareExample.js
index 0b470daba98..720fbb36685 100644
--- a/packages/@react-native/tester/js/examples/Share/ShareExample.js
+++ b/packages/@react-native/tester/js/examples/Share/ShareExample.js
@@ -12,6 +12,7 @@
import RNTesterText from '../../components/RNTesterText';
import React from 'react';
+import {useState} from 'react';
import {Button, Share, StyleSheet, View} from 'react-native';
const shareMessage = () => {
@@ -81,7 +82,7 @@ const ShareMessageWithTitle = () => {
};
const SharedAction = () => {
- const [shared, setShared] = React.useState();
+ const [shared, setShared] = useState();
const sharedAction = async () => {
try {
diff --git a/packages/@react-native/tester/js/examples/SwipeableCardExample/SwipeableCardExample.js b/packages/@react-native/tester/js/examples/SwipeableCardExample/SwipeableCardExample.js
index ffc872314b2..df711a3a887 100644
--- a/packages/@react-native/tester/js/examples/SwipeableCardExample/SwipeableCardExample.js
+++ b/packages/@react-native/tester/js/examples/SwipeableCardExample/SwipeableCardExample.js
@@ -11,6 +11,7 @@
import type {ListRenderItemInfo} from 'react-native';
import * as React from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
import {
Animated,
FlatList,
@@ -43,7 +44,7 @@ module.exports = {
function SwipeableCardExample() {
const cardColors = ['red', 'blue', 'pink', 'aquamarine'];
- const [currentIndex, setCurrentIndex] = React.useState(0);
+ const [currentIndex, setCurrentIndex] = useState(0);
const nextIndex = currentIndex + 1;
@@ -87,10 +88,9 @@ function SwipeableCard(props: {
color: string,
onSwipedOut: () => void,
}) {
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const movementX = React.useMemo(() => new Animated.Value(0), [props.color]);
+ const movementX = useMemo(() => new Animated.Value(0), []);
- const panResponder = React.useMemo(
+ const panResponder = useMemo(
() =>
PanResponder.create({
onMoveShouldSetPanResponderCapture: (e, gestureState) => {
@@ -148,9 +148,9 @@ function Card(props: {color: string}) {
const separatorComponent = () => ;
- const listRef = React.useRef>();
+ const listRef = useRef>();
- React.useEffect(() => {
+ useEffect(() => {
listRef.current?.scrollToOffset({offset: 0, animated: false});
}, [props.color]);
diff --git a/packages/@react-native/tester/js/examples/Text/TextExample.android.js b/packages/@react-native/tester/js/examples/Text/TextExample.android.js
index 0c5445c461f..6e2e1287a3d 100644
--- a/packages/@react-native/tester/js/examples/Text/TextExample.android.js
+++ b/packages/@react-native/tester/js/examples/Text/TextExample.android.js
@@ -16,7 +16,7 @@ import hotdog from '../../assets/hotdog.jpg';
import RNTesterText from '../../components/RNTesterText';
import TextLegend from '../../components/TextLegend';
import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
-import TextInlineViewsExample from './TextInlineViewsExample';
+import TextSharedExamples from './TextSharedExamples';
const TextInlineView = require('../../components/TextInlineView');
const React = require('react');
@@ -1461,13 +1461,6 @@ const examples = [
return ;
},
},
- {
- title: 'Empty Text',
- name: 'emptyText',
- render(): React.Node {
- return ;
- },
- },
{
title: 'Toggling Attributes',
name: 'togglingAttributes',
@@ -1713,7 +1706,7 @@ const examples = [
);
},
},
- TextInlineViewsExample,
+ ...TextSharedExamples,
];
const styles = StyleSheet.create({
diff --git a/packages/@react-native/tester/js/examples/Text/TextExample.ios.js b/packages/@react-native/tester/js/examples/Text/TextExample.ios.js
index 3d98b57dd01..33312e9eb92 100644
--- a/packages/@react-native/tester/js/examples/Text/TextExample.ios.js
+++ b/packages/@react-native/tester/js/examples/Text/TextExample.ios.js
@@ -15,7 +15,7 @@ import type {RNTesterModule} from '../../types/RNTesterTypes';
import hotdog from '../../assets/hotdog.jpg';
import RNTesterText from '../../components/RNTesterText';
import TextLegend from '../../components/TextLegend';
-import TextInlineViewsExample from './TextInlineViewsExample';
+import TextSharedExamples from './TextSharedExamples';
const TextInlineView = require('../../components/TextInlineView');
const React = require('react');
@@ -1063,13 +1063,6 @@ const examples = [
);
},
},
- {
- title: 'Empty Text',
- description: "It's ok to have Text with zero or null children.",
- render: function (): React.Node {
- return ;
- },
- },
{
title: 'Toggling Attributes',
render: function (): React.MixedElement {
@@ -1590,7 +1583,7 @@ const examples = [
);
},
},
- TextInlineViewsExample,
+ ...TextSharedExamples,
];
module.exports = ({
diff --git a/packages/@react-native/tester/js/examples/Text/TextInlineViewsExample.js b/packages/@react-native/tester/js/examples/Text/TextInlineViewsExample.js
deleted file mode 100644
index bb467916696..00000000000
--- a/packages/@react-native/tester/js/examples/Text/TextInlineViewsExample.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * @flow strict-local
- */
-
-import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
-
-import * as React from 'react';
-import {Text, View} from 'react-native';
-
-function InlineView(props: {
- textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify',
- long?: boolean,
-}): React.Node {
- return (
-
-
- Parent
- Child
-
- Child
- {props !== null && props.long === true && (
-
- aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas
-
- )}
-
-
- );
-}
-
-export function TextInlineViewsExample(props: {}): React.Node {
- return (
- <>
-
- BoringLayout
-
-
-
-
-
- StaticLayout
-
-
-
-
-
- >
- );
-}
-
-export default ({
- title: 'TextInlineViewsExample',
- name: 'inlineViews',
- description:
- ('Shows how inline views are rendered when text is subject to alignment.': string),
- expect: 'The red box should align correctly with the rest of the text.',
- render: (): React.Node => ,
-}: RNTesterModuleExample);
diff --git a/packages/@react-native/tester/js/examples/Text/TextSharedExamples.js b/packages/@react-native/tester/js/examples/Text/TextSharedExamples.js
new file mode 100644
index 00000000000..edd1899a050
--- /dev/null
+++ b/packages/@react-native/tester/js/examples/Text/TextSharedExamples.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+import type {RNTesterModuleExample} from '../../types/RNTesterTypes';
+
+import RNTesterText from '../../components/RNTesterText';
+import {useTheme} from '../../components/RNTesterTheme';
+import {View} from 'react-native';
+
+function InlineView(props: {
+ textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify',
+ long?: boolean,
+}): React.Node {
+ return (
+
+
+ Parent
+ Child
+
+ Child
+ {props !== null && props.long === true && (
+
+ aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas
+
+ )}
+
+
+ );
+}
+
+function TextInlineViewsExample(props: {}): React.Node {
+ return (
+
+
+ BoringLayout
+
+
+
+
+
+
+
+ StaticLayout
+
+
+
+
+
+
+ );
+}
+
+function EmptyTextExample(): React.Node {
+ const {BorderColor} = useTheme();
+ return (
+
+ );
+}
+
+export default [
+ {
+ title: 'Empty Text',
+ name: 'emptyText',
+ render: EmptyTextExample,
+ },
+ {
+ title: 'TextInlineViewsExample',
+ name: 'inlineViews',
+ description:
+ 'Shows how inline views are rendered when text is subject to alignment.',
+ expect: 'The red box should align correctly with the rest of the text.',
+ render: TextInlineViewsExample,
+ },
+] as $ReadOnlyArray;
diff --git a/packages/@react-native/tester/js/examples/TextInput/ExampleTextInput.js b/packages/@react-native/tester/js/examples/TextInput/ExampleTextInput.js
index 993e9e69d69..037ea0f9d40 100644
--- a/packages/@react-native/tester/js/examples/TextInput/ExampleTextInput.js
+++ b/packages/@react-native/tester/js/examples/TextInput/ExampleTextInput.js
@@ -6,17 +6,22 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
import {RNTesterThemeContext} from '../../components/RNTesterTheme';
-import React, {forwardRef, useContext} from 'react';
+import React, {useContext} from 'react';
import {StyleSheet, TextInput} from 'react-native';
const ExampleTextInput: component(
ref: React.RefSetter>,
...props: React.ElementConfig
-) = forwardRef((props, ref) => {
+) = ({
+ ref,
+ ...props
+}: {
+ ref?: React.RefSetter>,
+ ...React.ElementConfig,
+}) => {
const theme = useContext(RNTesterThemeContext);
return (
@@ -34,7 +39,7 @@ const ExampleTextInput: component(
]}
/>
);
-});
+};
const styles = StyleSheet.create({
input: {
diff --git a/packages/@react-native/tester/js/examples/TextInput/TextInputExample.android.js b/packages/@react-native/tester/js/examples/TextInput/TextInputExample.android.js
index 948635ff940..025215a1df8 100644
--- a/packages/@react-native/tester/js/examples/TextInput/TextInputExample.android.js
+++ b/packages/@react-native/tester/js/examples/TextInput/TextInputExample.android.js
@@ -18,10 +18,11 @@ import type {
import ExampleTextInput from './ExampleTextInput';
import TextInputSharedExamples from './TextInputSharedExamples';
import React from 'react';
+import {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
const ToggleDefaultPaddingExample = (): React.Node => {
- const [hasPadding, setHasPadding] = React.useState(false);
+ const [hasPadding, setHasPadding] = useState(false);
return (
diff --git a/packages/@react-native/tester/js/examples/TextInput/TextInputExample.ios.js b/packages/@react-native/tester/js/examples/TextInput/TextInputExample.ios.js
index 28eaa39d487..eadeccba109 100644
--- a/packages/@react-native/tester/js/examples/TextInput/TextInputExample.ios.js
+++ b/packages/@react-native/tester/js/examples/TextInput/TextInputExample.ios.js
@@ -20,6 +20,7 @@ import RNTesterText from '../../components/RNTesterText';
import ExampleTextInput from './ExampleTextInput';
import TextInputSharedExamples from './TextInputSharedExamples';
import React from 'react';
+import {useRef} from 'react';
import {
Alert,
Button,
@@ -210,9 +211,9 @@ class SecureEntryExample extends React.Component<$FlowFixMeProps, any> {
}
const TextInputWithFocusButton = () => {
- const inputToFocusRef = React.useRef | null>(null);
+ const inputToFocusRef = useRef | null>(
+ null,
+ );
return (
};
class BlurOnSubmitExample extends React.Component<{...}> {
- ref1: ExampleRef = React.createRef();
- ref2: ExampleRef = React.createRef();
- ref3: ExampleRef = React.createRef();
- ref4: ExampleRef = React.createRef();
- ref5: ExampleRef = React.createRef();
+ ref1: ExampleRef = createRef();
+ ref2: ExampleRef = createRef();
+ ref3: ExampleRef = createRef();
+ ref4: ExampleRef = createRef();
+ ref5: ExampleRef = createRef();
render(): React.Node {
return (
@@ -272,17 +272,17 @@ class BlurOnSubmitExample extends React.Component<{...}> {
}
class SubmitBehaviorExample extends React.Component<{...}> {
- ref1: ExampleRef = React.createRef();
- ref2: ExampleRef = React.createRef();
- ref3: ExampleRef = React.createRef();
- ref4: ExampleRef = React.createRef();
- ref5: ExampleRef = React.createRef();
- ref6: ExampleRef = React.createRef();
- ref7: ExampleRef = React.createRef();
- ref8: ExampleRef = React.createRef();
- ref9: ExampleRef = React.createRef();
- ref10: ExampleRef = React.createRef();
- ref11: ExampleRef = React.createRef();
+ ref1: ExampleRef = createRef();
+ ref2: ExampleRef = createRef();
+ ref3: ExampleRef = createRef();
+ ref4: ExampleRef = createRef();
+ ref5: ExampleRef = createRef();
+ ref6: ExampleRef = createRef();
+ ref7: ExampleRef = createRef();
+ ref8: ExampleRef = createRef();
+ ref9: ExampleRef = createRef();
+ ref10: ExampleRef = createRef();
+ ref11: ExampleRef = createRef();
render(): React.Node {
return (
@@ -608,7 +608,7 @@ class SelectionExample extends React.Component<
}
function UncontrolledExample() {
- const [isFocused, setIsFocused] = React.useState(false);
+ const [isFocused, setIsFocused] = useState(false);
return (
{
+const TextStylesExample = memo(() => {
const theme = useContext(RNTesterThemeContext);
return (
@@ -887,10 +887,10 @@ function AutogrowingTextInputExample({
style,
...props
}: React.ElementConfig) {
- const [multiline, setMultiline] = React.useState(true);
- const [fullWidth, setFullWidth] = React.useState(true);
- const [text, setText] = React.useState('');
- const [contentSize, setContentSize] = React.useState({width: 0, height: 0});
+ const [multiline, setMultiline] = useState(true);
+ const [fullWidth, setFullWidth] = useState(true);
+ const [text, setText] = useState('');
+ const [contentSize, setContentSize] = useState({width: 0, height: 0});
return (
diff --git a/packages/@react-native/tester/js/examples/Transform/TransformExample.js b/packages/@react-native/tester/js/examples/Transform/TransformExample.js
index 21b70de5d61..e1a844e1ce8 100644
--- a/packages/@react-native/tester/js/examples/Transform/TransformExample.js
+++ b/packages/@react-native/tester/js/examples/Transform/TransformExample.js
@@ -8,7 +8,8 @@
* @flow
*/
-import React, {useEffect, useState} from 'react';
+import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
import {Animated, Easing, StyleSheet, Text, View} from 'react-native';
function AnimateTransformSingleProp() {
@@ -49,7 +50,7 @@ function AnimateTransformSingleProp() {
}
function TransformOriginExample() {
- const rotateAnim = React.useRef(new Animated.Value(0)).current;
+ const rotateAnim = useRef(new Animated.Value(0)).current;
useEffect(() => {
Animated.loop(
diff --git a/packages/@react-native/tester/js/types/RNTesterTypes.js b/packages/@react-native/tester/js/types/RNTesterTypes.js
index e9635c2b106..9d8362bac43 100644
--- a/packages/@react-native/tester/js/types/RNTesterTypes.js
+++ b/packages/@react-native/tester/js/types/RNTesterTypes.js
@@ -8,8 +8,6 @@
* @flow strict-local
*/
-import * as React from 'react';
-
export type RNTesterModuleExample = $ReadOnly<{
name?: string,
title: string,
@@ -18,7 +16,7 @@ export type RNTesterModuleExample = $ReadOnly<{
expect?: string,
hidden?: boolean,
scrollable?: boolean,
- render: ({testID?: ?string}) => React.Node,
+ render: component(),
}>;
export type RNTesterModule = $ReadOnly<{
diff --git a/packages/@react-native/tester/js/utils/RNTesterList.ios.js b/packages/@react-native/tester/js/utils/RNTesterList.ios.js
index f3e23baac4f..3ffb079f547 100644
--- a/packages/@react-native/tester/js/utils/RNTesterList.ios.js
+++ b/packages/@react-native/tester/js/utils/RNTesterList.ios.js
@@ -146,6 +146,11 @@ const Components: Array = [
category: 'UI',
module: require('../examples/NewArchitecture/NewArchitectureExample'),
},
+ {
+ key: 'FabricInteropLayer',
+ category: 'UI',
+ module: require('../examples/FabricInteropLayer/FabricInteropLayer'),
+ },
{
key: 'PerformanceComparisonExample',
category: 'Basic',
diff --git a/packages/@react-native/tester/js/utils/RNTesterListFbInternal.js b/packages/@react-native/tester/js/utils/RNTesterListFbInternal.js
index 8e359256c02..4adaa9c2d46 100644
--- a/packages/@react-native/tester/js/utils/RNTesterListFbInternal.js
+++ b/packages/@react-native/tester/js/utils/RNTesterListFbInternal.js
@@ -6,7 +6,6 @@
*
* @flow strict-local
* @format
- * @oncall react_native
*/
import type {RNTesterModuleInfo} from '../types/RNTesterTypes';
diff --git a/packages/@react-native/tester/js/utils/useJsStalls.js b/packages/@react-native/tester/js/utils/useJsStalls.js
index e8c4a7fdd27..7f602ac5c63 100644
--- a/packages/@react-native/tester/js/utils/useJsStalls.js
+++ b/packages/@react-native/tester/js/utils/useJsStalls.js
@@ -10,7 +10,7 @@
import type {RNTesterJsStallsState} from '../types/RNTesterTypes';
-import * as React from 'react';
+import {useCallback, useEffect, useState} from 'react';
const INITIAL_STATE: RNTesterJsStallsState = {
stallIntervalId: null,
@@ -30,20 +30,20 @@ const useJsStalls = (): ({
state: RNTesterJsStallsState,
}) => {
const [stallsState, setStallsState] =
- React.useState(INITIAL_STATE);
+ useState(INITIAL_STATE);
const {stallIntervalId} = stallsState;
- React.useEffect(() => {
+ useEffect(() => {
return () => clearInterval(stallIntervalId);
}, [stallIntervalId]);
- const onDisableForceJsStalls = React.useCallback(
+ const onDisableForceJsStalls = useCallback(
() => setStallsState(state => ({...state, stallIntervalId: null})),
[],
);
- const onEnableForceJsStalls = React.useCallback(() => {
+ const onEnableForceJsStalls = useCallback(() => {
const intervalId = setInterval(() => {
const start = Date.now();
@@ -55,7 +55,7 @@ const useJsStalls = (): ({
setStallsState(state => ({...state, stallIntervalId: intervalId}));
}, []);
- const onEnableJsStallsTracking = React.useCallback(() => {
+ const onEnableJsStallsTracking = useCallback(() => {
const JSEventLoopWatchdog =
require('react-native/Libraries/Interaction/JSEventLoopWatchdog').default;
@@ -82,7 +82,7 @@ const useJsStalls = (): ({
});
}, []);
- const onDisableJsStallsTracking = React.useCallback(() => {
+ const onDisableJsStallsTracking = useCallback(() => {
console.warn('Cannot disable yet...');
}, []);
diff --git a/packages/@react-native/tester/overrides.json b/packages/@react-native/tester/overrides.json
index 59bd40acc7e..4a0c220fbbf 100644
--- a/packages/@react-native/tester/overrides.json
+++ b/packages/@react-native/tester/overrides.json
@@ -1,5 +1,5 @@
{
- "baseVersion": "0.80.0-nightly-20250506-3ac16dd6a",
+ "baseVersion": "0.81.0-nightly-20250521-3cb70bb6a",
"overrides": [
{
"type": "copy",
@@ -12,21 +12,21 @@
"type": "copy",
"directory": "js/components",
"baseDirectory": "packages/rn-tester/js/components",
- "baseHash": "733be94f82fc7a7dbf24fc09afa79597c26b2a53",
+ "baseHash": "c736a4825f4e72864c05d2df0d5b4077075ec3c4",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/Accessibility",
"baseDirectory": "packages/rn-tester/js/examples/Accessibility",
- "baseHash": "9ad5bec8942351ffd651632a7629581722f035cb",
+ "baseHash": "f1095a492e55ecf9a950171076c3ebd09627bd04",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/ActionSheetIOS",
"baseDirectory": "packages/rn-tester/js/examples/ActionSheetIOS",
- "baseHash": "e278ed7aaecc90529ce5bc548f9d277bc9e16fc1",
+ "baseHash": "284ffb9aef4f7ac10cdb3606124af1f0a8dad231",
"issue": 4054
},
{
@@ -40,14 +40,14 @@
"type": "copy",
"directory": "js/examples/Alert",
"baseDirectory": "packages/rn-tester/js/examples/Alert",
- "baseHash": "6b91f55baed6720cd5d01dfa1fadbd4c2f073fe4",
+ "baseHash": "e6b2ca8b22895574e7b13e0f2b68e628689992fd",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/Animated",
"baseDirectory": "packages/rn-tester/js/examples/Animated",
- "baseHash": "30b2851a876e66731c019f9daa12b9558489f4e5",
+ "baseHash": "887588a46283f20f5af16aae88ff8dfabc782408",
"issue": 4054
},
{
@@ -68,7 +68,7 @@
"type": "copy",
"directory": "js/examples/AppState",
"baseDirectory": "packages/rn-tester/js/examples/AppState",
- "baseHash": "fe70acb5cebfb2bfff126e19d9e507143c4e1600",
+ "baseHash": "38fdf6aadfc305752480b482b9dc252a09ee0cf3",
"issue": 4054
},
{
@@ -96,7 +96,7 @@
"type": "copy",
"directory": "js/examples/ContentURLAndroid",
"baseDirectory": "packages/rn-tester/js/examples/ContentURLAndroid",
- "baseHash": "82643ca842d7ca5cbf5933574fb2e2420567ed95",
+ "baseHash": "63d75106646d06fcc186a2e7f2b454f22ab6d282",
"issue": 14844
},
{
@@ -145,28 +145,28 @@
"type": "copy",
"directory": "js/examples/Experimental",
"baseDirectory": "packages/rn-tester/js/examples/Experimental",
- "baseHash": "c78c895640567ade579aa800a41a008334ab603c",
+ "baseHash": "bcaf7e221089ff42936eae1f96913e83f9b03d06",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/Filter",
"baseDirectory": "packages/rn-tester/js/examples/Filter",
- "baseHash": "131051d070a95aae095d76b9a7fd67d01396097d",
+ "baseHash": "4e894d7113a0f6a789741f93ed2d5a7c1885d525",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/FlatList",
"baseDirectory": "packages/rn-tester/js/examples/FlatList",
- "baseHash": "873f394a0b0f159b0d89f461814aeef68d0891ac",
+ "baseHash": "0a7cd01bacf7616e1f5abf7f80ade2bb5834b73f",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/Image",
"baseDirectory": "packages/rn-tester/js/examples/Image",
- "baseHash": "9f9b71f8490ecac737d4eff9b6b5092aed2ab281",
+ "baseHash": "7a12041bc339370fd9ecaf2d99682a08d47fb536",
"issue": 4054
},
{
@@ -222,14 +222,14 @@
"type": "copy",
"directory": "js/examples/Linking",
"baseDirectory": "packages/rn-tester/js/examples/Linking",
- "baseHash": "60513b510bbb62fdfe22b558cb675162ba37d7a2",
+ "baseHash": "b40ecf99f8824a8db920674d40dc0a401fec1207",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/MixBlendMode",
"baseDirectory": "packages/rn-tester/js/examples/MixBlendMode",
- "baseHash": "62f7b5128c7dcc35e4b30fc1a97e4a579595f437",
+ "baseHash": "c1b37073287e3ba9e21e299160b61258a833b3c7",
"issue": 4054
},
{
@@ -285,20 +285,20 @@
"type": "copy",
"directory": "js/examples/Performance",
"baseDirectory": "packages/rn-tester/js/examples/Performance",
- "baseHash": "02493cc3b5da3e7360380e76f3bf8a38e749c1d5"
+ "baseHash": "16d0d12a559979ef4126c7e913bcf4d115d391ba"
},
{
"type": "copy",
"directory": "js/examples/PermissionsAndroid",
"baseDirectory": "packages/rn-tester/js/examples/PermissionsAndroid",
- "baseHash": "85f13dace4f486b5fc6bd476052bdd16f501c5e6",
+ "baseHash": "3245c9968c8e4efec115ee3a4c514d7c3af079c1",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/PixelRatio",
"baseDirectory": "packages/rn-tester/js/examples/PixelRatio",
- "baseHash": "7527bad4268362635fdb789917ef785bf09fc1f7",
+ "baseHash": "8309ac200bdd9bd2d301af8a970407652bf2eb2c",
"issue": 4054
},
{
@@ -312,7 +312,7 @@
"type": "copy",
"directory": "js/examples/Playground",
"baseDirectory": "packages/rn-tester/js/examples/Playground",
- "baseHash": "f040917b3d5bb020105a6e391f1398676d063149",
+ "baseHash": "6765fcbeceefd44838d1ae3584dcf919b6834160",
"issue": 4054
},
{
@@ -326,7 +326,7 @@
"type": "copy",
"directory": "js/examples/PopupMenuAndroid",
"baseDirectory": "packages/rn-tester/js/examples/PopupMenuAndroid",
- "baseHash": "3b92b70cf01a818d7aae901c716a2819096872b2",
+ "baseHash": "8963a594b5b945b00044e92c2a789438c56ca5a5",
"issue": 4054
},
{
@@ -368,21 +368,21 @@
"type": "copy",
"directory": "js/examples/SafeAreaView",
"baseDirectory": "packages/rn-tester/js/examples/SafeAreaView",
- "baseHash": "4df33da99a390e2a6d63cb29cce7332128f2045f",
+ "baseHash": "2a360fd4548a4056093e797a79a0751a5c47e7d8",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/ScrollView",
"baseDirectory": "packages/rn-tester/js/examples/ScrollView",
- "baseHash": "1dbe14827aa2ce436656ba7dbad7390302d2e9b2",
+ "baseHash": "1611d03fd3ffe4c07b29464cbaf557afb78e6309",
"issue": 4054
},
{
"type": "copy",
"directory": "js/examples/SectionList",
"baseDirectory": "packages/rn-tester/js/examples/SectionList",
- "baseHash": "c8bbef6b49ebcd74a152f4d5880fff3884185afa",
+ "baseHash": "5203607e8d11ac017e1fd8f6d4161d638285ad63",
"issue": 4054
},
{
@@ -396,7 +396,7 @@
"type": "copy",
"directory": "js/examples/Share",
"baseDirectory": "packages/rn-tester/js/examples/Share",
- "baseHash": "b855f82cd71dcf21532b4f76d4ae5ae675322f71",
+ "baseHash": "af46b3e117209e278c8ee7b1f5587d861f80f9ee",
"issue": 4054
},
{
@@ -417,7 +417,7 @@
"type": "copy",
"directory": "js/examples/SwipeableCardExample",
"baseDirectory": "packages/rn-tester/js/examples/SwipeableCardExample",
- "baseHash": "3d29f97ce8ece71848ee1849d9357c9d5431484b",
+ "baseHash": "d38ac95f729475513331784eb1f557fa9a06f8b1",
"issue": 4054
},
{
@@ -431,28 +431,28 @@
"type": "copy",
"directory": "js/examples/Text",
"baseDirectory": "packages/rn-tester/js/examples/Text",
- "baseHash": "9f90a3af870c1efe28bc29b30abf3cb874820978",
+ "baseHash": "f49a475fb5f55882b02e98df7357a0dbcea25cdf",
"issue": 4054
},
{
"type": "copy",
"file": "js/examples/TextInput/ExampleTextInput.js",
"baseFile": "packages/rn-tester/js/examples/TextInput/ExampleTextInput.js",
- "baseHash": "15edc74a957b755f70751498da6048214a8f2b8a",
+ "baseHash": "07f3b91f5f3295f91da6c3fb23d4d7e2c8381db9",
"issue": 14292
},
{
"type": "copy",
"file": "js/examples/TextInput/TextInputExample.android.js",
"baseFile": "packages/rn-tester/js/examples/TextInput/TextInputExample.android.js",
- "baseHash": "8cc115a30795ee2fcf174e91f9cdbf56f4513a93",
+ "baseHash": "ed91ff793aa3c1305d75f795be74adcffe540edb",
"issue": 14292
},
{
"type": "copy",
"file": "js/examples/TextInput/TextInputExample.ios.js",
"baseFile": "packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js",
- "baseHash": "08c15ffc55a4e51c40d874739e5115e110e6112c",
+ "baseHash": "be6ad2afc1d45d2ccfcfd6e8092e473497100439",
"issue": 14292
},
{
@@ -473,7 +473,7 @@
"type": "patch",
"file": "js/examples/TextInput/TextInputSharedExamples.js",
"baseFile": "packages/rn-tester/js/examples/TextInput/TextInputSharedExamples.js",
- "baseHash": "d99f7475f11f58e4f17cc0ce374a600841970497",
+ "baseHash": "0fb3edd66da2973878dbb6d04358b656dccb21f3",
"issue": 14291
},
{
@@ -501,7 +501,7 @@
"type": "copy",
"directory": "js/examples/Transform",
"baseDirectory": "packages/rn-tester/js/examples/Transform",
- "baseHash": "8ee0e258d482c070beacb405f020908d1cf6c657",
+ "baseHash": "9c5bc36e3173eb09deea87baac7b669823f47919",
"issue": 4054
},
{
@@ -570,14 +570,14 @@
"type": "copy",
"file": "js/RNTesterAppShared.js",
"baseFile": "packages/rn-tester/js/RNTesterAppShared.js",
- "baseHash": "107518f3c54b8f31cdc93081f1fd8dd6d2bb5dd9",
+ "baseHash": "68a13d2fb7a8f2a9e729bbfe490c9654f9b2bec4",
"issue": 4054
},
{
"type": "copy",
"directory": "js/types",
"baseDirectory": "packages/rn-tester/js/types",
- "baseHash": "ce2c43009937f94ce98bbcc4e672339e628cd7db",
+ "baseHash": "e61749e70d51ffe95b383c32d4956a2beddb72df",
"issue": 4054
},
{
@@ -591,7 +591,7 @@
"type": "patch",
"file": "js/utils/RNTesterList.ios.js",
"baseFile": "packages/rn-tester/js/utils/RNTesterList.ios.js",
- "baseHash": "1f5aafb1dd9a476bd9df3a4e2b61af1b4c529b02",
+ "baseHash": "789dae4f7e58c8db55f121907fa923294ca69ac1",
"issue": 13228
},
{
@@ -605,7 +605,7 @@
"type": "copy",
"file": "js/utils/RNTesterListFbInternal.js",
"baseFile": "packages/rn-tester/js/utils/RNTesterListFbInternal.js",
- "baseHash": "fe9f56b0fbc6677a817f9fdaf020185b9c8ffb58",
+ "baseHash": "8bd6d15a7f1a47e00e9cc53d68269536d4cf9023",
"issue": 0
},
{
@@ -626,7 +626,7 @@
"type": "copy",
"file": "js/utils/useJsStalls.js",
"baseFile": "packages/rn-tester/js/utils/useJsStalls.js",
- "baseHash": "249b933993f4fe9d91e6e443035c27dfcdd2d65c",
+ "baseHash": "bbe8c5e4a0cb5f27a967a43c7953efada69927d9",
"issue": 4054
},
{
diff --git a/packages/e2e-test-app-fabric/package.json b/packages/e2e-test-app-fabric/package.json
index 1de3d397d9e..ee005dd09b3 100644
--- a/packages/e2e-test-app-fabric/package.json
+++ b/packages/e2e-test-app-fabric/package.json
@@ -20,7 +20,7 @@
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"react": "^19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984"
},
"devDependencies": {
diff --git a/packages/e2e-test-app/package.json b/packages/e2e-test-app/package.json
index f9b8d8c46e4..da262500170 100644
--- a/packages/e2e-test-app/package.json
+++ b/packages/e2e-test-app/package.json
@@ -20,7 +20,7 @@
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"react": "^19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984",
"react-native-xaml": "^0.0.80"
},
diff --git a/packages/integration-test-app/package.json b/packages/integration-test-app/package.json
index a6d65cf822f..1c36d46780f 100644
--- a/packages/integration-test-app/package.json
+++ b/packages/integration-test-app/package.json
@@ -17,7 +17,7 @@
"@typescript-eslint/parser": "^7.1.1",
"chai": "^4.2.0",
"react": "^19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984"
},
"devDependencies": {
diff --git a/packages/playground/package.json b/packages/playground/package.json
index dac1c2e0c43..c0898b5b3be 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -15,7 +15,7 @@
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"react": "^19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984"
},
"devDependencies": {
diff --git a/packages/sample-app-fabric/package.json b/packages/sample-app-fabric/package.json
index 7b95a86f025..930b6da9cd7 100644
--- a/packages/sample-app-fabric/package.json
+++ b/packages/sample-app-fabric/package.json
@@ -16,6 +16,8 @@
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"react": "^19.1.0",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
+ "react-native-windows": "^0.0.0-canary.979",
"react-native": "0.80.0-nightly-20250506-3ac16dd6a",
"react-native-windows": "^0.0.0-canary.984",
"@react-native/new-app-screen": "0.80.0-nightly-20250506-3ac16dd6a"
diff --git a/packages/sample-apps/package.json b/packages/sample-apps/package.json
index b7fd62f6397..b69b5765c5e 100644
--- a/packages/sample-apps/package.json
+++ b/packages/sample-apps/package.json
@@ -16,7 +16,7 @@
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"react": "^19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984"
},
"devDependencies": {
diff --git a/packages/sample-custom-component/package.json b/packages/sample-custom-component/package.json
index d12207af811..0e782281f16 100644
--- a/packages/sample-custom-component/package.json
+++ b/packages/sample-custom-component/package.json
@@ -22,7 +22,7 @@
"dependencies": {
"@types/react": "^19.1.0",
"react": "^19.1.0",
- "react-native": "0.80.0-nightly-20250506-3ac16dd6a",
+ "react-native": "0.81.0-nightly-20250521-3cb70bb6a",
"react-native-windows": "^0.0.0-canary.984"
},
"devDependencies": {
diff --git a/vnext/.flowconfig b/vnext/.flowconfig
index a0ace835e0e..7b0148f3e08 100644
--- a/vnext/.flowconfig
+++ b/vnext/.flowconfig
@@ -169,4 +169,4 @@ untyped-import
untyped-type-import
[version]
-^0.269.1
+^0.271.0
diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.cpp b/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.cpp
index 0c440fc3cad..5f8b47f047b 100644
--- a/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.cpp
+++ b/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.cpp
@@ -55,7 +55,7 @@ std::shared_ptr AbiComponentDescriptor::createShado
return shadowNode;
}
-facebook::react::ShadowNode::Unshared AbiComponentDescriptor::cloneShadowNode(
+std::shared_ptr AbiComponentDescriptor::cloneShadowNode(
const facebook::react::ShadowNode &sourceShadowNode,
const facebook::react::ShadowNodeFragment &fragment) const {
auto shadowNode = std::make_shared(sourceShadowNode, fragment);
diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.h b/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.h
index e51d5d24671..b0e2cf3bbdb 100644
--- a/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.h
+++ b/vnext/Microsoft.ReactNative/Fabric/AbiComponentDescriptor.h
@@ -32,7 +32,7 @@ class AbiComponentDescriptor : public facebook::react::ComponentDescriptor {
std::shared_ptr createShadowNode(
const facebook::react::ShadowNodeFragment &fragment,
facebook::react::ShadowNodeFamily::Shared const &family) const override;
- facebook::react::ShadowNode::Unshared cloneShadowNode(
+ std::shared_ptr cloneShadowNode(
const facebook::react::ShadowNode &sourceShadowNode,
const facebook::react::ShadowNodeFragment &fragment) const override;
diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiShadowNode.h b/vnext/Microsoft.ReactNative/Fabric/AbiShadowNode.h
index 4a685ae6887..ee139bb609b 100644
--- a/vnext/Microsoft.ReactNative/Fabric/AbiShadowNode.h
+++ b/vnext/Microsoft.ReactNative/Fabric/AbiShadowNode.h
@@ -46,7 +46,7 @@ struct ShadowNode : ShadowNodeT {
winrt::Microsoft::ReactNative::EventEmitter EventEmitter() const noexcept;
protected:
- facebook::react::ShadowNode::Weak m_shadowNode;
+ std::weak_ptr m_shadowNode;
winrt::Windows::Foundation::IInspectable m_tag;
};
diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h b/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h
index 96d2d8203f6..62771a5de58 100644
--- a/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h
+++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewComponentDescriptor.h
@@ -70,7 +70,7 @@ class ConcreteAbiViewComponentDescriptor : public facebook::react::ComponentDesc
return shadowNode;
}
- facebook::react::ShadowNode::Unshared cloneShadowNode(
+ std::shared_ptr cloneShadowNode(
const facebook::react::ShadowNode &sourceShadowNode,
const facebook::react::ShadowNodeFragment &fragment) const override {
auto shadowNode = std::make_shared(sourceShadowNode, fragment);
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h
index 0c230a135f6..dc21a55067b 100644
--- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentDescriptor.h
@@ -59,8 +59,8 @@ virtual State::Shared createInitialState(
}
return std::make_shared(
- std::make_shared(AndroidTextInputState(
- 0, {}, {}, {}, theme.start, theme.end, theme.top, theme.bottom)),
+ std::make_shared(
+ AndroidTextInputState({}, {}, {}, 0)),
family);
}
*/
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp
index f6d63902b5a..29e9f97120c 100644
--- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp
@@ -125,8 +125,8 @@ void WindowsTextInputShadowNode::updateStateIfNeeded(const LayoutContext &layout
// so no changes are applied There's no way to prevent a state update from
// flowing to Java, so we just ensure it's a noop in those cases.
- setStateData(facebook::react::TextInputState{
- AttributedStringBox(newAttributedString), reactTreeAttributedString, {}, newEventCount});
+ setStateData(
+ WindowsTextInputState{AttributedStringBox(newAttributedString), reactTreeAttributedString, {}, newEventCount});
}
AttributedString WindowsTextInputShadowNode::getAttributedString(const LayoutContext &layoutContext) const {
@@ -181,24 +181,28 @@ AttributedString WindowsTextInputShadowNode::getMostRecentAttributedString(const
return (!treeAttributedStringChanged ? state.attributedStringBox.getValue() : reactTreeAttributedString);
}
-// For measurement purposes, we want to make sure that there's at least a
-// single character in the string so that the measured height is greater
-// than zero. Otherwise, empty TextInputs with no placeholder don't
-// display at all.
-// TODO T67606511: We will redefine the measurement of empty strings as part
-// of T67606511
AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString(const LayoutContext &layoutContext) const {
- const auto &props = BaseShadowNode::getConcreteProps();
+ const auto &props = getConcreteProps();
AttributedString attributedString;
- auto placeholderString = !props.placeholder.empty() ? props.placeholder : BaseTextShadowNode::getEmptyPlaceholder();
- auto textAttributes = TextAttributes::defaultTextAttributes();
- textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
- textAttributes.apply(props.textAttributes);
- attributedString.appendFragment(
- {.string = std::move(placeholderString),
- .textAttributes = textAttributes,
- .parentShadowView = ShadowView(*this)});
+ //[windows
+ if (!props.placeholder.empty()) {
+ auto textAttributes = TextAttributes::defaultTextAttributes();
+ textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+ textAttributes.apply(props.textAttributes);
+
+ /*
+ * These props are applied to `View`, therefore they must not be a part of
+ * base text attributes.
+ */
+ textAttributes.backgroundColor = clearColor();
+ textAttributes.opacity = 1;
+
+ attributedString.appendFragment(
+ {.string = props.placeholder, .textAttributes = textAttributes, .parentShadowView = ShadowView(*this)});
+ }
+ // windows]
+
return attributedString;
}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.h
index 3c9077168df..95ca1149fd9 100644
--- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.h
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.h
@@ -4,14 +4,14 @@
#pragma once
#include
+#include "WindowsTextInputEventEmitter.h"
+#include "WindowsTextInputProps.h"
+#include "WindowsTextInputState.h"
#include
#include
-#include "WindowsTextInputEventEmitter.h"
-#include "WindowsTextInputProps.h"
#include
-#include
#include
#include
@@ -26,7 +26,7 @@ class WindowsTextInputShadowNode final : public ConcreteViewShadowNode<
WindowsTextInputComponentName,
WindowsTextInputProps,
WindowsTextInputEventEmitter,
- TextInputState> {
+ WindowsTextInputState> {
public:
using ConcreteViewShadowNode::ConcreteViewShadowNode;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.cpp
new file mode 100644
index 00000000000..c4e2bf7d5d8
--- /dev/null
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.cpp
@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "WindowsTextInputState.h"
+
+#include // [windows]
+
+namespace facebook::react {
+
+folly::dynamic WindowsTextInputState::getDynamic() const {
+ LOG(FATAL) << "TextInputState state should only be read using MapBuffer";
+ return folly::dynamic::object(); // windows
+}
+
+} // namespace facebook::react
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.h
new file mode 100644
index 00000000000..a1ff376ddf4
--- /dev/null
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.h
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include
+#include
+#include
+
+#include
+#include
+#include // [windows]
+
+namespace facebook::react {
+
+/*
+ * State for component.
+ */
+class WindowsTextInputState final {
+ public:
+ WindowsTextInputState() = default;
+
+ WindowsTextInputState(
+ AttributedStringBox attributedStringBox,
+ AttributedString reactTreeAttributedString,
+ ParagraphAttributes paragraphAttributes,
+ int64_t mostRecentEventCount)
+ : attributedStringBox(std::move(attributedStringBox)),
+ reactTreeAttributedString(std::move(reactTreeAttributedString)),
+ paragraphAttributes(std::move(paragraphAttributes)),
+ mostRecentEventCount(mostRecentEventCount) {}
+
+ WindowsTextInputState(const WindowsTextInputState &previousState, const folly::dynamic &data)
+ : attributedStringBox(previousState.attributedStringBox),
+ reactTreeAttributedString(previousState.reactTreeAttributedString),
+ paragraphAttributes(previousState.paragraphAttributes),
+ mostRecentEventCount(data.getDefault("mostRecentEventCount", previousState.mostRecentEventCount).getInt()),
+ cachedAttributedStringId(data.getDefault("opaqueCacheId", previousState.cachedAttributedStringId).getInt()) {}
+
+ folly::dynamic getDynamic() const;
+ MapBuffer getMapBuffer() const;
+
+ /*
+ * All content of component.
+ */
+ AttributedStringBox attributedStringBox;
+
+ /*
+ * All content of component represented as an `AttributedString`.
+ * This stores the previous computed *from the React tree*. This usually
+ * doesn't change as the TextInput contents are being updated. If it does
+ * change, we need to wipe out current contents of the TextInput and replace
+ * with the new value from the tree.
+ */
+ AttributedString reactTreeAttributedString{};
+
+ /*
+ * Represents all visual attributes of a paragraph of text represented as
+ * a ParagraphAttributes.
+ */
+ ParagraphAttributes paragraphAttributes;
+
+ int64_t mostRecentEventCount{0};
+
+ /**
+ * Stores an opaque cache ID used on the Java side to refer to a specific
+ * AttributedString for measurement purposes only.
+ */
+ int64_t cachedAttributedStringId{0};
+};
+
+} // namespace facebook::react
diff --git a/vnext/PropertySheets/React.Cpp.props b/vnext/PropertySheets/React.Cpp.props
index b0a653c2d4f..34e086a90e1 100644
--- a/vnext/PropertySheets/React.Cpp.props
+++ b/vnext/PropertySheets/React.Cpp.props
@@ -161,7 +161,7 @@
$(ReactNativeDir)\ReactCommon\react\renderer\components\view\platform\cxx;
$(ReactNativeDir)\ReactCommon\react\renderer\imagemanager\platform\cxx;
$(ReactNativeDir)\ReactCommon\react\renderer\components\text\platform\cxx;
- $(ReactNativeDir)\ReactCommon\react\renderer\components\text\platform\cxx\react\renderer\components\text;
+ $(ReactNativeDir)\ReactCommon\react\renderer\components\text\platform\android\react\renderer\components\text;
$(ReactNativeDir)\ReactCommon\react\renderer\textlayoutmanager\platform\cxx;
$(ReactNativeDir)\ReactCommon\react\utils\platform\cxx;
%(AdditionalIncludeDirectories);
diff --git a/vnext/ReactCommon/ReactCommon.vcxproj b/vnext/ReactCommon/ReactCommon.vcxproj
index eb7c536fd5b..d8369546ef6 100644
--- a/vnext/ReactCommon/ReactCommon.vcxproj
+++ b/vnext/ReactCommon/ReactCommon.vcxproj
@@ -206,9 +206,12 @@
-
+
+
+
+
diff --git a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp
index 4bf25095cc3..b398a6a4e14 100644
--- a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp
+++ b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/cxxreact/JSExecutor.cpp
@@ -58,7 +58,9 @@ void JSExecutor::disableSamplingProfiler() {
facebook::react::jsinspector_modern::tracing::RuntimeSamplingProfile JSExecutor::collectSamplingProfile() {
return facebook::react::jsinspector_modern::tracing::RuntimeSamplingProfile(
- "stubbed_impl", {}); // [Windows TODO: stubbed implementation #14700]
+ "stubbed_impl",
+ std::vector{},
+ nullptr); // [Windows TODO: stubbed implementation #14700]
}
std::unique_ptr
diff --git a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/jsi/jsi/test/testlib.cpp b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/jsi/jsi/test/testlib.cpp
index f3a2cfa63dc..f7aec839eda 100644
--- a/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/jsi/jsi/test/testlib.cpp
+++ b/vnext/ReactCommon/TEMP_UntilReactCommonUpdate/jsi/jsi/test/testlib.cpp
@@ -1173,7 +1173,7 @@ TEST_P(JSITest, DecoratorTest) {
class CountRuntime final : public WithRuntimeDecorator {
public:
- explicit CountRuntime(std::unique_ptr rt)
+ explicit CountRuntime(std::shared_ptr rt)
: WithRuntimeDecorator(*rt, count_),
rt_(std::move(rt)),
count_(kInit) {}
@@ -1183,7 +1183,7 @@ TEST_P(JSITest, DecoratorTest) {
}
private:
- std::unique_ptr rt_;
+ std::shared_ptr rt_;
Count count_;
};
@@ -1222,7 +1222,7 @@ TEST_P(JSITest, MultiDecoratorTest) {
class MultiRuntime final
: public WithRuntimeDecorator> {
public:
- explicit MultiRuntime(std::unique_ptr rt)
+ explicit MultiRuntime(std::shared_ptr rt)
: WithRuntimeDecorator>(*rt, tuple_),
rt_(std::move(rt)) {}
@@ -1234,7 +1234,7 @@ TEST_P(JSITest, MultiDecoratorTest) {
}
private:
- std::unique_ptr rt_;
+ std::shared_ptr rt_;
std::tuple tuple_;
};
@@ -1752,6 +1752,116 @@ TEST_P(JSITest, ObjectCreateWithPrototype) {
}
Windows] */
+/* [Windows
+
+TEST_P(JSITest, SetRuntimeData) {
+ class RD : public RuntimeDecorator {
+ public:
+ explicit RD(Runtime& rt) : RuntimeDecorator(rt) {}
+
+ void setRuntimeDataImpl(
+ const UUID& uuid,
+ const void* data,
+ void (*deleter)(const void* data)) override {
+ Runtime::setRuntimeDataImpl(uuid, data, deleter);
+ }
+
+ const void* getRuntimeDataImpl(const UUID& uuid) override {
+ return Runtime::getRuntimeDataImpl(uuid);
+ }
+ };
+
+ RD rd1 = RD(rt);
+ UUID uuid1{0xe67ab3d6, 0x09a0, 0x11f0, 0xa641, 0x325096b39f47};
+ auto str = std::make_shared("hello world");
+ rd1.setRuntimeData(uuid1, str);
+
+ UUID uuid2{0xa12f99fc, 0x09a2, 0x11f0, 0x84de, 0x325096b39f47};
+ auto obj1 = std::make_shared