@office-iss/react-native-win32 0.0.0-canary.301 → 0.0.0-canary.303
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.
- package/.flowconfig +2 -2
- package/CHANGELOG.json +49 -1
- package/CHANGELOG.md +24 -5
- package/IntegrationTests/IntegrationTestsApp.js +1 -1
- package/IntegrationTests/LayoutEventsTest.js +3 -3
- package/Libraries/ActionSheetIOS/ActionSheetIOS.js +3 -3
- package/Libraries/Alert/RCTAlertManager.android.js +2 -2
- package/Libraries/Animated/AnimatedEvent.js +1 -1
- package/Libraries/Animated/AnimatedImplementation.js +2 -2
- package/Libraries/Animated/AnimatedMock.js +1 -1
- package/Libraries/Animated/NativeAnimatedAllowlist.js +1 -0
- package/Libraries/Animated/animations/Animation.js +5 -6
- package/Libraries/Animated/components/AnimatedScrollView.js +1 -1
- package/Libraries/Animated/nodes/AnimatedColor.js +9 -9
- package/Libraries/Animated/nodes/AnimatedInterpolation.js +4 -4
- package/Libraries/Animated/nodes/AnimatedProps.js +2 -2
- package/Libraries/Animated/nodes/AnimatedStyle.js +6 -4
- package/Libraries/Animated/nodes/AnimatedTransform.js +1 -1
- package/Libraries/AppState/AppState.js +5 -1
- package/Libraries/BatchedBridge/NativeModules.js +1 -1
- package/Libraries/Blob/BlobManager.js +1 -1
- package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js +1 -1
- package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.win32.js +1 -1
- package/Libraries/Components/Button.js +1 -1
- package/Libraries/Components/Button.win32.js +1 -1
- package/Libraries/Components/Pressable/useAndroidRippleForView.js +2 -2
- package/Libraries/Components/ScrollView/ScrollView.js +3 -2
- package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js +1 -1
- package/Libraries/Components/TextInput/TextInput.flow.js +12 -5
- package/Libraries/Components/TextInput/TextInput.flow.win32.js +12 -5
- package/Libraries/Components/TextInput/TextInput.js +9 -4
- package/Libraries/Components/TextInput/TextInput.win32.js +9 -6
- package/Libraries/Components/TextInput/Win32TextInputNativeComponent.js +2 -3
- package/Libraries/Components/Touchable/TouchableWithoutFeedback.js +1 -1
- package/Libraries/Components/View/View.win32.js +3 -1
- package/Libraries/Core/Devtools/loadBundleFromServer.js +1 -1
- package/Libraries/Core/Devtools/loadBundleFromServer.win32.js +1 -1
- package/Libraries/Core/ExceptionsManager.js +2 -2
- package/Libraries/Core/ReactFiberErrorDialog.js +3 -3
- package/Libraries/Core/ReactNativeVersion.js +1 -1
- package/Libraries/Core/Timers/JSTimers.js +1 -1
- package/Libraries/Core/Timers/immediateShim.js +1 -1
- package/Libraries/Debugging/DebuggingOverlayRegistry.js +5 -3
- package/Libraries/Image/Image.android.js +318 -111
- package/Libraries/Image/ImageSourceUtils.js +8 -2
- package/Libraries/Image/resolveAssetSource.js +1 -1
- package/Libraries/Interaction/InteractionManager.js +1 -1
- package/Libraries/Interaction/PanResponder.js +1 -1
- package/Libraries/Lists/FlatList.js +5 -6
- package/Libraries/LogBox/Data/LogBoxData.js +1 -1
- package/Libraries/LogBox/Data/parseLogBoxLog.js +1 -1
- package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js +1 -1
- package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.win32.js +1 -1
- package/Libraries/Modal/Modal.js +2 -2
- package/Libraries/NativeComponent/NativeComponentRegistry.js +1 -1
- package/Libraries/NativeComponent/ViewConfig.js +1 -1
- package/Libraries/Network/RCTNetworking.android.js +1 -1
- package/Libraries/Network/RCTNetworking.ios.js +1 -1
- package/Libraries/Network/RCTNetworking.win32.js +1 -1
- package/Libraries/Network/convertRequestBody.js +1 -1
- package/Libraries/PermissionsAndroid/PermissionsAndroid.js +10 -9
- package/Libraries/Pressability/HoverState.js +2 -0
- package/Libraries/Pressability/HoverState.win32.js +2 -0
- package/Libraries/PushNotificationIOS/PushNotificationIOS.js +2 -2
- package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js +2 -0
- package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js +3 -3
- package/Libraries/ReactNative/RendererImplementation.js +116 -116
- package/Libraries/ReactNative/UIManager.js +3 -3
- package/Libraries/ReactPrivate/ReactNativePrivateInterface.js +1 -1
- package/Libraries/Renderer/shims/ReactFabric.js +1 -3
- package/Libraries/Renderer/shims/ReactFeatureFlags.js +1 -3
- package/Libraries/Renderer/shims/ReactNative.js +1 -3
- package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js +1 -3
- package/Libraries/Renderer/shims/createReactNativeComponentClass.js +1 -3
- package/Libraries/StyleSheet/PlatformColorValueTypes.android.js +2 -2
- package/Libraries/StyleSheet/PlatformColorValueTypes.ios.js +2 -2
- package/Libraries/StyleSheet/PlatformColorValueTypes.win32.js +4 -0
- package/Libraries/StyleSheet/flattenStyle.js +2 -2
- package/Libraries/StyleSheet/splitLayoutProps.js +2 -2
- package/Libraries/Text/Text.js +509 -235
- package/Libraries/Text/Text.win32.js +622 -275
- package/Libraries/Text/TextNativeComponent.js +2 -2
- package/Libraries/Text/TextNativeComponent.win32.js +2 -2
- package/Libraries/Utilities/HMRClient.js +0 -1
- package/Libraries/Utilities/Platform.android.js +3 -3
- package/Libraries/Utilities/Platform.d.ts +1 -0
- package/Libraries/Utilities/Platform.ios.js +1 -1
- package/Libraries/Utilities/Platform.win32.js +3 -3
- package/Libraries/Utilities/PlatformTypes.js +1 -1
- package/Libraries/Utilities/ReactNativeTestTools.js +12 -0
- package/Libraries/Utilities/codegenNativeCommands.js +1 -1
- package/Libraries/Utilities/codegenNativeComponent.js +1 -1
- package/Libraries/Utilities/differ/pointsDiffer.js +1 -1
- package/Libraries/vendor/emitter/EventEmitter.js +1 -1
- package/index.js +3 -0
- package/index.win32.js +4 -0
- package/jest/local-setup.js +2 -2
- package/jest/mock.js +1 -1
- package/jest/mockComponent.js +8 -8
- package/jest/mockNativeComponent.js +3 -2
- package/jest/mocks/Modal.js +1 -1
- package/jest/mocks/ScrollView.js +1 -1
- package/jest/mocks/ViewNativeComponent.js +1 -1
- package/jest/setup.js +12 -12
- package/overrides.json +16 -16
- package/package.json +12 -12
- package/src/private/animated/NativeAnimatedHelper.js +3 -3
- package/src/private/animated/NativeAnimatedHelper.win32.js +3 -3
- package/src/private/animated/createAnimatedPropsHook.js +9 -11
- package/src/private/animated/createAnimatedPropsMemoHook.js +6 -6
- package/src/private/components/virtualview/VirtualView.js +7 -4
- package/src/private/components/virtualview/VirtualViewNativeComponent.js +6 -0
- package/src/private/devsupport/devmenu/elementinspector/Inspector.js +2 -2
- package/src/private/featureflags/ReactNativeFeatureFlags.js +9 -8
- package/src/private/featureflags/specs/NativeReactNativeFeatureFlags.js +1 -2
- package/src/private/renderer/errorhandling/ErrorHandlers.js +3 -3
- package/src/private/types/HostInstance.js +4 -1
- package/src/private/webapis/dom/nodes/ReactNativeDocument.js +22 -2
- package/src/private/webapis/dom/nodes/ReactNativeElement.js +1 -1
- package/src/private/webapis/dom/nodes/ReadOnlyElement.js +5 -3
- package/src/private/webapis/dom/nodes/ReadOnlyNode.js +16 -13
- package/src/private/webapis/dom/nodes/internals/NodeInternals.js +45 -22
- package/src/private/webapis/dom/nodes/internals/ReactNativeDocumentInstanceHandle.js +1 -1
- package/src/private/webapis/dom/nodes/specs/NativeDOM.js +26 -192
- package/src/private/webapis/dom/oldstylecollections/HTMLCollection.js +14 -11
- package/src/private/webapis/dom/oldstylecollections/NodeList.js +13 -10
- package/src/private/webapis/geometry/DOMRectList.js +1 -1
- package/src/private/webapis/mutationobserver/internals/MutationObserverManager.js +1 -1
- package/src/private/webapis/performance/EventTiming.js +1 -1
- package/src/private/webapis/performance/Performance.js +12 -30
- package/src/private/webapis/performance/specs/NativePerformance.js +4 -4
- package/src/private/webapis/structuredClone/structuredClone.js +9 -9
|
@@ -12,8 +12,10 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
|
|
|
12
12
|
import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
|
|
13
13
|
import type {RootTag} from '../Types/RootTagTypes';
|
|
14
14
|
import type {ImageProps} from './ImageProps';
|
|
15
|
+
import type {ImageSourceHeaders} from './ImageSourceUtils';
|
|
15
16
|
import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
|
|
16
17
|
|
|
18
|
+
import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
|
|
17
19
|
import flattenStyle from '../StyleSheet/flattenStyle';
|
|
18
20
|
import StyleSheet from '../StyleSheet/StyleSheet';
|
|
19
21
|
import TextAncestorContext from '../Text/TextAncestorContext';
|
|
@@ -31,6 +33,7 @@ import NativeImageLoaderAndroid, {
|
|
|
31
33
|
import resolveAssetSource from './resolveAssetSource';
|
|
32
34
|
import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
|
|
33
35
|
import * as React from 'react';
|
|
36
|
+
import {use} from 'react';
|
|
34
37
|
|
|
35
38
|
let _requestId = 1;
|
|
36
39
|
function generateRequestId() {
|
|
@@ -121,6 +124,12 @@ async function queryCache(
|
|
|
121
124
|
return NativeImageLoaderAndroid.queryCache(urls);
|
|
122
125
|
}
|
|
123
126
|
|
|
127
|
+
const EMPTY_IMAGE_SOURCE = {
|
|
128
|
+
uri: undefined,
|
|
129
|
+
width: undefined,
|
|
130
|
+
height: undefined,
|
|
131
|
+
};
|
|
132
|
+
|
|
124
133
|
/**
|
|
125
134
|
* A React component for displaying different types of images,
|
|
126
135
|
* including network images, static resources, temporary local images, and
|
|
@@ -128,137 +137,335 @@ async function queryCache(
|
|
|
128
137
|
*
|
|
129
138
|
* See https://reactnative.dev/docs/image
|
|
130
139
|
*/
|
|
131
|
-
let
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
140
|
+
let _BaseImage;
|
|
141
|
+
if (ReactNativeFeatureFlags.reduceDefaultPropsInImage()) {
|
|
142
|
+
let BaseImage: AbstractImageAndroid = ({
|
|
143
|
+
ref: forwardedRef,
|
|
144
|
+
alt,
|
|
145
|
+
accessible,
|
|
146
|
+
'aria-labelledby': ariaLabelledBy,
|
|
147
|
+
'aria-busy': ariaBusy,
|
|
148
|
+
'aria-checked': ariaChecked,
|
|
149
|
+
'aria-disabled': ariaDisabled,
|
|
150
|
+
'aria-expanded': ariaExpanded,
|
|
151
|
+
'aria-label': ariaLabel,
|
|
152
|
+
'aria-selected': ariaSelected,
|
|
153
|
+
accessibilityLabel,
|
|
154
|
+
accessibilityLabelledBy,
|
|
155
|
+
accessibilityState,
|
|
156
|
+
defaultSource,
|
|
157
|
+
loadingIndicatorSource,
|
|
158
|
+
children,
|
|
159
|
+
source,
|
|
160
|
+
src,
|
|
161
|
+
style,
|
|
162
|
+
crossOrigin,
|
|
163
|
+
referrerPolicy,
|
|
164
|
+
srcSet,
|
|
165
|
+
onLoadStart,
|
|
166
|
+
onLoad,
|
|
167
|
+
onLoadEnd,
|
|
168
|
+
onError,
|
|
169
|
+
width,
|
|
170
|
+
height,
|
|
171
|
+
resizeMode,
|
|
172
|
+
...restProps
|
|
173
|
+
}: {
|
|
174
|
+
ref?: React.RefSetter<HostInstance>,
|
|
175
|
+
...ImageProps,
|
|
176
|
+
}) => {
|
|
177
|
+
let source_ =
|
|
178
|
+
getImageSourcesFromImageProps({
|
|
179
|
+
crossOrigin,
|
|
180
|
+
referrerPolicy,
|
|
181
|
+
src,
|
|
182
|
+
srcSet,
|
|
183
|
+
width,
|
|
184
|
+
height,
|
|
185
|
+
source,
|
|
186
|
+
}) || EMPTY_IMAGE_SOURCE;
|
|
187
|
+
const defaultSource_ = resolveAssetSource(defaultSource);
|
|
188
|
+
const loadingIndicatorSource_ = resolveAssetSource(loadingIndicatorSource);
|
|
153
189
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
190
|
+
if (children != null) {
|
|
191
|
+
throw new Error(
|
|
192
|
+
'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
|
|
193
|
+
);
|
|
194
|
+
}
|
|
159
195
|
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
sources = source;
|
|
165
|
-
} else {
|
|
166
|
-
const {uri} = source;
|
|
167
|
-
if (uri === '') {
|
|
168
|
-
console.warn('source.uri should not be an empty string');
|
|
196
|
+
if (defaultSource != null && loadingIndicatorSource != null) {
|
|
197
|
+
throw new Error(
|
|
198
|
+
'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
|
|
199
|
+
);
|
|
169
200
|
}
|
|
170
|
-
const width = source.width ?? props.width;
|
|
171
|
-
const height = source.height ?? props.height;
|
|
172
|
-
style = [{width, height}, styles.base, props.style];
|
|
173
|
-
sources = [source];
|
|
174
|
-
}
|
|
175
201
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
202
|
+
let style_: ImageStyleProp;
|
|
203
|
+
let sources_;
|
|
204
|
+
let headers_: ?ImageSourceHeaders;
|
|
205
|
+
if (Array.isArray(source_)) {
|
|
206
|
+
style_ = [styles.base, style];
|
|
207
|
+
sources_ = source_;
|
|
208
|
+
headers_ = sources_[0].headers;
|
|
209
|
+
} else {
|
|
210
|
+
const {uri} = source_;
|
|
211
|
+
if (uri === '') {
|
|
212
|
+
console.warn('source.uri should not be an empty string');
|
|
213
|
+
}
|
|
214
|
+
const width_ = source_.width ?? width;
|
|
215
|
+
const height_ = source_.height ?? height;
|
|
216
|
+
style_ = [{width: width_, height: height_}, styles.base, style];
|
|
217
|
+
sources_ = [source_];
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
const nativeProps = restProps as {
|
|
221
|
+
...React.PropsOf<ImageViewNativeComponent>,
|
|
222
|
+
};
|
|
223
|
+
|
|
181
224
|
// Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
|
|
182
225
|
// (for historical reasons). So in the latter case we populate both "src" and "source",
|
|
183
226
|
// in order to have a better alignment between platforms in the future.
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
227
|
+
// TODO: `src` should be eventually removed from the API on Android.
|
|
228
|
+
nativeProps.src = sources_;
|
|
229
|
+
nativeProps.source = sources_;
|
|
230
|
+
|
|
231
|
+
nativeProps.style = style_;
|
|
232
|
+
|
|
233
|
+
if (headers_ != null) {
|
|
234
|
+
nativeProps.headers = headers_;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
if (onLoadStart != null) {
|
|
238
|
+
nativeProps.shouldNotifyLoadEvents = true;
|
|
239
|
+
nativeProps.onLoadStart = onLoadStart;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
if (onLoad != null) {
|
|
243
|
+
nativeProps.shouldNotifyLoadEvents = true;
|
|
244
|
+
nativeProps.onLoad = onLoad;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
if (onLoadEnd != null) {
|
|
248
|
+
nativeProps.shouldNotifyLoadEvents = true;
|
|
249
|
+
nativeProps.onLoadEnd = onLoadEnd;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
if (onError != null) {
|
|
253
|
+
nativeProps.shouldNotifyLoadEvents = true;
|
|
254
|
+
nativeProps.onError = onError;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
if (defaultSource_ != null && defaultSource_.uri != null) {
|
|
258
|
+
nativeProps.defaultSource = defaultSource_.uri;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
if (
|
|
262
|
+
loadingIndicatorSource_ != null &&
|
|
263
|
+
loadingIndicatorSource_.uri != null
|
|
264
|
+
) {
|
|
265
|
+
nativeProps.loadingIndicatorSrc = loadingIndicatorSource_.uri;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
if (ariaLabel != null) {
|
|
269
|
+
nativeProps.accessibilityLabel = ariaLabel;
|
|
270
|
+
} else if (accessibilityLabel != null) {
|
|
271
|
+
nativeProps.accessibilityLabel = accessibilityLabel;
|
|
272
|
+
} else if (alt != null) {
|
|
273
|
+
nativeProps.accessibilityLabel = alt;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
if (ariaLabelledBy != null) {
|
|
277
|
+
nativeProps.accessibilityLabelledBy = ariaLabelledBy;
|
|
278
|
+
} else if (accessibilityLabelledBy != null) {
|
|
279
|
+
nativeProps.accessibilityLabelledBy = accessibilityLabelledBy;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
if (alt != null) {
|
|
283
|
+
nativeProps.accessible = true;
|
|
284
|
+
} else if (accessible != null) {
|
|
285
|
+
nativeProps.accessible = accessible;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
if (
|
|
289
|
+
accessibilityState != null ||
|
|
290
|
+
ariaBusy != null ||
|
|
291
|
+
ariaChecked != null ||
|
|
292
|
+
ariaDisabled != null ||
|
|
293
|
+
ariaExpanded != null ||
|
|
294
|
+
ariaSelected != null
|
|
295
|
+
) {
|
|
296
|
+
nativeProps.accessibilityState = {
|
|
297
|
+
busy: ariaBusy ?? accessibilityState?.busy,
|
|
298
|
+
checked: ariaChecked ?? accessibilityState?.checked,
|
|
299
|
+
disabled: ariaDisabled ?? accessibilityState?.disabled,
|
|
300
|
+
expanded: ariaExpanded ?? accessibilityState?.expanded,
|
|
301
|
+
selected: ariaSelected ?? accessibilityState?.selected,
|
|
302
|
+
};
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
const flattenedStyle_ = flattenStyle<ImageStyleProp>(style);
|
|
306
|
+
const objectFit_ = convertObjectFitToResizeMode(flattenedStyle_?.objectFit);
|
|
307
|
+
const resizeMode_ =
|
|
308
|
+
objectFit_ || resizeMode || flattenedStyle_?.resizeMode || 'cover';
|
|
309
|
+
nativeProps.resizeMode = resizeMode_;
|
|
310
|
+
|
|
311
|
+
const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
|
|
312
|
+
|
|
313
|
+
const hasTextAncestor = use(TextAncestorContext);
|
|
314
|
+
const analyticTag = use(ImageAnalyticsTagContext);
|
|
315
|
+
if (analyticTag !== null) {
|
|
316
|
+
nativeProps.internal_analyticTag = analyticTag;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
return hasTextAncestor ? (
|
|
320
|
+
<TextInlineImageNativeComponent
|
|
321
|
+
// $FlowFixMe[incompatible-type]
|
|
322
|
+
style={style_}
|
|
323
|
+
resizeMode={resizeMode_}
|
|
324
|
+
headers={headers_}
|
|
325
|
+
src={sources_}
|
|
326
|
+
ref={actualRef}
|
|
327
|
+
/>
|
|
328
|
+
) : (
|
|
329
|
+
<ImageViewNativeComponent {...nativeProps} ref={actualRef} />
|
|
330
|
+
);
|
|
205
331
|
};
|
|
206
332
|
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
333
|
+
_BaseImage = BaseImage;
|
|
334
|
+
} else {
|
|
335
|
+
let BaseImage: AbstractImageAndroid = ({
|
|
336
|
+
ref: forwardedRef,
|
|
337
|
+
...props
|
|
338
|
+
}: {
|
|
339
|
+
ref?: React.RefSetter<HostInstance>,
|
|
340
|
+
...ImageProps,
|
|
341
|
+
}) => {
|
|
342
|
+
let source = getImageSourcesFromImageProps(props) || {
|
|
343
|
+
uri: undefined,
|
|
344
|
+
width: undefined,
|
|
345
|
+
height: undefined,
|
|
346
|
+
};
|
|
347
|
+
const defaultSource = resolveAssetSource(props.defaultSource);
|
|
348
|
+
const loadingIndicatorSource = resolveAssetSource(
|
|
349
|
+
props.loadingIndicatorSource,
|
|
350
|
+
);
|
|
351
|
+
|
|
352
|
+
if (props.children != null) {
|
|
353
|
+
throw new Error(
|
|
354
|
+
'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
|
|
355
|
+
);
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
if (props.defaultSource != null && props.loadingIndicatorSource != null) {
|
|
359
|
+
throw new Error(
|
|
360
|
+
'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
|
|
361
|
+
);
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
let style: ImageStyleProp;
|
|
365
|
+
let sources;
|
|
366
|
+
if (Array.isArray(source)) {
|
|
367
|
+
style = [styles.base, props.style];
|
|
368
|
+
sources = source;
|
|
369
|
+
} else {
|
|
370
|
+
const {uri} = source;
|
|
371
|
+
if (uri === '') {
|
|
372
|
+
console.warn('source.uri should not be an empty string');
|
|
373
|
+
}
|
|
374
|
+
const width = source.width ?? props.width;
|
|
375
|
+
const height = source.height ?? props.height;
|
|
376
|
+
style = [{width, height}, styles.base, props.style];
|
|
377
|
+
sources = [source];
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
const {onLoadStart, onLoad, onLoadEnd, onError} = props;
|
|
381
|
+
const nativeProps = {
|
|
382
|
+
...props,
|
|
383
|
+
style,
|
|
384
|
+
shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
|
|
385
|
+
// Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
|
|
386
|
+
// (for historical reasons). So in the latter case we populate both "src" and "source",
|
|
387
|
+
// in order to have a better alignment between platforms in the future.
|
|
388
|
+
src: sources,
|
|
389
|
+
source: sources,
|
|
390
|
+
/* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
|
|
391
|
+
* when making Flow check .android.js files. */
|
|
392
|
+
headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
|
|
393
|
+
defaultSource: defaultSource ? defaultSource.uri : null,
|
|
394
|
+
loadingIndicatorSrc: loadingIndicatorSource
|
|
395
|
+
? loadingIndicatorSource.uri
|
|
396
|
+
: null,
|
|
397
|
+
accessibilityLabel:
|
|
398
|
+
props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
|
|
399
|
+
accessibilityLabelledBy:
|
|
400
|
+
props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
|
|
401
|
+
accessible: props.alt !== undefined ? true : props.accessible,
|
|
402
|
+
accessibilityState: {
|
|
403
|
+
busy: props['aria-busy'] ?? props.accessibilityState?.busy,
|
|
404
|
+
checked: props['aria-checked'] ?? props.accessibilityState?.checked,
|
|
405
|
+
disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
|
|
406
|
+
expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
|
|
407
|
+
selected: props['aria-selected'] ?? props.accessibilityState?.selected,
|
|
408
|
+
},
|
|
409
|
+
};
|
|
410
|
+
|
|
411
|
+
const flattenedStyle = flattenStyle<ImageStyleProp>(style);
|
|
412
|
+
const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
|
|
413
|
+
const resizeMode =
|
|
414
|
+
objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
|
|
415
|
+
|
|
416
|
+
const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
|
|
417
|
+
|
|
418
|
+
return (
|
|
419
|
+
<ImageAnalyticsTagContext.Consumer>
|
|
420
|
+
{analyticTag => {
|
|
421
|
+
const nativePropsWithAnalytics =
|
|
422
|
+
analyticTag !== null
|
|
423
|
+
? {
|
|
424
|
+
...nativeProps,
|
|
425
|
+
internal_analyticTag: analyticTag,
|
|
426
|
+
}
|
|
427
|
+
: nativeProps;
|
|
428
|
+
return (
|
|
429
|
+
<TextAncestorContext.Consumer>
|
|
430
|
+
{hasTextAncestor => {
|
|
431
|
+
if (hasTextAncestor) {
|
|
432
|
+
return (
|
|
433
|
+
<TextInlineImageNativeComponent
|
|
434
|
+
// $FlowFixMe[incompatible-type]
|
|
435
|
+
style={style}
|
|
436
|
+
resizeMode={resizeMode}
|
|
437
|
+
headers={nativeProps.headers}
|
|
438
|
+
src={sources}
|
|
439
|
+
ref={actualRef}
|
|
440
|
+
/>
|
|
441
|
+
);
|
|
442
|
+
}
|
|
443
|
+
|
|
228
444
|
return (
|
|
229
|
-
<
|
|
230
|
-
|
|
231
|
-
style={style}
|
|
445
|
+
<ImageViewNativeComponent
|
|
446
|
+
{...nativePropsWithAnalytics}
|
|
232
447
|
resizeMode={resizeMode}
|
|
233
|
-
headers={nativeProps.headers}
|
|
234
|
-
src={sources}
|
|
235
448
|
ref={actualRef}
|
|
236
449
|
/>
|
|
237
450
|
);
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
</TextAncestorContext.Consumer>
|
|
249
|
-
);
|
|
250
|
-
}}
|
|
251
|
-
</ImageAnalyticsTagContext.Consumer>
|
|
252
|
-
);
|
|
253
|
-
};
|
|
451
|
+
}}
|
|
452
|
+
</TextAncestorContext.Consumer>
|
|
453
|
+
);
|
|
454
|
+
}}
|
|
455
|
+
</ImageAnalyticsTagContext.Consumer>
|
|
456
|
+
);
|
|
457
|
+
};
|
|
458
|
+
|
|
459
|
+
_BaseImage = BaseImage;
|
|
460
|
+
}
|
|
254
461
|
|
|
255
462
|
const imageComponentDecorator = unstable_getImageComponentDecorator();
|
|
256
463
|
if (imageComponentDecorator != null) {
|
|
257
|
-
|
|
464
|
+
_BaseImage = imageComponentDecorator(_BaseImage);
|
|
258
465
|
}
|
|
259
466
|
|
|
260
467
|
// $FlowExpectedError[incompatible-type] Eventually we need to move these functions from statics of the component to exports in the module.
|
|
261
|
-
const Image: ImageAndroid =
|
|
468
|
+
const Image: ImageAndroid = _BaseImage;
|
|
262
469
|
|
|
263
470
|
Image.displayName = 'Image';
|
|
264
471
|
|
|
@@ -15,20 +15,26 @@ import type {ImageProps} from './ImageProps';
|
|
|
15
15
|
|
|
16
16
|
import resolveAssetSource from './resolveAssetSource';
|
|
17
17
|
|
|
18
|
+
export type ImageSourceHeaders = {
|
|
19
|
+
[string]: string,
|
|
20
|
+
};
|
|
21
|
+
|
|
18
22
|
/**
|
|
19
23
|
* A function which returns the appropriate value for image source
|
|
20
24
|
* by resolving the `source`, `src` and `srcSet` props.
|
|
21
25
|
*/
|
|
22
26
|
export function getImageSourcesFromImageProps(
|
|
23
27
|
imageProps: ImageProps,
|
|
24
|
-
):
|
|
28
|
+
):
|
|
29
|
+
| ?ResolvedAssetSource
|
|
30
|
+
| $ReadOnlyArray<{uri: string, headers: ImageSourceHeaders, ...}> {
|
|
25
31
|
let source = resolveAssetSource(imageProps.source);
|
|
26
32
|
|
|
27
33
|
let sources;
|
|
28
34
|
|
|
29
35
|
const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps;
|
|
30
36
|
|
|
31
|
-
const headers:
|
|
37
|
+
const headers: ImageSourceHeaders = {};
|
|
32
38
|
if (crossOrigin === 'use-credentials') {
|
|
33
39
|
headers['Access-Control-Allow-Credentials'] = 'true';
|
|
34
40
|
}
|
|
@@ -111,7 +111,7 @@ function addCustomSourceTransformer(
|
|
|
111
111
|
function resolveAssetSource(source: ?ImageSource): ?ResolvedAssetSource {
|
|
112
112
|
if (source == null || typeof source === 'object') {
|
|
113
113
|
// $FlowFixMe[incompatible-exact] `source` doesn't exactly match `ResolvedAssetSource`
|
|
114
|
-
// $FlowFixMe[incompatible-
|
|
114
|
+
// $FlowFixMe[incompatible-type] `source` doesn't exactly match `ResolvedAssetSource`
|
|
115
115
|
return source;
|
|
116
116
|
}
|
|
117
117
|
|
|
@@ -422,7 +422,7 @@ const PanResponder = {
|
|
|
422
422
|
numberActiveTouches: 0,
|
|
423
423
|
_accountsForMovesUpTo: 0,
|
|
424
424
|
};
|
|
425
|
-
const panHandlers = {
|
|
425
|
+
const panHandlers: GestureResponderHandlerMethods = {
|
|
426
426
|
onStartShouldSetResponder(event: GestureResponderEvent): boolean {
|
|
427
427
|
return config.onStartShouldSetPanResponder == null
|
|
428
428
|
? false
|
|
@@ -432,7 +432,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
|
|
|
432
432
|
}));
|
|
433
433
|
} else if (this.props.onViewableItemsChanged) {
|
|
434
434
|
this._virtualizedListPairs.push({
|
|
435
|
-
/* $FlowFixMe[incompatible-
|
|
435
|
+
/* $FlowFixMe[incompatible-type] (>=0.63.0 site=react_native_fb) This
|
|
436
436
|
* comment suppresses an error found when Flow v0.63 was deployed. To
|
|
437
437
|
* see the error delete this comment and run Flow. */
|
|
438
438
|
viewabilityConfig: this.props.viewabilityConfig,
|
|
@@ -569,7 +569,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
|
|
|
569
569
|
.join(':');
|
|
570
570
|
}
|
|
571
571
|
|
|
572
|
-
// $FlowFixMe[incompatible-
|
|
572
|
+
// $FlowFixMe[incompatible-type] Can't call keyExtractor with an array
|
|
573
573
|
return keyExtractor(items, index);
|
|
574
574
|
};
|
|
575
575
|
|
|
@@ -626,11 +626,10 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
|
|
|
626
626
|
const render = (props: ListRenderItemInfo<ItemT>): React.Node => {
|
|
627
627
|
if (ListItemComponent) {
|
|
628
628
|
// $FlowFixMe[not-a-component] Component isn't valid
|
|
629
|
-
// $FlowFixMe[incompatible-type
|
|
630
|
-
// $FlowFixMe[incompatible-return] Component isn't valid
|
|
629
|
+
// $FlowFixMe[incompatible-type] Component isn't valid
|
|
631
630
|
return <ListItemComponent {...props} />;
|
|
632
631
|
} else if (renderItem) {
|
|
633
|
-
// $FlowFixMe[incompatible-
|
|
632
|
+
// $FlowFixMe[incompatible-type]
|
|
634
633
|
return renderItem(props);
|
|
635
634
|
} else {
|
|
636
635
|
return null;
|
|
@@ -648,7 +647,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
|
|
|
648
647
|
<View style={StyleSheet.compose(styles.row, columnWrapperStyle)}>
|
|
649
648
|
{item.map((it, kk) => {
|
|
650
649
|
const element = render({
|
|
651
|
-
// $FlowFixMe[incompatible-
|
|
650
|
+
// $FlowFixMe[incompatible-type]
|
|
652
651
|
item: it,
|
|
653
652
|
index: index * cols + kk,
|
|
654
653
|
separators: info.separators,
|
|
@@ -442,7 +442,7 @@ export function withSubscription(
|
|
|
442
442
|
componentDidCatch(err: Error, errorInfo: {componentStack: string, ...}) {
|
|
443
443
|
/* $FlowFixMe[class-object-subtyping] added when improving typing for
|
|
444
444
|
* this parameters */
|
|
445
|
-
// $FlowFixMe[incompatible-
|
|
445
|
+
// $FlowFixMe[incompatible-type]
|
|
446
446
|
reportLogBoxError(err, errorInfo.componentStack);
|
|
447
447
|
}
|
|
448
448
|
|
|
@@ -509,7 +509,7 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
|
|
|
509
509
|
return {
|
|
510
510
|
...parseInterpolation(argsWithoutComponentStack),
|
|
511
511
|
componentStack,
|
|
512
|
-
/* $FlowFixMe[incompatible-
|
|
512
|
+
/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
513
513
|
* https://fburl.com/workplace/6291gfvu */
|
|
514
514
|
componentStackType,
|
|
515
515
|
};
|
package/Libraries/Modal/Modal.js
CHANGED
|
@@ -370,13 +370,13 @@ const styles = StyleSheet.create({
|
|
|
370
370
|
modal: {
|
|
371
371
|
position: 'absolute',
|
|
372
372
|
},
|
|
373
|
-
/* $FlowFixMe[incompatible-
|
|
373
|
+
/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
|
|
374
374
|
* https://fburl.com/workplace/6291gfvu */
|
|
375
375
|
container: {
|
|
376
376
|
/* $FlowFixMe[invalid-computed-prop] (>=0.111.0 site=react_native_fb) This
|
|
377
377
|
* comment suppresses an error found when Flow v0.111 was deployed. To see
|
|
378
378
|
* the error, delete this comment and run Flow. */
|
|
379
|
-
// $FlowFixMe[incompatible-
|
|
379
|
+
// $FlowFixMe[incompatible-type]
|
|
380
380
|
[side]: 0,
|
|
381
381
|
top: 0,
|
|
382
382
|
flex: 1,
|
|
@@ -32,7 +32,7 @@ export function createViewConfig(
|
|
|
32
32
|
PlatformBaseViewConfig.directEventTypes,
|
|
33
33
|
partialViewConfig.directEventTypes,
|
|
34
34
|
),
|
|
35
|
-
// $FlowFixMe[incompatible-
|
|
35
|
+
// $FlowFixMe[incompatible-type]
|
|
36
36
|
validAttributes: composeIndexers(
|
|
37
37
|
// $FlowFixMe[incompatible-call] `style` property confuses Flow.
|
|
38
38
|
PlatformBaseViewConfig.validAttributes,
|
|
@@ -53,7 +53,7 @@ const RCTNetworking = {
|
|
|
53
53
|
listener: (...RCTNetworkingEventDefinitions[K]) => mixed,
|
|
54
54
|
context?: mixed,
|
|
55
55
|
): EventSubscription {
|
|
56
|
-
// $FlowFixMe[incompatible-
|
|
56
|
+
// $FlowFixMe[incompatible-type]
|
|
57
57
|
return emitter.addListener(eventType, listener, context);
|
|
58
58
|
},
|
|
59
59
|
|