@office-iss/react-native-win32 0.0.0-canary.296 → 0.0.0-canary.297

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (141) hide show
  1. package/.flowconfig +3 -1
  2. package/CHANGELOG.json +22 -1
  3. package/CHANGELOG.md +13 -4
  4. package/Libraries/Animated/Animated.js +0 -1
  5. package/Libraries/Animated/Animated.js.flow +0 -1
  6. package/Libraries/Animated/AnimatedExports.js +0 -1
  7. package/Libraries/Animated/AnimatedExports.js.flow +1 -2
  8. package/Libraries/Animated/animations/Animation.js +5 -2
  9. package/Libraries/Animated/components/AnimatedScrollView.js +53 -52
  10. package/Libraries/Animated/createAnimatedComponent.js +37 -33
  11. package/Libraries/Animated/nodes/AnimatedObject.js +2 -3
  12. package/Libraries/Animated/nodes/AnimatedProps.js +1 -1
  13. package/Libraries/Animated/shouldUseTurboAnimatedModule.js +6 -1
  14. package/Libraries/AppState/AppState.js +6 -1
  15. package/Libraries/Components/ActivityIndicator/ActivityIndicator.js +19 -18
  16. package/Libraries/Components/Button.js +2 -2
  17. package/Libraries/Components/Button.win32.js +2 -2
  18. package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.android.js +2 -3
  19. package/Libraries/Components/Keyboard/KeyboardAvoidingView.js +2 -1
  20. package/Libraries/Components/LayoutConformance/LayoutConformance.js +0 -1
  21. package/Libraries/Components/Pressable/Pressable.js +9 -6
  22. package/Libraries/Components/Pressable/Pressable.win32.js +9 -6
  23. package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.android.js +14 -13
  24. package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.js +13 -1
  25. package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroidTypes.js +29 -20
  26. package/Libraries/Components/ScrollView/ScrollView.d.ts +9 -5
  27. package/Libraries/Components/ScrollView/ScrollView.js +18 -12
  28. package/Libraries/Components/ScrollView/ScrollViewContext.js +2 -1
  29. package/Libraries/Components/ScrollView/ScrollViewNativeComponentType.js +1 -1
  30. package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +19 -6
  31. package/Libraries/Components/Switch/Switch.js +8 -2
  32. package/Libraries/Components/TextInput/AndroidTextInputNativeComponent.js +1 -5
  33. package/Libraries/Components/TextInput/TextInput.flow.js +1 -5
  34. package/Libraries/Components/TextInput/TextInput.flow.win32.js +1 -5
  35. package/Libraries/Components/TextInput/TextInput.js +26 -25
  36. package/Libraries/Components/TextInput/TextInput.win32.js +27 -25
  37. package/Libraries/Components/Touchable/TouchableBounce.js +9 -3
  38. package/Libraries/Components/Touchable/TouchableHighlight.js +9 -4
  39. package/Libraries/Components/Touchable/TouchableNativeFeedback.js +2 -1
  40. package/Libraries/Components/Touchable/TouchableNativeFeedback.win32.js +2 -0
  41. package/Libraries/Components/Touchable/TouchableOpacity.js +7 -3
  42. package/Libraries/Components/Touchable/TouchableWithoutFeedback.js +2 -2
  43. package/Libraries/Components/View/View.js +111 -25
  44. package/Libraries/Core/Devtools/loadBundleFromServer.js +49 -7
  45. package/Libraries/Core/Devtools/loadBundleFromServer.win32.js +49 -7
  46. package/Libraries/Core/InitializeCore.js +1 -22
  47. package/Libraries/Core/ReactNativeVersion.js +3 -2
  48. package/Libraries/Debugging/DebuggingOverlay.js +6 -8
  49. package/Libraries/Debugging/DebuggingOverlayRegistry.js +0 -1
  50. package/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry.js +0 -1
  51. package/Libraries/EventEmitter/NativeEventEmitter.js +1 -1
  52. package/Libraries/Image/AssetRegistry.js +4 -10
  53. package/Libraries/Image/AssetSourceResolver.js +17 -4
  54. package/Libraries/Image/Image.android.js +112 -106
  55. package/Libraries/Image/Image.ios.js +10 -2
  56. package/Libraries/Image/Image.win32.js +11 -3
  57. package/Libraries/Image/ImageAnalyticsTagContext.js +2 -2
  58. package/Libraries/Image/RelativeImageStub.js +1 -0
  59. package/Libraries/Lists/FlatList.d.ts +9 -5
  60. package/Libraries/Lists/FlatList.js +1 -1
  61. package/Libraries/Lists/SectionListModern.js +9 -3
  62. package/Libraries/LogBox/UI/LogBoxButton.js +2 -1
  63. package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js +2 -1
  64. package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js +2 -1
  65. package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js +3 -2
  66. package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js +3 -2
  67. package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js +2 -1
  68. package/Libraries/ReactNative/AppContainer-dev.js +4 -4
  69. package/Libraries/ReactNative/AppContainer-prod.js +0 -1
  70. package/Libraries/ReactNative/RootTag.js +2 -2
  71. package/Libraries/ReactPrivate/ReactNativePrivateInterface.js +1 -0
  72. package/Libraries/Renderer/shims/ReactNativeTypes.js +21 -25
  73. package/Libraries/Renderer/shims/ReactNativeTypes.win32.js +270 -0
  74. package/Libraries/StyleSheet/StyleSheetExports.js.flow +3 -1
  75. package/Libraries/StyleSheet/StyleSheetTypes.js +4 -3
  76. package/Libraries/StyleSheet/private/_TransformStyle.js +49 -21
  77. package/Libraries/StyleSheet/processBoxShadow.js +0 -1
  78. package/Libraries/StyleSheet/processFilter.js +0 -1
  79. package/Libraries/Text/Text.d.ts +7 -0
  80. package/Libraries/Text/Text.js +255 -244
  81. package/Libraries/Text/Text.win32.js +293 -284
  82. package/Libraries/Text/TextAncestor.js +3 -2
  83. package/Libraries/Text/TextProps.js +2 -34
  84. package/Libraries/Text/TextProps.win32.js +2 -33
  85. package/Libraries/Types/ReactDevToolsTypes.js +0 -1
  86. package/Libraries/Utilities/PerformanceLoggerContext.js +2 -2
  87. package/Libraries/Utilities/PlatformTypes.js +1 -1
  88. package/Libraries/vendor/core/ErrorUtils.js +28 -4
  89. package/index.js +0 -1
  90. package/jest/mockNativeComponent.js +2 -1
  91. package/jest/renderer.js +0 -1
  92. package/jest/resolver.js +31 -0
  93. package/jest/setup.js +1 -1
  94. package/overrides.json +27 -20
  95. package/package.json +13 -13
  96. package/src/private/animated/NativeAnimatedHelper.js +6 -1
  97. package/src/private/animated/NativeAnimatedHelper.win32.js +6 -1
  98. package/src/private/animated/createAnimatedPropsHook.js +11 -4
  99. package/src/private/animated/createAnimatedPropsMemoHook.js +0 -1
  100. package/src/private/components/safeareaview/SafeAreaView_INTERNAL_DO_NOT_USE.js +0 -1
  101. package/src/private/components/scrollview/HScrollViewNativeComponents.js +0 -1
  102. package/src/private/components/scrollview/VScrollViewNativeComponents.js +0 -1
  103. package/src/private/devsupport/rndevtools/FuseboxSessionObserver.js +0 -1
  104. package/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.android.js +8 -9
  105. package/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.ios.js +12 -15
  106. package/src/private/devsupport/rndevtools/ReactDevToolsSettingsManager.win32.js +8 -9
  107. package/src/private/devsupport/rndevtools/setUpFuseboxReactDevToolsDispatcher.js +0 -1
  108. package/src/private/devsupport/rndevtools/specs/NativeReactDevToolsRuntimeSettingsModule.js +0 -1
  109. package/src/private/featureflags/ReactNativeFeatureFlags.js +39 -4
  110. package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js +5 -2
  111. package/src/private/setup/setUpDefaultReactNativeEnvironment.js +44 -0
  112. package/src/private/styles/composeStyles.js +12 -5
  113. package/src/private/webapis/dom/events/Event.js +3 -0
  114. package/src/private/webapis/dom/events/EventTarget.js +3 -0
  115. package/src/private/webapis/dom/nodes/ReactNativeElement.js +6 -23
  116. package/src/private/webapis/dom/nodes/ReadOnlyNode.js +3 -1
  117. package/src/private/webapis/dom/nodes/specs/NativeDOM.js +38 -0
  118. package/src/private/webapis/dom/oldstylecollections/HTMLCollection.js +3 -0
  119. package/src/private/webapis/dom/oldstylecollections/NodeList.js +3 -0
  120. package/src/private/webapis/errors/DOMException.js +166 -0
  121. package/src/private/webapis/geometry/DOMRect.js +5 -0
  122. package/src/private/webapis/geometry/DOMRectList.js +3 -0
  123. package/src/private/webapis/geometry/DOMRectReadOnly.js +6 -0
  124. package/src/private/webapis/intersectionobserver/IntersectionObserver.js +15 -7
  125. package/src/private/webapis/intersectionobserver/IntersectionObserverEntry.js +3 -0
  126. package/src/private/webapis/intersectionobserver/internals/IntersectionObserverManager.js +80 -18
  127. package/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js +12 -0
  128. package/src/private/webapis/mutationobserver/MutationObserver.js +23 -33
  129. package/src/private/webapis/mutationobserver/MutationRecord.js +3 -0
  130. package/src/private/webapis/mutationobserver/internals/MutationObserverManager.js +56 -24
  131. package/src/private/webapis/mutationobserver/specs/NativeMutationObserver.js +4 -1
  132. package/src/private/webapis/performance/MemoryInfo.js +4 -1
  133. package/src/private/webapis/performance/Performance.js +19 -8
  134. package/src/private/webapis/performance/PerformanceEntry.js +4 -0
  135. package/src/private/webapis/performance/ReactNativeStartupTiming.js +4 -1
  136. package/src/private/webapis/performance/internals/RawPerformanceEntry.js +2 -0
  137. package/src/private/webapis/structuredClone/structuredClone.js +233 -0
  138. package/src/private/webapis/webidl/PlatformObjects.js +59 -0
  139. package/src/types/globals.d.ts +42 -0
  140. package/src-win/Libraries/Text/Text.d.ts +7 -0
  141. package/types/index.d.ts +1 -1
package/.flowconfig CHANGED
@@ -31,6 +31,7 @@
31
31
  <PROJECT_ROOT>/Libraries/Network/RCTNetworking.js
32
32
  <PROJECT_ROOT>/Libraries/Pressability/Pressability.js
33
33
  <PROJECT_ROOT>/Libraries/Pressability/HoverState.js
34
+ <PROJECT_ROOT>/Libraries/Renderer/shims/ReactNativeTypes.js
34
35
  <PROJECT_ROOT>/Libraries/StyleSheet/PlatformColorValueTypes.js
35
36
  <PROJECT_ROOT>/Libraries/Text/TextProps.js
36
37
  <PROJECT_ROOT>/Libraries/Types/CoreEventTypes.js
@@ -49,6 +50,7 @@
49
50
  ; Ignore react-native files in node_modules since they are copied into project root
50
51
  .*/node_modules/react-native/.*
51
52
 
53
+
52
54
  ; Ignore react-native-windows' build output. Flow is not compiled with long path support and after running unittests these folders have long paths
53
55
  .*/node_modules/react-native-windows/build/.*
54
56
  .*/node_modules/react-native-windows/target/.*
@@ -174,4 +176,4 @@ untyped-import
174
176
  untyped-type-import
175
177
 
176
178
  [version]
177
- ^0.269.1
179
+ ^0.271.0
package/CHANGELOG.json CHANGED
@@ -2,7 +2,28 @@
2
2
  "name": "@office-iss/react-native-win32",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 03 Sep 2025 05:22:43 GMT",
5
+ "date": "Fri, 19 Sep 2025 05:28:15 GMT",
6
+ "version": "0.0.0-canary.297",
7
+ "tag": "@office-iss/react-native-win32_v0.0.0-canary.297",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "74712637+iamAbhi-916@users.noreply.github.com",
12
+ "package": "@office-iss/react-native-win32",
13
+ "commit": "054949ab65ae451191ec868f0384c9df717173c6",
14
+ "comment": "integrate nightly 0.81.0-nightly-20250521-3cb70bb6a"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@office-iss/react-native-win32",
19
+ "comment": "Bump react-native-platform-override to v1.9.58",
20
+ "commit": "not available"
21
+ }
22
+ ]
23
+ }
24
+ },
25
+ {
26
+ "date": "Wed, 03 Sep 2025 05:22:57 GMT",
6
27
  "version": "0.0.0-canary.296",
7
28
  "tag": "@office-iss/react-native-win32_v0.0.0-canary.296",
8
29
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,17 +1,26 @@
1
1
  # Change Log - @office-iss/react-native-win32
2
2
 
3
- <!-- This log was last generated on Wed, 03 Sep 2025 05:22:43 GMT and should not be manually modified. -->
3
+ <!-- This log was last generated on Fri, 19 Sep 2025 05:28:15 GMT and should not be manually modified. -->
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## 0.0.0-canary.296
7
+ ## 0.0.0-canary.297
8
8
 
9
- Wed, 03 Sep 2025 05:22:43 GMT
9
+ Fri, 19 Sep 2025 05:28:15 GMT
10
10
 
11
11
  ### Changes
12
12
 
13
- - Add reply count prop to AccessibilityAnnotationInfo (mmaring@microsoft.com)
13
+ - integrate nightly 0.81.0-nightly-20250521-3cb70bb6a (74712637+iamAbhi-916@users.noreply.github.com)
14
+ - Bump react-native-platform-override to v1.9.58
14
15
 
16
+ ## 0.0.0-canary.296
17
+
18
+ Wed, 03 Sep 2025 05:22:57 GMT
19
+
20
+ ### Changes
21
+
22
+ - Add reply count prop to AccessibilityAnnotationInfo (mmaring@microsoft.com)
23
+
15
24
  ## 0.0.0-canary.295
16
25
 
17
26
  Sat, 23 Aug 2025 05:30:39 GMT
@@ -6,7 +6,6 @@
6
6
  *
7
7
  * @flow strict-local
8
8
  * @format
9
- * @oncall react_native
10
9
  */
11
10
 
12
11
  import typeof * as AnimatedExports from './AnimatedExports';
@@ -6,7 +6,6 @@
6
6
  *
7
7
  * @flow strict-local
8
8
  * @format
9
- * @oncall react_native
10
9
  */
11
10
 
12
11
  export * as default from './AnimatedExports';
@@ -6,7 +6,6 @@
6
6
  *
7
7
  * @flow
8
8
  * @format
9
- * @oncall react_native
10
9
  */
11
10
 
12
11
  import typeof AnimatedFlatList from './components/AnimatedFlatList';
@@ -6,7 +6,6 @@
6
6
  *
7
7
  * @flow
8
8
  * @format
9
- * @oncall react_native
10
9
  */
11
10
 
12
11
  import AnimatedImplementation from './AnimatedImplementation';
@@ -37,7 +36,7 @@ export type {default as AnimatedDivision} from './nodes/AnimatedDivision';
37
36
  export type {default as AnimatedModulo} from './nodes/AnimatedModulo';
38
37
  export type {default as AnimatedMultiplication} from './nodes/AnimatedMultiplication';
39
38
  export type {default as AnimatedSubtraction} from './nodes/AnimatedSubtraction';
40
- export type {WithAnimatedValue} from './createAnimatedComponent';
39
+ export type {WithAnimatedValue, AnimatedProps} from './createAnimatedComponent';
41
40
  export type {AnimatedComponentType as AnimatedComponent} from './createAnimatedComponent';
42
41
 
43
42
  /**
@@ -13,6 +13,7 @@ import type AnimatedNode from '../nodes/AnimatedNode';
13
13
  import type AnimatedValue from '../nodes/AnimatedValue';
14
14
 
15
15
  import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
16
+ import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
16
17
  import AnimatedProps from '../nodes/AnimatedProps';
17
18
 
18
19
  export type EndResult = {
@@ -149,8 +150,10 @@ export default class Animation {
149
150
  if (value != null) {
150
151
  animatedValue.__onAnimatedValueUpdateReceived(value, offset);
151
152
 
152
- if (this.__isLooping === true) {
153
- return;
153
+ if (!ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
154
+ if (this.__isLooping === true) {
155
+ return;
156
+ }
154
157
  }
155
158
 
156
159
  // Once the JS side node is synced with the updated values, trigger an
@@ -9,7 +9,10 @@
9
9
  */
10
10
 
11
11
  import type {____ViewStyle_Internal} from '../../StyleSheet/StyleSheetTypes';
12
- import type {AnimatedComponentType} from '../createAnimatedComponent';
12
+ import type {
13
+ AnimatedComponentType,
14
+ AnimatedProps,
15
+ } from '../createAnimatedComponent';
13
16
 
14
17
  import RefreshControl from '../../Components/RefreshControl/RefreshControl';
15
18
  import ScrollView from '../../Components/ScrollView/ScrollView';
@@ -21,7 +24,7 @@ import useMergeRefs from '../../Utilities/useMergeRefs';
21
24
  import createAnimatedComponent from '../createAnimatedComponent';
22
25
  import useAnimatedProps from '../useAnimatedProps';
23
26
  import * as React from 'react';
24
- import {useMemo} from 'react';
27
+ import {cloneElement, useMemo} from 'react';
25
28
 
26
29
  type AnimatedScrollViewProps = React.ElementConfig<typeof ScrollView>;
27
30
  type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
@@ -32,55 +35,54 @@ type AnimatedScrollViewInstance = React.ElementRef<typeof ScrollView>;
32
35
  const AnimatedScrollView: AnimatedComponentType<
33
36
  AnimatedScrollViewProps,
34
37
  AnimatedScrollViewInstance,
35
- > = React.forwardRef(
36
- function AnimatedScrollViewWithOrWithoutInvertedRefreshControl(
37
- props,
38
- forwardedRef,
38
+ > = function AnimatedScrollViewWithOrWithoutInvertedRefreshControl({
39
+ ref: forwardedRef,
40
+ ...props
41
+ }: {
42
+ ref?: React.RefSetter<AnimatedScrollViewInstance>,
43
+ ...AnimatedProps<AnimatedScrollViewProps>,
44
+ }) {
45
+ // (Android only) When a ScrollView has a RefreshControl and
46
+ // any `style` property set with an Animated.Value, the CSS
47
+ // gets incorrectly applied twice. This is because ScrollView
48
+ // swaps the parent/child relationship of itself and the
49
+ // RefreshControl component (see ScrollView.js for more details).
50
+ if (
51
+ Platform.OS === 'android' &&
52
+ props.refreshControl != null &&
53
+ props.style != null
39
54
  ) {
40
- // (Android only) When a ScrollView has a RefreshControl and
41
- // any `style` property set with an Animated.Value, the CSS
42
- // gets incorrectly applied twice. This is because ScrollView
43
- // swaps the parent/child relationship of itself and the
44
- // RefreshControl component (see ScrollView.js for more details).
45
- if (
46
- Platform.OS === 'android' &&
47
- props.refreshControl != null &&
48
- props.style != null
49
- ) {
50
- return (
51
- // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
52
- <AnimatedScrollViewWithInvertedRefreshControl
53
- scrollEventThrottle={0.0001}
54
- {...props}
55
- ref={forwardedRef}
56
- // $FlowFixMe[incompatible-type]
57
- refreshControl={props.refreshControl}
58
- />
59
- );
60
- } else {
61
- return (
62
- <AnimatedScrollViewWithoutInvertedRefreshControl
63
- scrollEventThrottle={0.0001}
64
- {...props}
65
- ref={forwardedRef}
66
- />
67
- );
68
- }
69
- },
70
- );
55
+ return (
56
+ // $FlowFixMe - It should return an Animated ScrollView but it returns a ScrollView with Animated props applied.
57
+ <AnimatedScrollViewWithInvertedRefreshControl
58
+ scrollEventThrottle={0.0001}
59
+ {...props}
60
+ ref={forwardedRef}
61
+ // $FlowFixMe[incompatible-type]
62
+ refreshControl={props.refreshControl}
63
+ />
64
+ );
65
+ } else {
66
+ return (
67
+ <AnimatedScrollViewWithoutInvertedRefreshControl
68
+ scrollEventThrottle={0.0001}
69
+ {...props}
70
+ ref={forwardedRef}
71
+ />
72
+ );
73
+ }
74
+ };
71
75
 
72
- const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
73
- // $FlowFixMe[incompatible-call]
74
- function AnimatedScrollViewWithInvertedRefreshControl(
75
- props: {
76
- ...React.ElementConfig<typeof ScrollView>,
77
- // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
78
- refreshControl: ExactReactElement_DEPRECATED<any>,
79
- },
80
- forwardedRef:
81
- | {current: AnimatedScrollViewInstance | null, ...}
82
- | ((AnimatedScrollViewInstance | null) => mixed),
83
- ) {
76
+ const AnimatedScrollViewWithInvertedRefreshControl =
77
+ function AnimatedScrollViewWithInvertedRefreshControl({
78
+ ref: forwardedRef,
79
+ ...props
80
+ }: {
81
+ ref?: React.RefSetter<AnimatedScrollViewInstance>,
82
+ ...React.ElementConfig<typeof ScrollView>,
83
+ // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
84
+ refreshControl: ExactReactElement_DEPRECATED<any>,
85
+ }) {
84
86
  // Split `props` into the animate-able props for the parent (RefreshControl)
85
87
  // and child (ScrollView).
86
88
  const {intermediatePropsForRefreshControl, intermediatePropsForScrollView} =
@@ -102,7 +104,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
102
104
  // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
103
105
  // safely clobbered.
104
106
  const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
105
- React.cloneElement(props.refreshControl, {
107
+ cloneElement(props.refreshControl, {
106
108
  ...refreshControlAnimatedProps,
107
109
  ref: refreshControlRef,
108
110
  });
@@ -134,8 +136,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
134
136
  )}
135
137
  />
136
138
  );
137
- },
138
- );
139
+ };
139
140
 
140
141
  const AnimatedScrollViewWithoutInvertedRefreshControl =
141
142
  createAnimatedComponent(ScrollView);
@@ -105,41 +105,45 @@ export function unstable_createAnimatedComponentWithAllowlist<
105
105
  const AnimatedComponent: AnimatedComponentType<
106
106
  TProps,
107
107
  React.ElementRef<TInstance>,
108
- > = React.forwardRef<AnimatedProps<TProps>, React.ElementRef<TInstance>>(
109
- (props, forwardedRef) => {
110
- const [reducedProps, callbackRef] = useAnimatedProps<
111
- TProps,
112
- React.ElementRef<TInstance>,
113
- >(props);
114
- const ref = useMergeRefs<React.ElementRef<TInstance>>(
115
- callbackRef,
116
- forwardedRef,
117
- );
108
+ > = ({
109
+ ref: forwardedRef,
110
+ ...props
111
+ }: {
112
+ ref?: React.RefSetter<React.ElementRef<TInstance>>,
113
+ ...AnimatedProps<TProps>,
114
+ }) => {
115
+ const [reducedProps, callbackRef] = useAnimatedProps<
116
+ TProps,
117
+ React.ElementRef<TInstance>,
118
+ >(props);
119
+ const ref = useMergeRefs<React.ElementRef<TInstance>>(
120
+ callbackRef,
121
+ forwardedRef,
122
+ );
118
123
 
119
- // Some components require explicit passthrough values for animation
120
- // to work properly. For example, if an animated component is
121
- // transformed and Pressable, onPress will not work after transform
122
- // without these passthrough values.
123
- // $FlowFixMe[prop-missing]
124
- const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
125
- const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
126
- const mergedStyle = useMemo(
127
- () => composeStyles(style, passthroughStyle),
128
- [passthroughStyle, style],
129
- );
124
+ // Some components require explicit passthrough values for animation
125
+ // to work properly. For example, if an animated component is
126
+ // transformed and Pressable, onPress will not work after transform
127
+ // without these passthrough values.
128
+ // $FlowFixMe[prop-missing]
129
+ const {passthroughAnimatedPropExplicitValues, style} = reducedProps;
130
+ const passthroughStyle = passthroughAnimatedPropExplicitValues?.style;
131
+ const mergedStyle = useMemo(
132
+ () => composeStyles(style, passthroughStyle),
133
+ [passthroughStyle, style],
134
+ );
130
135
 
131
- // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
132
- // spread after `reducedProps` but before `style`.
133
- return (
134
- <Component
135
- {...reducedProps}
136
- {...passthroughAnimatedPropExplicitValues}
137
- style={mergedStyle}
138
- ref={ref}
139
- />
140
- );
141
- },
142
- );
136
+ // NOTE: It is important that `passthroughAnimatedPropExplicitValues` is
137
+ // spread after `reducedProps` but before `style`.
138
+ return (
139
+ <Component
140
+ {...reducedProps}
141
+ {...passthroughAnimatedPropExplicitValues}
142
+ style={mergedStyle}
143
+ ref={ref}
144
+ />
145
+ );
146
+ };
143
147
 
144
148
  AnimatedComponent.displayName = `Animated(${
145
149
  Component.displayName || 'Anonymous'
@@ -6,7 +6,6 @@
6
6
  *
7
7
  * @flow
8
8
  * @format
9
- * @oncall react_native
10
9
  */
11
10
 
12
11
  'use strict';
@@ -16,7 +15,7 @@ import type {AnimatedNodeConfig} from './AnimatedNode';
16
15
 
17
16
  import AnimatedNode from './AnimatedNode';
18
17
  import AnimatedWithChildren from './AnimatedWithChildren';
19
- import * as React from 'react';
18
+ import {isValidElement} from 'react';
20
19
 
21
20
  const MAX_DEPTH = 5;
22
21
 
@@ -30,7 +29,7 @@ export function isPlainObject(
30
29
  value !== null &&
31
30
  typeof value === 'object' &&
32
31
  Object.getPrototypeOf(value).isPrototypeOf(Object) &&
33
- !React.isValidElement(value)
32
+ !isValidElement(value)
34
33
  );
35
34
  }
36
35
 
@@ -22,7 +22,7 @@ import invariant from 'invariant';
22
22
 
23
23
  export type AnimatedPropsAllowlist = $ReadOnly<{
24
24
  style?: ?AnimatedStyleAllowlist,
25
- [string]: true,
25
+ [key: string]: true | AnimatedStyleAllowlist,
26
26
  }>;
27
27
 
28
28
  type TargetView = {
@@ -8,10 +8,15 @@
8
8
  * @format
9
9
  */
10
10
 
11
+ import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
11
12
  import Platform from '../Utilities/Platform';
12
13
 
13
14
  function shouldUseTurboAnimatedModule(): boolean {
14
- return Platform.OS === 'ios' && global.RN$Bridgeless === true;
15
+ if (ReactNativeFeatureFlags.cxxNativeAnimatedEnabled()) {
16
+ return false;
17
+ } else {
18
+ return Platform.OS === 'ios' && global.RN$Bridgeless === true;
19
+ }
15
20
  }
16
21
 
17
22
  export default shouldUseTurboAnimatedModule;
@@ -22,7 +22,12 @@ import NativeAppState from './NativeAppState';
22
22
  * - @platform android - on another Activity (even if it was launched by your app)
23
23
  * @platform ios - inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the multitasking view, opening the Notification Center or in the event of an incoming call.
24
24
  */
25
- export type AppStateStatus = 'inactive' | 'background' | 'active';
25
+ export type AppStateStatus =
26
+ | 'inactive'
27
+ | 'background'
28
+ | 'active'
29
+ | 'extension'
30
+ | 'unknown';
26
31
 
27
32
  /**
28
33
  * change - This even is received when the app state has changed.
@@ -60,18 +60,22 @@ export type ActivityIndicatorProps = $ReadOnly<{
60
60
  size?: ?IndicatorSize,
61
61
  }>;
62
62
 
63
- const ActivityIndicator = (
64
- {
65
- animating = true,
66
- color = Platform.OS === 'ios' ? GRAY : null,
67
- hidesWhenStopped = true,
68
- onLayout,
69
- size = 'small',
70
- style,
71
- ...restProps
72
- }: ActivityIndicatorProps,
73
- forwardedRef?: any,
74
- ) => {
63
+ const ActivityIndicator: component(
64
+ ref?: React.RefSetter<HostComponent<empty>>,
65
+ ...props: ActivityIndicatorProps
66
+ ) = ({
67
+ ref: forwardedRef,
68
+ animating = true,
69
+ color = Platform.OS === 'ios' ? GRAY : null,
70
+ hidesWhenStopped = true,
71
+ onLayout,
72
+ size = 'small',
73
+ style,
74
+ ...restProps
75
+ }: {
76
+ ref?: any,
77
+ ...ActivityIndicatorProps,
78
+ }) => {
75
79
  let sizeStyle;
76
80
  let sizeProp;
77
81
 
@@ -110,6 +114,7 @@ const ActivityIndicator = (
110
114
  style={StyleSheet.compose(styles.container, style)}>
111
115
  {Platform.OS === 'android' ? (
112
116
  // $FlowFixMe[prop-missing] Flow doesn't know when this is the android component
117
+ // $FlowFixMe[incompatible-type]
113
118
  <PlatformActivityIndicator {...nativeProps} {...androidProps} />
114
119
  ) : (
115
120
  /* $FlowFixMe[incompatible-type] (>=0.106.0 site=react_native_android_fb) This comment
@@ -153,11 +158,7 @@ const ActivityIndicator = (
153
158
  ```
154
159
  */
155
160
 
156
- const ActivityIndicatorWithRef: component(
157
- ref?: React.RefSetter<HostComponent<empty>>,
158
- ...props: ActivityIndicatorProps
159
- ) = React.forwardRef(ActivityIndicator);
160
- ActivityIndicatorWithRef.displayName = 'ActivityIndicator';
161
+ ActivityIndicator.displayName = 'ActivityIndicator';
161
162
 
162
163
  const styles = StyleSheet.create({
163
164
  container: {
@@ -174,4 +175,4 @@ const styles = StyleSheet.create({
174
175
  },
175
176
  });
176
177
 
177
- export default ActivityIndicatorWithRef;
178
+ export default ActivityIndicator;
@@ -288,7 +288,7 @@ type ButtonRef = React.ElementRef<typeof Touchable>;
288
288
  const Button: component(
289
289
  ref?: React.RefSetter<ButtonRef>,
290
290
  ...props: ButtonProps
291
- ) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
291
+ ) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
292
292
  const {
293
293
  accessibilityLabel,
294
294
  accessibilityState,
@@ -392,7 +392,7 @@ const Button: component(
392
392
  </View>
393
393
  </Touchable>
394
394
  );
395
- });
395
+ };
396
396
 
397
397
  Button.displayName = 'Button';
398
398
 
@@ -291,7 +291,7 @@ type ButtonRef = React.ElementRef<typeof Touchable>;
291
291
  const Button: component(
292
292
  ref?: React.RefSetter<ButtonRef>,
293
293
  ...props: ButtonProps
294
- ) = React.forwardRef((props: ButtonProps, ref: React.RefSetter<ButtonRef>) => {
294
+ ) = ({ref, ...props}: {ref?: React.RefSetter<ButtonRef>, ...ButtonProps}) => {
295
295
  // Win32
296
296
  const {
297
297
  accessibilityLabel,
@@ -400,7 +400,7 @@ const Button: component(
400
400
  </View>
401
401
  </Touchable>
402
402
  );
403
- });
403
+ };
404
404
 
405
405
  Button.displayName = 'Button';
406
406
 
@@ -28,6 +28,7 @@ import AndroidDrawerLayoutNativeComponent, {
28
28
  } from './AndroidDrawerLayoutNativeComponent';
29
29
  import nullthrows from 'nullthrows';
30
30
  import * as React from 'react';
31
+ import {createRef} from 'react';
31
32
 
32
33
  const DRAWER_STATES = ['Idle', 'Dragging', 'Settling'];
33
34
 
@@ -76,9 +77,7 @@ class DrawerLayoutAndroid
76
77
 
77
78
  // $FlowFixMe[missing-local-annot]
78
79
  _nativeRef =
79
- React.createRef<
80
- React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>,
81
- >();
80
+ createRef<React.ElementRef<typeof AndroidDrawerLayoutNativeComponent>>();
82
81
 
83
82
  state: DrawerLayoutAndroidState = {
84
83
  drawerOpened: false,
@@ -24,6 +24,7 @@ import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';
24
24
  import View from '../View/View';
25
25
  import Keyboard from './Keyboard';
26
26
  import * as React from 'react';
27
+ import {createRef} from 'react';
27
28
 
28
29
  export type KeyboardAvoidingViewProps = $ReadOnly<{
29
30
  ...ViewProps,
@@ -73,7 +74,7 @@ class KeyboardAvoidingView extends React.Component<
73
74
  constructor(props: KeyboardAvoidingViewProps) {
74
75
  super(props);
75
76
  this.state = {bottom: 0};
76
- this.viewRef = React.createRef();
77
+ this.viewRef = createRef();
77
78
  }
78
79
 
79
80
  async _relativeKeyboardHeight(
@@ -6,7 +6,6 @@
6
6
  *
7
7
  * @flow strict-local
8
8
  * @format
9
- * @oncall react_native
10
9
  */
11
10
 
12
11
  import StyleSheet from '../../StyleSheet/StyleSheet';
@@ -24,7 +24,7 @@ import useAndroidRippleForView, {
24
24
  type PressableAndroidRippleConfig,
25
25
  } from './useAndroidRippleForView';
26
26
  import * as React from 'react';
27
- import {useMemo, useRef, useState} from 'react';
27
+ import {memo, useMemo, useRef, useState} from 'react';
28
28
 
29
29
  type ViewStyleProp = React.ElementConfig<typeof View>['style'];
30
30
 
@@ -165,10 +165,13 @@ type Instance = React.ElementRef<typeof View>;
165
165
  * Component used to build display components that should respond to whether the
166
166
  * component is currently pressed or not.
167
167
  */
168
- function Pressable(
169
- props: PressableProps,
170
- forwardedRef: React.RefSetter<Instance>,
171
- ): React.Node {
168
+ function Pressable({
169
+ ref: forwardedRef,
170
+ ...props
171
+ }: {
172
+ ref?: React.RefSetter<Instance>,
173
+ ...PressableProps,
174
+ }): React.Node {
172
175
  const {
173
176
  accessible,
174
177
  accessibilityState,
@@ -331,7 +334,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
331
334
  return [pressed || forcePressed, setPressed];
332
335
  }
333
336
 
334
- const MemoedPressable = React.memo(React.forwardRef(Pressable));
337
+ const MemoedPressable = memo(Pressable);
335
338
  MemoedPressable.displayName = 'Pressable';
336
339
 
337
340
  export default (MemoedPressable: component(
@@ -28,7 +28,7 @@ import useAndroidRippleForView, {
28
28
  type PressableAndroidRippleConfig,
29
29
  } from './useAndroidRippleForView';
30
30
  import * as React from 'react';
31
- import {useMemo, useRef, useState} from 'react';
31
+ import {memo, useMemo, useRef, useState} from 'react';
32
32
  import type {HandledKeyboardEvent} from '../../Components/View/ViewPropTypes';
33
33
  import View from '../View/View';
34
34
 
@@ -211,10 +211,13 @@ type Instance = React.ElementRef<typeof View>;
211
211
  * Component used to build display components that should respond to whether the
212
212
  * component is currently pressed or not.
213
213
  */
214
- function Pressable(
215
- props: PressableProps,
216
- forwardedRef: React.RefSetter<Instance>,
217
- ): React.Node {
214
+ function Pressable({
215
+ ref: forwardedRef,
216
+ ...props
217
+ }: {
218
+ ref?: React.RefSetter<Instance>,
219
+ ...PressableProps,
220
+ }): React.Node {
218
221
  const {
219
222
  accessible,
220
223
  accessibilityState,
@@ -398,7 +401,7 @@ function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
398
401
  return [pressed || forcePressed, setPressed];
399
402
  }
400
403
 
401
- const MemoedPressable = React.memo(React.forwardRef(Pressable));
404
+ const MemoedPressable = memo(Pressable);
402
405
  MemoedPressable.displayName = 'Pressable';
403
406
 
404
407
  export default (MemoedPressable: component(