@react-native-oh/react-native-harmony 0.72.86 → 0.77.18

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 (81) hide show
  1. package/LICENSE +21 -0
  2. package/LICENSE-Meta +21 -0
  3. package/Libraries/Alert/delegates/AlertDelegate.harmony.ts +84 -0
  4. package/Libraries/Alert/{AlertManager.ts → delegates/AlertManager.harmony.ts} +10 -4
  5. package/Libraries/Animated/shouldUseTurboAnimatedModule.harmony.ts +10 -0
  6. package/Libraries/Components/AccessibilityInfo/delegates/AccessibilityInfoDelegate.harmony.ts +44 -0
  7. package/Libraries/Components/AccessibilityInfo/{NativeAccessibilityInfoHarmony.ts → delegates/NativeAccessibilityInfoHarmony.harmony.ts} +9 -2
  8. package/Libraries/Components/Keyboard/delegates/KeyboardAvoidingViewDelegate.harmony.ts +42 -0
  9. package/Libraries/Components/RefreshControl/delegates/RefreshControlDelegate.harmony.tsx +29 -0
  10. package/Libraries/Components/SafeAreaView/SafeAreaView.harmony.tsx +93 -31
  11. package/Libraries/Components/ScrollView/delegates/ScrollViewDelegate.harmony.tsx +41 -0
  12. package/Libraries/Components/ScrollView/delegates/ScrollViewNativeComponentDelegate.harmony.ts +89 -0
  13. package/Libraries/Components/ScrollView/processDecelerationRate.harmony.ts +19 -0
  14. package/Libraries/Components/StatusBar/delegates/NativeStatusBarManagerHarmony.harmony.ts +53 -0
  15. package/Libraries/Components/StatusBar/delegates/StatusBarDelegate.harmony.ts +83 -0
  16. package/Libraries/Components/TextInput/delegates/TextInputDelegate.harmony.tsx +98 -0
  17. package/Libraries/Components/TextInput/delegates/TextInputStateDelegate.harmony.tsx +20 -0
  18. package/Libraries/Components/Touchable/delegates/TouchableHighlightDelegate.harmony.ts +14 -0
  19. package/Libraries/Components/Touchable/delegates/TouchableNativeFeedbackDelegate.harmony.ts +14 -0
  20. package/Libraries/Components/Touchable/delegates/TouchableWithoutFeedbackDelegate.harmony.ts +14 -0
  21. package/Libraries/Components/delegates/ButtonDelegate.harmony.ts +41 -0
  22. package/Libraries/Core/setUpPlatform.harmony.js +30 -0
  23. package/Libraries/Image/AssetSourceResolver.harmony.ts +1 -5
  24. package/Libraries/Image/Image.harmony.ts +17 -0
  25. package/Libraries/NativeComponent/BaseViewConfig.harmony.js +12 -326
  26. package/Libraries/NativeComponent/delegates/ViewConfigIgnoreDelegate.harmony.ts +13 -0
  27. package/Libraries/ReactNative/delegates/BridgelessUIManagerDelegate.harmony.ts +14 -0
  28. package/Libraries/ReactNative/delegates/I18nManagerDelegate.harmony.ts +22 -0
  29. package/Libraries/Settings/Settings.harmony.ts +20 -0
  30. package/Libraries/Share/delegates/ShareDelegate.harmony.ts +42 -0
  31. package/Libraries/StyleSheet/NativePlatformColor.harmony.ts +15 -0
  32. package/Libraries/StyleSheet/PlatformColorValueTypes.harmony.ts +8 -1
  33. package/Libraries/Utilities/BackHandler.harmony.ts +10 -0
  34. package/Libraries/Utilities/NativePlatformConstantsHarmony.harmony.ts +17 -0
  35. package/Libraries/Utilities/Platform.harmony.ts +38 -13
  36. package/Libraries/Vibration/delegates/VibrationDelegate.harmony.ts +14 -0
  37. package/NOTICE.md +846 -0
  38. package/README.md +2 -2
  39. package/index.js +53 -63
  40. package/jest.config.js +0 -7
  41. package/metro.config.d.ts +17 -0
  42. package/metro.config.js +398 -115
  43. package/package.json +58 -37
  44. package/react-native.config.js +57 -9
  45. package/react_native_openharmony.har +0 -0
  46. package/tsconfig.json +10 -4
  47. package/types/index.harmony.d.ts +99 -0
  48. package/Libraries/Alert/Alert.harmony.js +0 -77
  49. package/Libraries/Animated/NativeAnimatedHelper.harmony.js +0 -601
  50. package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.harmony.js +0 -441
  51. package/Libraries/Components/Button/Button.harmony.js +0 -451
  52. package/Libraries/Components/Image/Image.flow.harmony.js +0 -53
  53. package/Libraries/Components/Image/Image.harmony.js +0 -317
  54. package/Libraries/Components/Image/NativeImageLoaderHarmony.js +0 -38
  55. package/Libraries/Components/Keyboard/KeyboardAvoidingView.harmony.js +0 -256
  56. package/Libraries/Components/RefreshControl/RefreshControl.harmony.js +0 -210
  57. package/Libraries/Components/ScrollView/ScrollView.harmony.js +0 -1951
  58. package/Libraries/Components/ScrollView/processDecelerationRate.harmony.js +0 -24
  59. package/Libraries/Components/StatusBar/NativeStatusBarManagerHarmony.js +0 -71
  60. package/Libraries/Components/StatusBar/StatusBar.harmony.js +0 -447
  61. package/Libraries/Components/TextInput/TextInput.harmony.js +0 -1716
  62. package/Libraries/Components/TextInput/TextInputState.harmony.js +0 -220
  63. package/Libraries/Components/Touchable/TouchableHighlight.harmony.js +0 -396
  64. package/Libraries/Components/Touchable/TouchableNativeFeedback.harmony.js +0 -364
  65. package/Libraries/Components/Touchable/TouchableWithoutFeedback.harmony.js +0 -227
  66. package/Libraries/Components/View/View.harmony.js +0 -149
  67. package/Libraries/Core/setUpReactDevTools.harmony.js +0 -93
  68. package/Libraries/ReactNative/I18nManager.harmony.js +0 -78
  69. package/Libraries/ReactNative/UIManager.harmony.js +0 -210
  70. package/Libraries/Settings/Settings.harmony.js +0 -15
  71. package/Libraries/Share/Share.harmony.js +0 -174
  72. package/Libraries/StyleSheet/NativePlatformColor.ts +0 -8
  73. package/Libraries/Utilities/BackHandler.harmony.js +0 -109
  74. package/Libraries/Utilities/NativePlatformConstants.harmony.ts +0 -8
  75. package/Libraries/Utilities/Platform.d.ts +0 -117
  76. package/Libraries/Utilities/createPerformanceLogger.harmony.js +0 -328
  77. package/Libraries/Vibration/Vibration.harmony.js +0 -88
  78. package/harmony/.keep +0 -0
  79. package/harmony/rnoh-hvigor-plugin-0.2.0.tgz +0 -0
  80. package/react_native_openharmony_release.har +0 -0
  81. package/types/index.d.ts +0 -108
@@ -1,1951 +0,0 @@
1
- /**
2
- * Copyright (c) Meta Platforms, Inc. and affiliates.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @format
8
- * @flow strict-local
9
- */
10
-
11
- //RNOH: patch - fix imports
12
- import type { HostComponent } from "react-native/Libraries/Renderer/shims/ReactNativeTypes";
13
- import type { EdgeInsetsProp } from "react-native/Libraries/StyleSheet/EdgeInsetsPropType";
14
- import type { PointProp } from "react-native/Libraries/StyleSheet/PointPropType";
15
- import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
16
- import type { ColorValue } from "react-native/Libraries/StyleSheet/StyleSheet";
17
- import type {
18
- LayoutEvent,
19
- PressEvent,
20
- ScrollEvent,
21
- } from "react-native/Libraries/Types/CoreEventTypes";
22
- import type { EventSubscription } from "react-native/Libraries/vendor/emitter/EventEmitter";
23
- import type {
24
- KeyboardEvent,
25
- KeyboardMetrics,
26
- } from "react-native/Libraries/Components/Keyboard/Keyboard";
27
- import type { ViewProps } from "react-native/Libraries/Components/View/ViewPropTypes";
28
- import type { Props as ScrollViewStickyHeaderProps } from "react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader";
29
-
30
- import AnimatedImplementation from "react-native/Libraries/Animated/AnimatedImplementation";
31
- import FrameRateLogger from "react-native/Libraries/Interaction/FrameRateLogger";
32
- import { findNodeHandle } from "react-native/Libraries/ReactNative/RendererProxy";
33
- import UIManager from "react-native/Libraries/ReactNative/UIManager";
34
- import flattenStyle from "react-native/Libraries/StyleSheet/flattenStyle";
35
- import splitLayoutProps from "react-native/Libraries/StyleSheet/splitLayoutProps";
36
- import StyleSheet from "react-native/Libraries/StyleSheet/StyleSheet";
37
- import Dimensions from "react-native/Libraries/Utilities/Dimensions";
38
- import dismissKeyboard from "react-native/Libraries/Utilities/dismissKeyboard";
39
- import Platform from "../../Utilities/Platform";
40
- import Keyboard from "react-native/Libraries/Components/Keyboard/Keyboard";
41
- import TextInputState from "../TextInput/TextInputState.harmony";
42
- import View from "react-native/Libraries/Components/View/View";
43
- import AndroidHorizontalScrollContentViewNativeComponent from "react-native/Libraries/Components/ScrollView/AndroidHorizontalScrollContentViewNativeComponent";
44
- import AndroidHorizontalScrollViewNativeComponent from "react-native/Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent";
45
- import processDecelerationRate from "./processDecelerationRate";
46
- import ScrollContentViewNativeComponent from "react-native/Libraries/Components/ScrollView/ScrollContentViewNativeComponent";
47
- import Commands from "react-native/Libraries/Components/ScrollView/ScrollViewCommands";
48
- import ScrollViewContext, {
49
- HORIZONTAL,
50
- VERTICAL,
51
- } from "react-native/Libraries/Components/ScrollView/ScrollViewContext";
52
- import ScrollViewNativeComponent from "react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent";
53
- import ScrollViewStickyHeader from "react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader";
54
- import invariant from "invariant";
55
- import memoize from "memoize-one";
56
- import nullthrows from "nullthrows";
57
- import * as React from "react";
58
-
59
- if (Platform.OS === "ios") {
60
- require("react-native/Libraries/Renderer/shims/ReactNative"); // Force side effects to prevent T55744311
61
- }
62
-
63
- const { NativeHorizontalScrollViewTuple, NativeVerticalScrollViewTuple } =
64
- Platform.OS === "android"
65
- ? {
66
- NativeHorizontalScrollViewTuple: [
67
- AndroidHorizontalScrollViewNativeComponent,
68
- AndroidHorizontalScrollContentViewNativeComponent,
69
- ],
70
- NativeVerticalScrollViewTuple: [ScrollViewNativeComponent, View],
71
- }
72
- : {
73
- NativeHorizontalScrollViewTuple: [
74
- ScrollViewNativeComponent,
75
- ScrollContentViewNativeComponent,
76
- ],
77
- NativeVerticalScrollViewTuple: [
78
- ScrollViewNativeComponent,
79
- ScrollContentViewNativeComponent,
80
- ],
81
- };
82
-
83
- /*
84
- * iOS scroll event timing nuances:
85
- * ===============================
86
- *
87
- *
88
- * Scrolling without bouncing, if you touch down:
89
- * -------------------------------
90
- *
91
- * 1. `onMomentumScrollBegin` (when animation begins after letting up)
92
- * ... physical touch starts ...
93
- * 2. `onTouchStartCapture` (when you press down to stop the scroll)
94
- * 3. `onTouchStart` (same, but bubble phase)
95
- * 4. `onResponderRelease` (when lifting up - you could pause forever before * lifting)
96
- * 5. `onMomentumScrollEnd`
97
- *
98
- *
99
- * Scrolling with bouncing, if you touch down:
100
- * -------------------------------
101
- *
102
- * 1. `onMomentumScrollBegin` (when animation begins after letting up)
103
- * ... bounce begins ...
104
- * ... some time elapses ...
105
- * ... physical touch during bounce ...
106
- * 2. `onMomentumScrollEnd` (Makes no sense why this occurs first during bounce)
107
- * 3. `onTouchStartCapture` (immediately after `onMomentumScrollEnd`)
108
- * 4. `onTouchStart` (same, but bubble phase)
109
- * 5. `onTouchEnd` (You could hold the touch start for a long time)
110
- * 6. `onMomentumScrollBegin` (When releasing the view starts bouncing back)
111
- *
112
- * So when we receive an `onTouchStart`, how can we tell if we are touching
113
- * *during* an animation (which then causes the animation to stop)? The only way
114
- * to tell is if the `touchStart` occurred immediately after the
115
- * `onMomentumScrollEnd`.
116
- *
117
- * This is abstracted out for you, so you can just call this.scrollResponderIsAnimating() if
118
- * necessary
119
- *
120
- * `ScrollView` also includes logic for blurring a currently focused input
121
- * if one is focused while scrolling. This is a natural place
122
- * to put this logic since it can support not dismissing the keyboard while
123
- * scrolling, unless a recognized "tap"-like gesture has occurred.
124
- *
125
- * The public lifecycle API includes events for keyboard interaction, responder
126
- * interaction, and scrolling (among others). The keyboard callbacks
127
- * `onKeyboardWill/Did/*` are *global* events, but are invoked on scroll
128
- * responder's props so that you can guarantee that the scroll responder's
129
- * internal state has been updated accordingly (and deterministically) by
130
- * the time the props callbacks are invoke. Otherwise, you would always wonder
131
- * if the scroll responder is currently in a state where it recognizes new
132
- * keyboard positions etc. If coordinating scrolling with keyboard movement,
133
- * *always* use these hooks instead of listening to your own global keyboard
134
- * events.
135
- *
136
- * Public keyboard lifecycle API: (props callbacks)
137
- *
138
- * Standard Keyboard Appearance Sequence:
139
- *
140
- * this.props.onKeyboardWillShow
141
- * this.props.onKeyboardDidShow
142
- *
143
- * `onScrollResponderKeyboardDismissed` will be invoked if an appropriate
144
- * tap inside the scroll responder's scrollable region was responsible
145
- * for the dismissal of the keyboard. There are other reasons why the
146
- * keyboard could be dismissed.
147
- *
148
- * this.props.onScrollResponderKeyboardDismissed
149
- *
150
- * Standard Keyboard Hide Sequence:
151
- *
152
- * this.props.onKeyboardWillHide
153
- * this.props.onKeyboardDidHide
154
- */
155
-
156
- // Public methods for ScrollView
157
- export type ScrollViewImperativeMethods = $ReadOnly<{|
158
- getScrollResponder: $PropertyType<ScrollView, "getScrollResponder">,
159
- getScrollableNode: $PropertyType<ScrollView, "getScrollableNode">,
160
- getInnerViewNode: $PropertyType<ScrollView, "getInnerViewNode">,
161
- getInnerViewRef: $PropertyType<ScrollView, "getInnerViewRef">,
162
- getNativeScrollRef: $PropertyType<ScrollView, "getNativeScrollRef">,
163
- scrollTo: $PropertyType<ScrollView, "scrollTo">,
164
- scrollToEnd: $PropertyType<ScrollView, "scrollToEnd">,
165
- flashScrollIndicators: $PropertyType<ScrollView, "flashScrollIndicators">,
166
- scrollResponderZoomTo: $PropertyType<ScrollView, "scrollResponderZoomTo">,
167
- scrollResponderScrollNativeHandleToKeyboard: $PropertyType<
168
- ScrollView,
169
- "scrollResponderScrollNativeHandleToKeyboard"
170
- >,
171
- |}>;
172
-
173
- export type DecelerationRateType = "fast" | "normal" | number;
174
- export type ScrollResponderType = ScrollViewImperativeMethods;
175
-
176
- type NativeScrollViewInstance = React.ElementRef<HostComponent<mixed>>;
177
- type PublicScrollViewInstance = $ReadOnly<{|
178
- ...$Exact<NativeScrollViewInstance>,
179
- ...ScrollViewImperativeMethods,
180
- |}>;
181
-
182
- type InnerViewInstance = React.ElementRef<typeof View>;
183
-
184
- type IOSProps = $ReadOnly<{|
185
- /**
186
- * Controls whether iOS should automatically adjust the content inset
187
- * for scroll views that are placed behind a navigation bar or
188
- * tab bar/ toolbar. The default value is true.
189
- * @platform ios
190
- */
191
- automaticallyAdjustContentInsets?: ?boolean,
192
- /**
193
- * Controls whether the ScrollView should automatically adjust its `contentInset`
194
- * and `scrollViewInsets` when the Keyboard changes its size. The default value is false.
195
- * @platform ios
196
- */
197
- automaticallyAdjustKeyboardInsets?: ?boolean,
198
- /**
199
- * Controls whether iOS should automatically adjust the scroll indicator
200
- * insets. The default value is true. Available on iOS 13 and later.
201
- * @platform ios
202
- */
203
- automaticallyAdjustsScrollIndicatorInsets?: ?boolean,
204
- /**
205
- * The amount by which the scroll view content is inset from the edges
206
- * of the scroll view. Defaults to `{top: 0, left: 0, bottom: 0, right: 0}`.
207
- * @platform ios
208
- */
209
- contentInset?: ?EdgeInsetsProp,
210
- /**
211
- * When true, the scroll view bounces when it reaches the end of the
212
- * content if the content is larger then the scroll view along the axis of
213
- * the scroll direction. When false, it disables all bouncing even if
214
- * the `alwaysBounce*` props are true. The default value is true.
215
- * @platform ios
216
- */
217
- bounces?: ?boolean,
218
- /**
219
- * By default, ScrollView has an active pan responder that hijacks panresponders
220
- * deeper in the render tree in order to prevent accidental touches while scrolling.
221
- * However, in certain occasions (such as when using snapToInterval) in a vertical scrollview
222
- * You may want to disable this behavior in order to prevent the ScrollView from blocking touches
223
- */
224
- disableScrollViewPanResponder?: ?boolean,
225
- /**
226
- * When true, gestures can drive zoom past min/max and the zoom will animate
227
- * to the min/max value at gesture end, otherwise the zoom will not exceed
228
- * the limits.
229
- * @platform ios
230
- */
231
- bouncesZoom?: ?boolean,
232
- /**
233
- * When true, the scroll view bounces horizontally when it reaches the end
234
- * even if the content is smaller than the scroll view itself. The default
235
- * value is true when `horizontal={true}` and false otherwise.
236
- * @platform ios
237
- */
238
- alwaysBounceHorizontal?: ?boolean,
239
- /**
240
- * When true, the scroll view bounces vertically when it reaches the end
241
- * even if the content is smaller than the scroll view itself. The default
242
- * value is false when `horizontal={true}` and true otherwise.
243
- * @platform ios
244
- */
245
- alwaysBounceVertical?: ?boolean,
246
- /**
247
- * When true, the scroll view automatically centers the content when the
248
- * content is smaller than the scroll view bounds; when the content is
249
- * larger than the scroll view, this property has no effect. The default
250
- * value is false.
251
- * @platform ios
252
- */
253
- centerContent?: ?boolean,
254
- /**
255
- * The style of the scroll indicators.
256
- *
257
- * - `'default'` (the default), same as `black`.
258
- * - `'black'`, scroll indicator is black. This style is good against a light background.
259
- * - `'white'`, scroll indicator is white. This style is good against a dark background.
260
- *
261
- * @platform ios
262
- */
263
- indicatorStyle?: ?("default" | "black" | "white"),
264
- /**
265
- * When true, the ScrollView will try to lock to only vertical or horizontal
266
- * scrolling while dragging. The default value is false.
267
- * @platform ios
268
- */
269
- directionalLockEnabled?: ?boolean,
270
- /**
271
- * When false, once tracking starts, won't try to drag if the touch moves.
272
- * The default value is true.
273
- * @platform ios
274
- */
275
- canCancelContentTouches?: ?boolean,
276
- /**
277
- * When set, the scroll view will adjust the scroll position so that the first child that is
278
- * currently visible and at or beyond `minIndexForVisible` will not change position. This is
279
- * useful for lists that are loading content in both directions, e.g. a chat thread, where new
280
- * messages coming in might otherwise cause the scroll position to jump. A value of 0 is common,
281
- * but other values such as 1 can be used to skip loading spinners or other content that should
282
- * not maintain position.
283
- *
284
- * The optional `autoscrollToTopThreshold` can be used to make the content automatically scroll
285
- * to the top after making the adjustment if the user was within the threshold of the top before
286
- * the adjustment was made. This is also useful for chat-like applications where you want to see
287
- * new messages scroll into place, but not if the user has scrolled up a ways and it would be
288
- * disruptive to scroll a bunch.
289
- *
290
- * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause
291
- * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now,
292
- * don't re-order the content of any ScrollViews or Lists that use this feature.
293
- *
294
- * Caveat 2: This simply uses `contentOffset` and `frame.origin` in native code to compute
295
- * visibility. Occlusion, transforms, and other complexity won't be taken into account as to
296
- * whether content is "visible" or not.
297
- *
298
- */
299
- maintainVisibleContentPosition?: ?$ReadOnly<{|
300
- minIndexForVisible: number,
301
- autoscrollToTopThreshold?: ?number,
302
- |}>,
303
- /**
304
- * The maximum allowed zoom scale. The default value is 1.0.
305
- * @platform ios
306
- */
307
- maximumZoomScale?: ?number,
308
- /**
309
- * The minimum allowed zoom scale. The default value is 1.0.
310
- * @platform ios
311
- */
312
- minimumZoomScale?: ?number,
313
- /**
314
- * When true, ScrollView allows use of pinch gestures to zoom in and out.
315
- * The default value is true.
316
- * @platform ios
317
- */
318
- pinchGestureEnabled?: ?boolean,
319
- /**
320
- * The amount by which the scroll view indicators are inset from the edges
321
- * of the scroll view. This should normally be set to the same value as
322
- * the `contentInset`. Defaults to `{0, 0, 0, 0}`.
323
- * @platform ios
324
- */
325
- scrollIndicatorInsets?: ?EdgeInsetsProp,
326
- /**
327
- * When true, the scroll view can be programmatically scrolled beyond its
328
- * content size. The default value is false.
329
- * @platform ios
330
- */
331
- scrollToOverflowEnabled?: ?boolean,
332
- /**
333
- * When true, the scroll view scrolls to top when the status bar is tapped.
334
- * The default value is true.
335
- * @platform ios
336
- */
337
- scrollsToTop?: ?boolean,
338
- /**
339
- * Fires when the scroll view scrolls to top after the status bar has been tapped
340
- * @platform ios
341
- */
342
- onScrollToTop?: (event: ScrollEvent) => void,
343
- /**
344
- * When true, shows a horizontal scroll indicator.
345
- * The default value is true.
346
- */
347
- showsHorizontalScrollIndicator?: ?boolean,
348
- /**
349
- * The current scale of the scroll view content. The default value is 1.0.
350
- * @platform ios
351
- */
352
- zoomScale?: ?number,
353
- /**
354
- * This property specifies how the safe area insets are used to modify the
355
- * content area of the scroll view. The default value of this property is
356
- * "never". Available on iOS 11 and later.
357
- * @platform ios
358
- */
359
- contentInsetAdjustmentBehavior?: ?(
360
- | "automatic"
361
- | "scrollableAxes"
362
- | "never"
363
- | "always"
364
- ),
365
- |}>;
366
-
367
- type AndroidProps = $ReadOnly<{|
368
- /**
369
- * Enables nested scrolling for Android API level 21+.
370
- * Nested scrolling is supported by default on iOS
371
- * @platform android
372
- */
373
- nestedScrollEnabled?: ?boolean,
374
- /**
375
- * Sometimes a scrollview takes up more space than its content fills. When this is
376
- * the case, this prop will fill the rest of the scrollview with a color to avoid setting
377
- * a background and creating unnecessary overdraw. This is an advanced optimization
378
- * that is not needed in the general case.
379
- * @platform android
380
- */
381
- endFillColor?: ?ColorValue,
382
- /**
383
- * Tag used to log scroll performance on this scroll view. Will force
384
- * momentum events to be turned on (see sendMomentumEvents). This doesn't do
385
- * anything out of the box and you need to implement a custom native
386
- * FpsListener for it to be useful.
387
- * @platform android
388
- */
389
- scrollPerfTag?: ?string,
390
- /**
391
- * Used to override default value of overScroll mode.
392
- *
393
- * Possible values:
394
- *
395
- * - `'auto'` - Default value, allow a user to over-scroll
396
- * this view only if the content is large enough to meaningfully scroll.
397
- * - `'always'` - Always allow a user to over-scroll this view.
398
- * - `'never'` - Never allow a user to over-scroll this view.
399
- *
400
- * @platform android
401
- */
402
- overScrollMode?: ?("auto" | "always" | "never"),
403
- /**
404
- * Causes the scrollbars not to turn transparent when they are not in use.
405
- * The default value is false.
406
- *
407
- * @platform android
408
- */
409
- persistentScrollbar?: ?boolean,
410
- /**
411
- * Fades out the edges of the scroll content.
412
- *
413
- * If the value is greater than 0, the fading edges will be set accordingly
414
- * to the current scroll direction and position,
415
- * indicating if there is more content to show.
416
- *
417
- * The default value is 0.
418
- *
419
- * @platform android
420
- */
421
- fadingEdgeLength?: ?number,
422
- |}>;
423
-
424
- type StickyHeaderComponentType = React.AbstractComponent<
425
- ScrollViewStickyHeaderProps,
426
- $ReadOnly<interface { setNextHeaderY: (number) => void }>
427
- >;
428
-
429
- export type Props = $ReadOnly<{|
430
- ...ViewProps,
431
- ...IOSProps,
432
- ...AndroidProps,
433
-
434
- /**
435
- * These styles will be applied to the scroll view content container which
436
- * wraps all of the child views. Example:
437
- *
438
- * ```
439
- * return (
440
- * <ScrollView contentContainerStyle={styles.contentContainer}>
441
- * </ScrollView>
442
- * );
443
- * ...
444
- * const styles = StyleSheet.create({
445
- * contentContainer: {
446
- * paddingVertical: 20
447
- * }
448
- * });
449
- * ```
450
- */
451
- contentContainerStyle?: ?ViewStyleProp,
452
- /**
453
- * Used to manually set the starting scroll offset.
454
- * The default value is `{x: 0, y: 0}`.
455
- */
456
- contentOffset?: ?PointProp,
457
- /**
458
- * When true, the scroll view stops on the next index (in relation to scroll
459
- * position at release) regardless of how fast the gesture is. This can be
460
- * used for pagination when the page is less than the width of the
461
- * horizontal ScrollView or the height of the vertical ScrollView. The default value is false.
462
- */
463
- disableIntervalMomentum?: ?boolean,
464
- /**
465
- * A floating-point number that determines how quickly the scroll view
466
- * decelerates after the user lifts their finger. You may also use string
467
- * shortcuts `"normal"` and `"fast"` which match the underlying iOS settings
468
- * for `UIScrollViewDecelerationRateNormal` and
469
- * `UIScrollViewDecelerationRateFast` respectively.
470
- *
471
- * - `'normal'`: 0.998 on iOS, 0.985 on Android (the default)
472
- * - `'fast'`: 0.99 on iOS, 0.9 on Android
473
- */
474
- decelerationRate?: ?DecelerationRateType,
475
- /**
476
- * When true, the scroll view's children are arranged horizontally in a row
477
- * instead of vertically in a column. The default value is false.
478
- */
479
- horizontal?: ?boolean,
480
- /**
481
- * If sticky headers should stick at the bottom instead of the top of the
482
- * ScrollView. This is usually used with inverted ScrollViews.
483
- */
484
- invertStickyHeaders?: ?boolean,
485
- /**
486
- * Determines whether the keyboard gets dismissed in response to a drag.
487
- *
488
- * *Cross platform*
489
- *
490
- * - `'none'` (the default), drags do not dismiss the keyboard.
491
- * - `'on-drag'`, the keyboard is dismissed when a drag begins.
492
- *
493
- * *iOS Only*
494
- *
495
- * - `'interactive'`, the keyboard is dismissed interactively with the drag and moves in
496
- * synchrony with the touch; dragging upwards cancels the dismissal.
497
- * On android this is not supported and it will have the same behavior as 'none'.
498
- */
499
- keyboardDismissMode?: ?// default
500
- // cross-platform
501
- ("none" | "on-drag" | "interactive"), // ios only
502
- /**
503
- * Determines when the keyboard should stay visible after a tap.
504
- *
505
- * - `'never'` (the default), tapping outside of the focused text input when the keyboard
506
- * is up dismisses the keyboard. When this happens, children won't receive the tap.
507
- * - `'always'`, the keyboard will not dismiss automatically, and the scroll view will not
508
- * catch taps, but children of the scroll view can catch taps.
509
- * - `'handled'`, the keyboard will not dismiss automatically when the tap was handled by
510
- * a children, (or captured by an ancestor).
511
- * - `false`, deprecated, use 'never' instead
512
- * - `true`, deprecated, use 'always' instead
513
- */
514
- keyboardShouldPersistTaps?: ?("always" | "never" | "handled" | true | false),
515
- /**
516
- * Called when the momentum scroll starts (scroll which occurs as the ScrollView glides to a stop).
517
- */
518
- onMomentumScrollBegin?: ?(event: ScrollEvent) => void,
519
- /**
520
- * Called when the momentum scroll ends (scroll which occurs as the ScrollView glides to a stop).
521
- */
522
- onMomentumScrollEnd?: ?(event: ScrollEvent) => void,
523
-
524
- /**
525
- * Fires at most once per frame during scrolling. The frequency of the
526
- * events can be controlled using the `scrollEventThrottle` prop.
527
- */
528
- onScroll?: ?(event: ScrollEvent) => void,
529
- /**
530
- * Called when the user begins to drag the scroll view.
531
- */
532
- onScrollBeginDrag?: ?(event: ScrollEvent) => void,
533
- /**
534
- * Called when the user stops dragging the scroll view and it either stops
535
- * or begins to glide.
536
- */
537
- onScrollEndDrag?: ?(event: ScrollEvent) => void,
538
- /**
539
- * Called when scrollable content view of the ScrollView changes.
540
- *
541
- * Handler function is passed the content width and content height as parameters:
542
- * `(contentWidth, contentHeight)`
543
- *
544
- * It's implemented using onLayout handler attached to the content container
545
- * which this ScrollView renders.
546
- */
547
- onContentSizeChange?: (contentWidth: number, contentHeight: number) => void,
548
- onKeyboardDidShow?: (event: KeyboardEvent) => void,
549
- onKeyboardDidHide?: (event: KeyboardEvent) => void,
550
- onKeyboardWillShow?: (event: KeyboardEvent) => void,
551
- onKeyboardWillHide?: (event: KeyboardEvent) => void,
552
- /**
553
- * When true, the scroll view stops on multiples of the scroll view's size
554
- * when scrolling. This can be used for horizontal pagination. The default
555
- * value is false.
556
- *
557
- * Note: Vertical pagination is not supported on Android.
558
- */
559
- pagingEnabled?: ?boolean,
560
- /**
561
- * When false, the view cannot be scrolled via touch interaction.
562
- * The default value is true.
563
- *
564
- * Note that the view can always be scrolled by calling `scrollTo`.
565
- */
566
- scrollEnabled?: ?boolean,
567
- /**
568
- * This controls how often the scroll event will be fired while scrolling
569
- * (as a time interval in ms). A lower number yields better accuracy for code
570
- * that is tracking the scroll position, but can lead to scroll performance
571
- * problems due to the volume of information being send over the bridge.
572
- *
573
- * Values between 0 and 17ms indicate 60fps updates are needed and throttling
574
- * will be disabled.
575
- *
576
- * If you do not need precise scroll position tracking, set this value higher
577
- * to limit the information being sent across the bridge.
578
- *
579
- * The default value is zero, which results in the scroll event being sent only
580
- * once each time the view is scrolled.
581
- */
582
- scrollEventThrottle?: ?number,
583
- /**
584
- * When true, shows a vertical scroll indicator.
585
- * The default value is true.
586
- */
587
- showsVerticalScrollIndicator?: ?boolean,
588
- /**
589
- * When true, Sticky header is hidden when scrolling down, and dock at the top
590
- * when scrolling up
591
- */
592
- stickyHeaderHiddenOnScroll?: ?boolean,
593
- /**
594
- * An array of child indices determining which children get docked to the
595
- * top of the screen when scrolling. For example, passing
596
- * `stickyHeaderIndices={[0]}` will cause the first child to be fixed to the
597
- * top of the scroll view. This property is not supported in conjunction
598
- * with `horizontal={true}`.
599
- */
600
- stickyHeaderIndices?: ?$ReadOnlyArray<number>,
601
- /**
602
- * A React Component that will be used to render sticky headers.
603
- * To be used together with `stickyHeaderIndices` or with `SectionList`, defaults to `ScrollViewStickyHeader`.
604
- * You may need to set this if your sticky header uses custom transforms (eg. translation),
605
- * for example when you want your list to have an animated hidable header.
606
- */
607
- StickyHeaderComponent?: StickyHeaderComponentType,
608
- /**
609
- * When `snapToInterval` is set, `snapToAlignment` will define the relationship
610
- * of the snapping to the scroll view.
611
- *
612
- * - `'start'` (the default) will align the snap at the left (horizontal) or top (vertical)
613
- * - `'center'` will align the snap in the center
614
- * - `'end'` will align the snap at the right (horizontal) or bottom (vertical)
615
- */
616
- snapToAlignment?: ?("start" | "center" | "end"),
617
- /**
618
- * When set, causes the scroll view to stop at multiples of the value of
619
- * `snapToInterval`. This can be used for paginating through children
620
- * that have lengths smaller than the scroll view. Typically used in
621
- * combination with `snapToAlignment` and `decelerationRate="fast"`.
622
- *
623
- * Overrides less configurable `pagingEnabled` prop.
624
- */
625
- snapToInterval?: ?number,
626
- /**
627
- * When set, causes the scroll view to stop at the defined offsets.
628
- * This can be used for paginating through variously sized children
629
- * that have lengths smaller than the scroll view. Typically used in
630
- * combination with `decelerationRate="fast"`.
631
- *
632
- * Overrides less configurable `pagingEnabled` and `snapToInterval` props.
633
- */
634
- snapToOffsets?: ?$ReadOnlyArray<number>,
635
- /**
636
- * Use in conjunction with `snapToOffsets`. By default, the beginning
637
- * of the list counts as a snap offset. Set `snapToStart` to false to disable
638
- * this behavior and allow the list to scroll freely between its start and
639
- * the first `snapToOffsets` offset.
640
- * The default value is true.
641
- */
642
- snapToStart?: ?boolean,
643
- /**
644
- * Use in conjunction with `snapToOffsets`. By default, the end
645
- * of the list counts as a snap offset. Set `snapToEnd` to false to disable
646
- * this behavior and allow the list to scroll freely between its end and
647
- * the last `snapToOffsets` offset.
648
- * The default value is true.
649
- */
650
- snapToEnd?: ?boolean,
651
- /**
652
- * Experimental: When true, offscreen child views (whose `overflow` value is
653
- * `hidden`) are removed from their native backing superview when offscreen.
654
- * This can improve scrolling performance on long lists. The default value is
655
- * true.
656
- */
657
- removeClippedSubviews?: ?boolean,
658
- /**
659
- * A RefreshControl component, used to provide pull-to-refresh
660
- * functionality for the ScrollView. Only works for vertical ScrollViews
661
- * (`horizontal` prop must be `false`).
662
- *
663
- * See [RefreshControl](docs/refreshcontrol.html).
664
- */
665
- /* $FlowFixMe[unclear-type] - how to handle generic type without existential
666
- * operator? */
667
- refreshControl?: ?React.Element<any>,
668
- children?: React.Node,
669
- /**
670
- * A ref to the inner View element of the ScrollView. This should be used
671
- * instead of calling `getInnerViewRef`.
672
- */
673
- innerViewRef?: ForwardedRef<InnerViewInstance>,
674
- /**
675
- * A ref to the Native ScrollView component. This ref can be used to call
676
- * all of ScrollView's public methods, in addition to native methods like
677
- * measure, measureLayout, etc.
678
- */
679
- scrollViewRef?: ForwardedRef<PublicScrollViewInstance>,
680
- |}>;
681
-
682
- type State = {|
683
- layoutHeight: ?number,
684
- // RNOH patch - resolving flashScrollIndicators command on the JS side
685
- // as it is currently not feasible on the native side
686
- showScrollIndicator: boolean,
687
- |};
688
-
689
- const IS_ANIMATING_TOUCH_START_THRESHOLD_MS = 16;
690
-
691
- export type ScrollViewComponentStatics = $ReadOnly<{|
692
- Context: typeof ScrollViewContext,
693
- |}>;
694
-
695
- /**
696
- * Component that wraps platform ScrollView while providing
697
- * integration with touch locking "responder" system.
698
- *
699
- * Keep in mind that ScrollViews must have a bounded height in order to work,
700
- * since they contain unbounded-height children into a bounded container (via
701
- * a scroll interaction). In order to bound the height of a ScrollView, either
702
- * set the height of the view directly (discouraged) or make sure all parent
703
- * views have bounded height. Forgetting to transfer `{flex: 1}` down the
704
- * view stack can lead to errors here, which the element inspector makes
705
- * easy to debug.
706
- *
707
- * Doesn't yet support other contained responders from blocking this scroll
708
- * view from becoming the responder.
709
- *
710
- *
711
- * `<ScrollView>` vs [`<FlatList>`](https://reactnative.dev/docs/flatlist) - which one to use?
712
- *
713
- * `ScrollView` simply renders all its react child components at once. That
714
- * makes it very easy to understand and use.
715
- *
716
- * On the other hand, this has a performance downside. Imagine you have a very
717
- * long list of items you want to display, maybe several screens worth of
718
- * content. Creating JS components and native views for everything all at once,
719
- * much of which may not even be shown, will contribute to slow rendering and
720
- * increased memory usage.
721
- *
722
- * This is where `FlatList` comes into play. `FlatList` renders items lazily,
723
- * just when they are about to appear, and removes items that scroll way off
724
- * screen to save memory and processing time.
725
- *
726
- * `FlatList` is also handy if you want to render separators between your items,
727
- * multiple columns, infinite scroll loading, or any number of other features it
728
- * supports out of the box.
729
- */
730
- class ScrollView extends React.Component<Props, State> {
731
- static Context: typeof ScrollViewContext = ScrollViewContext;
732
-
733
- constructor(props: Props) {
734
- super(props);
735
-
736
- this._scrollAnimatedValue = new AnimatedImplementation.Value(
737
- this.props.contentOffset?.y ?? 0
738
- );
739
- this._scrollAnimatedValue.setOffset(this.props.contentInset?.top ?? 0);
740
- }
741
-
742
- _scrollAnimatedValue: AnimatedImplementation.Value;
743
- _scrollAnimatedValueAttachment: ?{ detach: () => void, ... } = null;
744
- _stickyHeaderRefs: Map<string, React.ElementRef<StickyHeaderComponentType>> =
745
- new Map();
746
- _headerLayoutYs: Map<string, number> = new Map();
747
-
748
- _keyboardMetrics: ?KeyboardMetrics = null;
749
- _additionalScrollOffset: number = 0;
750
- _isTouching: boolean = false;
751
- _lastMomentumScrollBeginTime: number = 0;
752
- _lastMomentumScrollEndTime: number = 0;
753
-
754
- // Reset to false every time becomes responder. This is used to:
755
- // - Determine if the scroll view has been scrolled and therefore should
756
- // refuse to give up its responder lock.
757
- // - Determine if releasing should dismiss the keyboard when we are in
758
- // tap-to-dismiss mode (this.props.keyboardShouldPersistTaps !== 'always').
759
- _observedScrollSinceBecomingResponder: boolean = false;
760
- _becameResponderWhileAnimating: boolean = false;
761
- _preventNegativeScrollOffset: ?boolean = null;
762
-
763
- _animated: ?boolean = null;
764
-
765
- _subscriptionKeyboardWillShow: ?EventSubscription = null;
766
- _subscriptionKeyboardWillHide: ?EventSubscription = null;
767
- _subscriptionKeyboardDidShow: ?EventSubscription = null;
768
- _subscriptionKeyboardDidHide: ?EventSubscription = null;
769
-
770
- state: State = {
771
- layoutHeight: null,
772
- // RNOH patch - resolving flashScrollIndicators command on the JS side
773
- // as it is currently not feasible on the native side
774
- showScrollIndicator: false,
775
- };
776
-
777
- componentDidMount() {
778
- if (typeof this.props.keyboardShouldPersistTaps === "boolean") {
779
- console.warn(
780
- `'keyboardShouldPersistTaps={${
781
- this.props.keyboardShouldPersistTaps === true ? "true" : "false"
782
- }}' is deprecated. ` +
783
- `Use 'keyboardShouldPersistTaps="${
784
- this.props.keyboardShouldPersistTaps ? "always" : "never"
785
- }"' instead`
786
- );
787
- }
788
-
789
- this._keyboardMetrics = Keyboard.metrics();
790
- this._additionalScrollOffset = 0;
791
-
792
- this._subscriptionKeyboardWillShow = Keyboard.addListener(
793
- "keyboardWillShow",
794
- this.scrollResponderKeyboardWillShow
795
- );
796
- this._subscriptionKeyboardWillHide = Keyboard.addListener(
797
- "keyboardWillHide",
798
- this.scrollResponderKeyboardWillHide
799
- );
800
- this._subscriptionKeyboardDidShow = Keyboard.addListener(
801
- "keyboardDidShow",
802
- this.scrollResponderKeyboardDidShow
803
- );
804
- this._subscriptionKeyboardDidHide = Keyboard.addListener(
805
- "keyboardDidHide",
806
- this.scrollResponderKeyboardDidHide
807
- );
808
-
809
- this._updateAnimatedNodeAttachment();
810
- }
811
-
812
- componentDidUpdate(prevProps: Props) {
813
- const prevContentInsetTop = prevProps.contentInset
814
- ? prevProps.contentInset.top
815
- : 0;
816
- const newContentInsetTop = this.props.contentInset
817
- ? this.props.contentInset.top
818
- : 0;
819
- if (prevContentInsetTop !== newContentInsetTop) {
820
- this._scrollAnimatedValue.setOffset(newContentInsetTop || 0);
821
- }
822
-
823
- this._updateAnimatedNodeAttachment();
824
- }
825
-
826
- componentWillUnmount() {
827
- if (this._subscriptionKeyboardWillShow != null) {
828
- this._subscriptionKeyboardWillShow.remove();
829
- }
830
- if (this._subscriptionKeyboardWillHide != null) {
831
- this._subscriptionKeyboardWillHide.remove();
832
- }
833
- if (this._subscriptionKeyboardDidShow != null) {
834
- this._subscriptionKeyboardDidShow.remove();
835
- }
836
- if (this._subscriptionKeyboardDidHide != null) {
837
- this._subscriptionKeyboardDidHide.remove();
838
- }
839
-
840
- if (this._scrollAnimatedValueAttachment) {
841
- this._scrollAnimatedValueAttachment.detach();
842
- }
843
- }
844
-
845
- /**
846
- * Returns a reference to the underlying scroll responder, which supports
847
- * operations like `scrollTo`. All ScrollView-like components should
848
- * implement this method so that they can be composed while providing access
849
- * to the underlying scroll responder's methods.
850
- */
851
- getScrollResponder: () => ScrollResponderType = () => {
852
- // $FlowFixMe[unclear-type]
853
- return ((this: any): ScrollResponderType);
854
- };
855
-
856
- getScrollableNode: () => ?number = () => {
857
- return findNodeHandle(this._scrollView.nativeInstance);
858
- };
859
-
860
- getInnerViewNode: () => ?number = () => {
861
- return findNodeHandle(this._innerView.nativeInstance);
862
- };
863
-
864
- getInnerViewRef: () => InnerViewInstance | null = () => {
865
- return this._innerView.nativeInstance;
866
- };
867
-
868
- getNativeScrollRef: () => NativeScrollViewInstance | null = () => {
869
- return this._scrollView.nativeInstance;
870
- };
871
-
872
- /**
873
- * Scrolls to a given x, y offset, either immediately or with a smooth animation.
874
- *
875
- * Example:
876
- *
877
- * `scrollTo({x: 0, y: 0, animated: true})`
878
- *
879
- * Note: The weird function signature is due to the fact that, for historical reasons,
880
- * the function also accepts separate arguments as an alternative to the options object.
881
- * This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
882
- */
883
- scrollTo: (
884
- options?:
885
- | {
886
- x?: number,
887
- y?: number,
888
- animated?: boolean,
889
- ...
890
- }
891
- | number,
892
- deprecatedX?: number,
893
- deprecatedAnimated?: boolean
894
- ) => void = (
895
- options?:
896
- | {
897
- x?: number,
898
- y?: number,
899
- animated?: boolean,
900
- ...
901
- }
902
- | number,
903
- deprecatedX?: number,
904
- deprecatedAnimated?: boolean
905
- ) => {
906
- let x, y, animated;
907
- if (typeof options === "number") {
908
- console.warn(
909
- "`scrollTo(y, x, animated)` is deprecated. Use `scrollTo({x: 5, y: 5, " +
910
- "animated: true})` instead."
911
- );
912
- y = options;
913
- x = deprecatedX;
914
- animated = deprecatedAnimated;
915
- } else if (options) {
916
- y = options.y;
917
- x = options.x;
918
- animated = options.animated;
919
- }
920
- if (this._scrollView.nativeInstance == null) {
921
- return;
922
- }
923
- Commands.scrollTo(
924
- this._scrollView.nativeInstance,
925
- x || 0,
926
- y || 0,
927
- animated !== false
928
- );
929
- };
930
-
931
- /**
932
- * If this is a vertical ScrollView scrolls to the bottom.
933
- * If this is a horizontal ScrollView scrolls to the right.
934
- *
935
- * Use `scrollToEnd({animated: true})` for smooth animated scrolling,
936
- * `scrollToEnd({animated: false})` for immediate scrolling.
937
- * If no options are passed, `animated` defaults to true.
938
- */
939
- scrollToEnd: (options?: ?{ animated?: boolean, ... }) => void = (
940
- options?: ?{ animated?: boolean, ... }
941
- ) => {
942
- // Default to true
943
- const animated = (options && options.animated) !== false;
944
- if (this._scrollView.nativeInstance == null) {
945
- return;
946
- }
947
- Commands.scrollToEnd(this._scrollView.nativeInstance, animated);
948
- };
949
-
950
- /**
951
- * Displays the scroll indicators momentarily.
952
- *
953
- * @platform ios
954
- */
955
- flashScrollIndicators: () => void = () => {
956
- // RNOH patch - resolving flashScrollIndicators command on the JS side
957
- // as it is currently not feasible on the native side
958
-
959
- // if (this._scrollView.nativeInstance == null) {
960
- // return;
961
- // }
962
- // Commands.flashScrollIndicators(this._scrollView.nativeInstance);
963
-
964
- this.state.showScrollIndicator = true;
965
- setTimeout(() => {
966
- this.state.showScrollIndicator = false;
967
- this.forceUpdate();
968
- }, 500);
969
- this.forceUpdate();
970
- };
971
-
972
- /**
973
- * This method should be used as the callback to onFocus in a TextInputs'
974
- * parent view. Note that any module using this mixin needs to return
975
- * the parent view's ref in getScrollViewRef() in order to use this method.
976
- * @param {number} nodeHandle The TextInput node handle
977
- * @param {number} additionalOffset The scroll view's bottom "contentInset".
978
- * Default is 0.
979
- * @param {bool} preventNegativeScrolling Whether to allow pulling the content
980
- * down to make it meet the keyboard's top. Default is false.
981
- */
982
- scrollResponderScrollNativeHandleToKeyboard: <T>(
983
- nodeHandle: number | React.ElementRef<HostComponent<T>>,
984
- additionalOffset?: number,
985
- preventNegativeScrollOffset?: boolean
986
- ) => void = <T>(
987
- nodeHandle: number | React.ElementRef<HostComponent<T>>,
988
- additionalOffset?: number,
989
- preventNegativeScrollOffset?: boolean
990
- ) => {
991
- this._additionalScrollOffset = additionalOffset || 0;
992
- this._preventNegativeScrollOffset = !!preventNegativeScrollOffset;
993
-
994
- if (this._innerView.nativeInstance == null) {
995
- return;
996
- }
997
-
998
- if (typeof nodeHandle === "number") {
999
- UIManager.measureLayout(
1000
- nodeHandle,
1001
- nullthrows(findNodeHandle(this)),
1002
- // $FlowFixMe[method-unbinding] added when improving typing for this parameters
1003
- this._textInputFocusError,
1004
- this._inputMeasureAndScrollToKeyboard
1005
- );
1006
- } else {
1007
- nodeHandle.measureLayout(
1008
- this._innerView.nativeInstance,
1009
- this._inputMeasureAndScrollToKeyboard,
1010
- // $FlowFixMe[method-unbinding] added when improving typing for this parameters
1011
- this._textInputFocusError
1012
- );
1013
- }
1014
- };
1015
-
1016
- /**
1017
- * A helper function to zoom to a specific rect in the scrollview. The argument has the shape
1018
- * {x: number; y: number; width: number; height: number; animated: boolean = true}
1019
- *
1020
- * @platform ios
1021
- */
1022
- scrollResponderZoomTo: (
1023
- rect: {|
1024
- x: number,
1025
- y: number,
1026
- width: number,
1027
- height: number,
1028
- animated?: boolean,
1029
- |},
1030
- animated?: boolean // deprecated, put this inside the rect argument instead
1031
- ) => void = (
1032
- rect: {|
1033
- x: number,
1034
- y: number,
1035
- width: number,
1036
- height: number,
1037
- animated?: boolean,
1038
- |},
1039
- animated?: boolean // deprecated, put this inside the rect argument instead
1040
- ) => {
1041
- invariant(Platform.OS === "ios", "zoomToRect is not implemented");
1042
- if ("animated" in rect) {
1043
- this._animated = rect.animated;
1044
- delete rect.animated;
1045
- } else if (typeof animated !== "undefined") {
1046
- console.warn(
1047
- "`scrollResponderZoomTo` `animated` argument is deprecated. Use `options.animated` instead"
1048
- );
1049
- }
1050
-
1051
- if (this._scrollView.nativeInstance == null) {
1052
- return;
1053
- }
1054
- Commands.zoomToRect(
1055
- this._scrollView.nativeInstance,
1056
- rect,
1057
- animated !== false
1058
- );
1059
- };
1060
-
1061
- _textInputFocusError() {
1062
- console.warn("Error measuring text field.");
1063
- }
1064
-
1065
- /**
1066
- * The calculations performed here assume the scroll view takes up the entire
1067
- * screen - even if has some content inset. We then measure the offsets of the
1068
- * keyboard, and compensate both for the scroll view's "contentInset".
1069
- *
1070
- * @param {number} left Position of input w.r.t. table view.
1071
- * @param {number} top Position of input w.r.t. table view.
1072
- * @param {number} width Width of the text input.
1073
- * @param {number} height Height of the text input.
1074
- */
1075
- _inputMeasureAndScrollToKeyboard: (
1076
- left: number,
1077
- top: number,
1078
- width: number,
1079
- height: number
1080
- ) => void = (left: number, top: number, width: number, height: number) => {
1081
- let keyboardScreenY = Dimensions.get("window").height;
1082
-
1083
- const scrollTextInputIntoVisibleRect = () => {
1084
- if (this._keyboardMetrics != null) {
1085
- keyboardScreenY = this._keyboardMetrics.screenY;
1086
- }
1087
- let scrollOffsetY =
1088
- top - keyboardScreenY + height + this._additionalScrollOffset;
1089
-
1090
- // By default, this can scroll with negative offset, pulling the content
1091
- // down so that the target component's bottom meets the keyboard's top.
1092
- // If requested otherwise, cap the offset at 0 minimum to avoid content
1093
- // shifting down.
1094
- if (this._preventNegativeScrollOffset === true) {
1095
- scrollOffsetY = Math.max(0, scrollOffsetY);
1096
- }
1097
- this.scrollTo({ x: 0, y: scrollOffsetY, animated: true });
1098
-
1099
- this._additionalScrollOffset = 0;
1100
- this._preventNegativeScrollOffset = false;
1101
- };
1102
-
1103
- if (this._keyboardMetrics == null) {
1104
- // `_keyboardMetrics` is set inside `scrollResponderKeyboardWillShow` which
1105
- // is not guaranteed to be called before `_inputMeasureAndScrollToKeyboard` but native has already scheduled it.
1106
- // In case it was not called before `_inputMeasureAndScrollToKeyboard`, we postpone scrolling to
1107
- // text input.
1108
- setTimeout(() => {
1109
- scrollTextInputIntoVisibleRect();
1110
- }, 0);
1111
- } else {
1112
- scrollTextInputIntoVisibleRect();
1113
- }
1114
- };
1115
-
1116
- _getKeyForIndex(index: $FlowFixMe, childArray: $FlowFixMe): $FlowFixMe {
1117
- const child = childArray[index];
1118
- return child && child.key;
1119
- }
1120
-
1121
- _updateAnimatedNodeAttachment() {
1122
- if (this._scrollAnimatedValueAttachment) {
1123
- this._scrollAnimatedValueAttachment.detach();
1124
- }
1125
- if (
1126
- this.props.stickyHeaderIndices &&
1127
- this.props.stickyHeaderIndices.length > 0
1128
- ) {
1129
- this._scrollAnimatedValueAttachment =
1130
- AnimatedImplementation.attachNativeEvent(
1131
- this._scrollView.nativeInstance,
1132
- "onScroll",
1133
- [{ nativeEvent: { contentOffset: { y: this._scrollAnimatedValue } } }]
1134
- );
1135
- }
1136
- }
1137
-
1138
- _setStickyHeaderRef(
1139
- key: string,
1140
- ref: ?React.ElementRef<StickyHeaderComponentType>
1141
- ) {
1142
- if (ref) {
1143
- this._stickyHeaderRefs.set(key, ref);
1144
- } else {
1145
- this._stickyHeaderRefs.delete(key);
1146
- }
1147
- }
1148
-
1149
- _onStickyHeaderLayout(index: $FlowFixMe, event: $FlowFixMe, key: $FlowFixMe) {
1150
- const { stickyHeaderIndices } = this.props;
1151
- if (!stickyHeaderIndices) {
1152
- return;
1153
- }
1154
- const childArray = React.Children.toArray<$FlowFixMe>(this.props.children);
1155
- if (key !== this._getKeyForIndex(index, childArray)) {
1156
- // ignore stale layout update
1157
- return;
1158
- }
1159
-
1160
- const layoutY = event.nativeEvent.layout.y;
1161
- this._headerLayoutYs.set(key, layoutY);
1162
-
1163
- const indexOfIndex = stickyHeaderIndices.indexOf(index);
1164
- const previousHeaderIndex = stickyHeaderIndices[indexOfIndex - 1];
1165
- if (previousHeaderIndex != null) {
1166
- const previousHeader = this._stickyHeaderRefs.get(
1167
- this._getKeyForIndex(previousHeaderIndex, childArray)
1168
- );
1169
- previousHeader &&
1170
- previousHeader.setNextHeaderY &&
1171
- previousHeader.setNextHeaderY(layoutY);
1172
- }
1173
- }
1174
-
1175
- _handleScroll = (e: ScrollEvent) => {
1176
- if (__DEV__) {
1177
- if (
1178
- this.props.onScroll &&
1179
- this.props.scrollEventThrottle == null &&
1180
- Platform.OS === "ios"
1181
- ) {
1182
- console.log(
1183
- "You specified `onScroll` on a <ScrollView> but not " +
1184
- "`scrollEventThrottle`. You will only receive one event. " +
1185
- "Using `16` you get all the events but be aware that it may " +
1186
- "cause frame drops, use a bigger number if you don't need as " +
1187
- "much precision."
1188
- );
1189
- }
1190
- }
1191
- this._observedScrollSinceBecomingResponder = true;
1192
- this.props.onScroll && this.props.onScroll(e);
1193
- };
1194
-
1195
- _handleLayout = (e: LayoutEvent) => {
1196
- if (this.props.invertStickyHeaders === true) {
1197
- this.setState({ layoutHeight: e.nativeEvent.layout.height });
1198
- }
1199
- if (this.props.onLayout) {
1200
- this.props.onLayout(e);
1201
- }
1202
- };
1203
-
1204
- _handleContentOnLayout = (e: LayoutEvent) => {
1205
- const { width, height } = e.nativeEvent.layout;
1206
- this.props.onContentSizeChange &&
1207
- this.props.onContentSizeChange(width, height);
1208
- };
1209
-
1210
- _innerView: RefForwarder<InnerViewInstance, InnerViewInstance> =
1211
- createRefForwarder(
1212
- (instance: InnerViewInstance): InnerViewInstance => instance
1213
- );
1214
-
1215
- _scrollView: RefForwarder<
1216
- NativeScrollViewInstance,
1217
- PublicScrollViewInstance
1218
- > = createRefForwarder(
1219
- (nativeInstance: NativeScrollViewInstance): PublicScrollViewInstance => {
1220
- // This is a hack. Ideally we would forwardRef to the underlying
1221
- // host component. However, since ScrollView has it's own methods that can be
1222
- // called as well, if we used the standard forwardRef then these
1223
- // methods wouldn't be accessible and thus be a breaking change.
1224
- //
1225
- // Therefore we edit ref to include ScrollView's public methods so that
1226
- // they are callable from the ref.
1227
-
1228
- // $FlowFixMe[prop-missing] - Known issue with appending custom methods.
1229
- const publicInstance: PublicScrollViewInstance = Object.assign(
1230
- nativeInstance,
1231
- {
1232
- getScrollResponder: this.getScrollResponder,
1233
- getScrollableNode: this.getScrollableNode,
1234
- getInnerViewNode: this.getInnerViewNode,
1235
- getInnerViewRef: this.getInnerViewRef,
1236
- getNativeScrollRef: this.getNativeScrollRef,
1237
- scrollTo: this.scrollTo,
1238
- scrollToEnd: this.scrollToEnd,
1239
- flashScrollIndicators: this.flashScrollIndicators,
1240
- scrollResponderZoomTo: this.scrollResponderZoomTo,
1241
- scrollResponderScrollNativeHandleToKeyboard:
1242
- this.scrollResponderScrollNativeHandleToKeyboard,
1243
- }
1244
- );
1245
-
1246
- return publicInstance;
1247
- }
1248
- );
1249
-
1250
- /**
1251
- * Warning, this may be called several times for a single keyboard opening.
1252
- * It's best to store the information in this method and then take any action
1253
- * at a later point (either in `keyboardDidShow` or other).
1254
- *
1255
- * Here's the order that events occur in:
1256
- * - focus
1257
- * - willShow {startCoordinates, endCoordinates} several times
1258
- * - didShow several times
1259
- * - blur
1260
- * - willHide {startCoordinates, endCoordinates} several times
1261
- * - didHide several times
1262
- *
1263
- * The `ScrollResponder` module callbacks for each of these events.
1264
- * Even though any user could have easily listened to keyboard events
1265
- * themselves, using these `props` callbacks ensures that ordering of events
1266
- * is consistent - and not dependent on the order that the keyboard events are
1267
- * subscribed to. This matters when telling the scroll view to scroll to where
1268
- * the keyboard is headed - the scroll responder better have been notified of
1269
- * the keyboard destination before being instructed to scroll to where the
1270
- * keyboard will be. Stick to the `ScrollResponder` callbacks, and everything
1271
- * will work.
1272
- *
1273
- * WARNING: These callbacks will fire even if a keyboard is displayed in a
1274
- * different navigation pane. Filter out the events to determine if they are
1275
- * relevant to you. (For example, only if you receive these callbacks after
1276
- * you had explicitly focused a node etc).
1277
- */
1278
-
1279
- scrollResponderKeyboardWillShow: (e: KeyboardEvent) => void = (
1280
- e: KeyboardEvent
1281
- ) => {
1282
- this._keyboardMetrics = e.endCoordinates;
1283
- this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
1284
- };
1285
-
1286
- scrollResponderKeyboardWillHide: (e: KeyboardEvent) => void = (
1287
- e: KeyboardEvent
1288
- ) => {
1289
- this._keyboardMetrics = null;
1290
- this.props.onKeyboardWillHide && this.props.onKeyboardWillHide(e);
1291
- };
1292
-
1293
- scrollResponderKeyboardDidShow: (e: KeyboardEvent) => void = (
1294
- e: KeyboardEvent
1295
- ) => {
1296
- this._keyboardMetrics = e.endCoordinates;
1297
- this.props.onKeyboardDidShow && this.props.onKeyboardDidShow(e);
1298
- };
1299
-
1300
- scrollResponderKeyboardDidHide: (e: KeyboardEvent) => void = (
1301
- e: KeyboardEvent
1302
- ) => {
1303
- this._keyboardMetrics = null;
1304
- this.props.onKeyboardDidHide && this.props.onKeyboardDidHide(e);
1305
- };
1306
-
1307
- /**
1308
- * Invoke this from an `onMomentumScrollBegin` event.
1309
- */
1310
- _handleMomentumScrollBegin: (e: ScrollEvent) => void = (e: ScrollEvent) => {
1311
- this._lastMomentumScrollBeginTime = global.performance.now();
1312
- this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
1313
- };
1314
-
1315
- /**
1316
- * Invoke this from an `onMomentumScrollEnd` event.
1317
- */
1318
- _handleMomentumScrollEnd: (e: ScrollEvent) => void = (e: ScrollEvent) => {
1319
- FrameRateLogger.endScroll();
1320
- this._lastMomentumScrollEndTime = global.performance.now();
1321
- this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd(e);
1322
- };
1323
-
1324
- /**
1325
- * Unfortunately, `onScrollBeginDrag` also fires when *stopping* the scroll
1326
- * animation, and there's not an easy way to distinguish a drag vs. stopping
1327
- * momentum.
1328
- *
1329
- * Invoke this from an `onScrollBeginDrag` event.
1330
- */
1331
- _handleScrollBeginDrag: (e: ScrollEvent) => void = (e: ScrollEvent) => {
1332
- FrameRateLogger.beginScroll(); // TODO: track all scrolls after implementing onScrollEndAnimation
1333
-
1334
- if (
1335
- // RNOH: patch - add support for OpenHarmony
1336
- (Platform.OS === "android" || Platform.OS === "harmony") &&
1337
- this.props.keyboardDismissMode === "on-drag"
1338
- ) {
1339
- dismissKeyboard();
1340
- }
1341
-
1342
- this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
1343
- };
1344
-
1345
- /**
1346
- * Invoke this from an `onScrollEndDrag` event.
1347
- */
1348
- _handleScrollEndDrag: (e: ScrollEvent) => void = (e: ScrollEvent) => {
1349
- const { velocity } = e.nativeEvent;
1350
- // - If we are animating, then this is a "drag" that is stopping the scrollview and momentum end
1351
- // will fire.
1352
- // - If velocity is non-zero, then the interaction will stop when momentum scroll ends or
1353
- // another drag starts and ends.
1354
- // - If we don't get velocity, better to stop the interaction twice than not stop it.
1355
- if (
1356
- !this._isAnimating() &&
1357
- (!velocity || (velocity.x === 0 && velocity.y === 0))
1358
- ) {
1359
- FrameRateLogger.endScroll();
1360
- }
1361
- this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
1362
- };
1363
-
1364
- /**
1365
- * A helper function for this class that lets us quickly determine if the
1366
- * view is currently animating. This is particularly useful to know when
1367
- * a touch has just started or ended.
1368
- */
1369
- _isAnimating: () => boolean = () => {
1370
- const now = global.performance.now();
1371
- const timeSinceLastMomentumScrollEnd =
1372
- now - this._lastMomentumScrollEndTime;
1373
- const isAnimating =
1374
- timeSinceLastMomentumScrollEnd < IS_ANIMATING_TOUCH_START_THRESHOLD_MS ||
1375
- this._lastMomentumScrollEndTime < this._lastMomentumScrollBeginTime;
1376
- return isAnimating;
1377
- };
1378
-
1379
- /**
1380
- * Invoke this from an `onResponderGrant` event.
1381
- */
1382
- _handleResponderGrant: (e: PressEvent) => void = (e: PressEvent) => {
1383
- this._observedScrollSinceBecomingResponder = false;
1384
- this.props.onResponderGrant && this.props.onResponderGrant(e);
1385
- this._becameResponderWhileAnimating = this._isAnimating();
1386
- };
1387
-
1388
- /**
1389
- * Invoke this from an `onResponderReject` event.
1390
- *
1391
- * Some other element is not yielding its role as responder. Normally, we'd
1392
- * just disable the `UIScrollView`, but a touch has already began on it, the
1393
- * `UIScrollView` will not accept being disabled after that. The easiest
1394
- * solution for now is to accept the limitation of disallowing this
1395
- * altogether. To improve this, find a way to disable the `UIScrollView` after
1396
- * a touch has already started.
1397
- */
1398
- _handleResponderReject: () => void = () => {};
1399
-
1400
- /**
1401
- * Invoke this from an `onResponderRelease` event.
1402
- */
1403
- _handleResponderRelease: (e: PressEvent) => void = (e: PressEvent) => {
1404
- this._isTouching = e.nativeEvent.touches.length !== 0;
1405
- this.props.onResponderRelease && this.props.onResponderRelease(e);
1406
-
1407
- if (typeof e.target === "number") {
1408
- if (__DEV__) {
1409
- console.error(
1410
- "Did not expect event target to be a number. Should have been a native component"
1411
- );
1412
- }
1413
-
1414
- return;
1415
- }
1416
-
1417
- // By default scroll views will unfocus a textField
1418
- // if another touch occurs outside of it
1419
- const currentlyFocusedTextInput = TextInputState.currentlyFocusedInput();
1420
- if (
1421
- currentlyFocusedTextInput != null &&
1422
- this.props.keyboardShouldPersistTaps !== true &&
1423
- this.props.keyboardShouldPersistTaps !== "always" &&
1424
- this._keyboardIsDismissible() &&
1425
- e.target !== currentlyFocusedTextInput &&
1426
- !this._observedScrollSinceBecomingResponder &&
1427
- !this._becameResponderWhileAnimating
1428
- ) {
1429
- TextInputState.blurTextInput(currentlyFocusedTextInput);
1430
- }
1431
- };
1432
-
1433
- /**
1434
- * We will allow the scroll view to give up its lock iff it acquired the lock
1435
- * during an animation. This is a very useful default that happens to satisfy
1436
- * many common user experiences.
1437
- *
1438
- * - Stop a scroll on the left edge, then turn that into an outer view's
1439
- * backswipe.
1440
- * - Stop a scroll mid-bounce at the top, continue pulling to have the outer
1441
- * view dismiss.
1442
- * - However, without catching the scroll view mid-bounce (while it is
1443
- * motionless), if you drag far enough for the scroll view to become
1444
- * responder (and therefore drag the scroll view a bit), any backswipe
1445
- * navigation of a swipe gesture higher in the view hierarchy, should be
1446
- * rejected.
1447
- */
1448
- _handleResponderTerminationRequest: () => boolean = () => {
1449
- return !this._observedScrollSinceBecomingResponder;
1450
- };
1451
-
1452
- /**
1453
- * Invoke this from an `onScroll` event.
1454
- */
1455
- _handleScrollShouldSetResponder: () => boolean = () => {
1456
- // Allow any event touch pass through if the default pan responder is disabled
1457
- if (this.props.disableScrollViewPanResponder === true) {
1458
- return false;
1459
- }
1460
- return this._isTouching;
1461
- };
1462
-
1463
- /**
1464
- * Merely touch starting is not sufficient for a scroll view to become the
1465
- * responder. Being the "responder" means that the very next touch move/end
1466
- * event will result in an action/movement.
1467
- *
1468
- * Invoke this from an `onStartShouldSetResponder` event.
1469
- *
1470
- * `onStartShouldSetResponder` is used when the next move/end will trigger
1471
- * some UI movement/action, but when you want to yield priority to views
1472
- * nested inside of the view.
1473
- *
1474
- * There may be some cases where scroll views actually should return `true`
1475
- * from `onStartShouldSetResponder`: Any time we are detecting a standard tap
1476
- * that gives priority to nested views.
1477
- *
1478
- * - If a single tap on the scroll view triggers an action such as
1479
- * recentering a map style view yet wants to give priority to interaction
1480
- * views inside (such as dropped pins or labels), then we would return true
1481
- * from this method when there is a single touch.
1482
- *
1483
- * - Similar to the previous case, if a two finger "tap" should trigger a
1484
- * zoom, we would check the `touches` count, and if `>= 2`, we would return
1485
- * true.
1486
- *
1487
- */
1488
- _handleStartShouldSetResponder: (e: PressEvent) => boolean = (
1489
- e: PressEvent
1490
- ) => {
1491
- // Allow any event touch pass through if the default pan responder is disabled
1492
- if (this.props.disableScrollViewPanResponder === true) {
1493
- return false;
1494
- }
1495
-
1496
- const currentlyFocusedInput = TextInputState.currentlyFocusedInput();
1497
- if (
1498
- this.props.keyboardShouldPersistTaps === "handled" &&
1499
- this._keyboardIsDismissible() &&
1500
- e.target !== currentlyFocusedInput
1501
- ) {
1502
- return true;
1503
- }
1504
- return false;
1505
- };
1506
-
1507
- /**
1508
- * There are times when the scroll view wants to become the responder
1509
- * (meaning respond to the next immediate `touchStart/touchEnd`), in a way
1510
- * that *doesn't* give priority to nested views (hence the capture phase):
1511
- *
1512
- * - Currently animating.
1513
- * - Tapping anywhere that is not a text input, while the keyboard is
1514
- * up (which should dismiss the keyboard).
1515
- *
1516
- * Invoke this from an `onStartShouldSetResponderCapture` event.
1517
- */
1518
- _handleStartShouldSetResponderCapture: (e: PressEvent) => boolean = (
1519
- e: PressEvent
1520
- ) => {
1521
- // The scroll view should receive taps instead of its descendants if:
1522
- // * it is already animating/decelerating
1523
- if (this._isAnimating()) {
1524
- return true;
1525
- }
1526
-
1527
- // Allow any event touch pass through if the default pan responder is disabled
1528
- if (this.props.disableScrollViewPanResponder === true) {
1529
- return false;
1530
- }
1531
-
1532
- // * the keyboard is up, keyboardShouldPersistTaps is 'never' (the default),
1533
- // and a new touch starts with a non-textinput target (in which case the
1534
- // first tap should be sent to the scroll view and dismiss the keyboard,
1535
- // then the second tap goes to the actual interior view)
1536
- const { keyboardShouldPersistTaps } = this.props;
1537
- const keyboardNeverPersistTaps =
1538
- !keyboardShouldPersistTaps || keyboardShouldPersistTaps === "never";
1539
-
1540
- if (typeof e.target === "number") {
1541
- if (__DEV__) {
1542
- console.error(
1543
- "Did not expect event target to be a number. Should have been a native component"
1544
- );
1545
- }
1546
-
1547
- return false;
1548
- }
1549
-
1550
- // Let presses through if the soft keyboard is detached from the viewport
1551
- if (this._softKeyboardIsDetached()) {
1552
- return false;
1553
- }
1554
-
1555
- if (
1556
- keyboardNeverPersistTaps &&
1557
- this._keyboardIsDismissible() &&
1558
- e.target != null &&
1559
- // $FlowFixMe[incompatible-call]
1560
- !TextInputState.isTextInput(e.target)
1561
- ) {
1562
- return true;
1563
- }
1564
-
1565
- return false;
1566
- };
1567
-
1568
- /**
1569
- * Do we consider there to be a dismissible soft-keyboard open?
1570
- */
1571
- _keyboardIsDismissible: () => boolean = () => {
1572
- const currentlyFocusedInput = TextInputState.currentlyFocusedInput();
1573
-
1574
- // We cannot dismiss the keyboard without an input to blur, even if a soft
1575
- // keyboard is open (e.g. when keyboard is open due to a native component
1576
- // not participating in TextInputState). It's also possible that the
1577
- // currently focused input isn't a TextInput (such as by calling ref.focus
1578
- // on a non-TextInput).
1579
- const hasFocusedTextInput =
1580
- currentlyFocusedInput != null &&
1581
- TextInputState.isTextInput(currentlyFocusedInput);
1582
-
1583
- // Even if an input is focused, we may not have a keyboard to dismiss. E.g
1584
- // when using a physical keyboard. Ensure we have an event for an opened
1585
- // keyboard.
1586
- const softKeyboardMayBeOpen =
1587
- this._keyboardMetrics != null || this._keyboardEventsAreUnreliable();
1588
-
1589
- return hasFocusedTextInput && softKeyboardMayBeOpen;
1590
- };
1591
-
1592
- /**
1593
- * Whether an open soft keyboard is present which does not overlap the
1594
- * viewport. E.g. for a VR soft-keyboard which is detached from the app
1595
- * viewport.
1596
- */
1597
- _softKeyboardIsDetached: () => boolean = () => {
1598
- return this._keyboardMetrics != null && this._keyboardMetrics.height === 0;
1599
- };
1600
-
1601
- _keyboardEventsAreUnreliable: () => boolean = () => {
1602
- // Android versions prior to API 30 rely on observing layout changes when
1603
- // `android:windowSoftInputMode` is set to `adjustResize` or `adjustPan`.
1604
- return Platform.OS === "android" && Platform.Version < 30;
1605
- };
1606
-
1607
- /**
1608
- * Invoke this from an `onTouchEnd` event.
1609
- *
1610
- * @param {PressEvent} e Event.
1611
- */
1612
- _handleTouchEnd: (e: PressEvent) => void = (e: PressEvent) => {
1613
- const nativeEvent = e.nativeEvent;
1614
- this._isTouching = nativeEvent.touches.length !== 0;
1615
-
1616
- const { keyboardShouldPersistTaps } = this.props;
1617
- const keyboardNeverPersistsTaps =
1618
- !keyboardShouldPersistTaps || keyboardShouldPersistTaps === "never";
1619
-
1620
- // Dismiss the keyboard now if we didn't become responder in capture phase
1621
- // to eat presses, but still want to dismiss on interaction.
1622
- // Don't do anything if the target of the touch event is the current input.
1623
- const currentlyFocusedTextInput = TextInputState.currentlyFocusedInput();
1624
- if (
1625
- currentlyFocusedTextInput != null &&
1626
- e.target !== currentlyFocusedTextInput &&
1627
- this._softKeyboardIsDetached() &&
1628
- this._keyboardIsDismissible() &&
1629
- keyboardNeverPersistsTaps
1630
- ) {
1631
- TextInputState.blurTextInput(currentlyFocusedTextInput);
1632
- }
1633
-
1634
- this.props.onTouchEnd && this.props.onTouchEnd(e);
1635
- };
1636
-
1637
- /**
1638
- * Invoke this from an `onTouchCancel` event.
1639
- *
1640
- * @param {PressEvent} e Event.
1641
- */
1642
- _handleTouchCancel: (e: PressEvent) => void = (e: PressEvent) => {
1643
- this._isTouching = false;
1644
- this.props.onTouchCancel && this.props.onTouchCancel(e);
1645
- };
1646
-
1647
- /**
1648
- * Invoke this from an `onTouchStart` event.
1649
- *
1650
- * Since we know that the `SimpleEventPlugin` occurs later in the plugin
1651
- * order, after `ResponderEventPlugin`, we can detect that we were *not*
1652
- * permitted to be the responder (presumably because a contained view became
1653
- * responder). The `onResponderReject` won't fire in that case - it only
1654
- * fires when a *current* responder rejects our request.
1655
- *
1656
- * @param {PressEvent} e Touch Start event.
1657
- */
1658
- _handleTouchStart: (e: PressEvent) => void = (e: PressEvent) => {
1659
- this._isTouching = true;
1660
- this.props.onTouchStart && this.props.onTouchStart(e);
1661
- };
1662
-
1663
- /**
1664
- * Invoke this from an `onTouchMove` event.
1665
- *
1666
- * Since we know that the `SimpleEventPlugin` occurs later in the plugin
1667
- * order, after `ResponderEventPlugin`, we can detect that we were *not*
1668
- * permitted to be the responder (presumably because a contained view became
1669
- * responder). The `onResponderReject` won't fire in that case - it only
1670
- * fires when a *current* responder rejects our request.
1671
- *
1672
- * @param {PressEvent} e Touch Start event.
1673
- */
1674
- _handleTouchMove: (e: PressEvent) => void = (e: PressEvent) => {
1675
- this.props.onTouchMove && this.props.onTouchMove(e);
1676
- };
1677
-
1678
- render(): React.Node | React.Element<string> {
1679
- const [NativeDirectionalScrollView, NativeDirectionalScrollContentView] =
1680
- this.props.horizontal === true
1681
- ? NativeHorizontalScrollViewTuple
1682
- : NativeVerticalScrollViewTuple;
1683
-
1684
- const contentContainerStyle = [
1685
- this.props.horizontal === true && styles.contentContainerHorizontal,
1686
- this.props.contentContainerStyle,
1687
- ];
1688
- if (__DEV__ && this.props.style !== undefined) {
1689
- // $FlowFixMe[underconstrained-implicit-instantiation]
1690
- const style = flattenStyle(this.props.style);
1691
- const childLayoutProps = ["alignItems", "justifyContent"].filter(
1692
- (prop) => style && style[prop] !== undefined
1693
- );
1694
- invariant(
1695
- childLayoutProps.length === 0,
1696
- "ScrollView child layout (" +
1697
- JSON.stringify(childLayoutProps) +
1698
- ") must be applied through the contentContainerStyle prop."
1699
- );
1700
- }
1701
-
1702
- const contentSizeChangeProps =
1703
- this.props.onContentSizeChange == null
1704
- ? null
1705
- : {
1706
- onLayout: this._handleContentOnLayout,
1707
- };
1708
-
1709
- const { stickyHeaderIndices } = this.props;
1710
- let children = this.props.children;
1711
-
1712
- if (stickyHeaderIndices != null && stickyHeaderIndices.length > 0) {
1713
- const childArray = React.Children.toArray<$FlowFixMe>(
1714
- this.props.children
1715
- );
1716
-
1717
- children = childArray.map((child, index) => {
1718
- const indexOfIndex = child ? stickyHeaderIndices.indexOf(index) : -1;
1719
- if (indexOfIndex > -1) {
1720
- const key = child.key;
1721
- const nextIndex = stickyHeaderIndices[indexOfIndex + 1];
1722
- const StickyHeaderComponent =
1723
- this.props.StickyHeaderComponent || ScrollViewStickyHeader;
1724
- return (
1725
- <StickyHeaderComponent
1726
- key={key}
1727
- nativeID={"StickyHeader-" + key} /* TODO: T68258846. */
1728
- ref={(ref) => this._setStickyHeaderRef(key, ref)}
1729
- nextHeaderLayoutY={this._headerLayoutYs.get(
1730
- this._getKeyForIndex(nextIndex, childArray)
1731
- )}
1732
- onLayout={(event) =>
1733
- this._onStickyHeaderLayout(index, event, key)
1734
- }
1735
- scrollAnimatedValue={this._scrollAnimatedValue}
1736
- inverted={this.props.invertStickyHeaders}
1737
- hiddenOnScroll={this.props.stickyHeaderHiddenOnScroll}
1738
- scrollViewHeight={this.state.layoutHeight}
1739
- >
1740
- {child}
1741
- </StickyHeaderComponent>
1742
- );
1743
- } else {
1744
- return child;
1745
- }
1746
- });
1747
- }
1748
- children = (
1749
- <ScrollViewContext.Provider
1750
- value={this.props.horizontal === true ? HORIZONTAL : VERTICAL}
1751
- >
1752
- {children}
1753
- </ScrollViewContext.Provider>
1754
- );
1755
-
1756
- const hasStickyHeaders =
1757
- Array.isArray(stickyHeaderIndices) && stickyHeaderIndices.length > 0;
1758
-
1759
- const contentContainer = (
1760
- <NativeDirectionalScrollContentView
1761
- {...contentSizeChangeProps}
1762
- ref={this._innerView.getForwardingRef(this.props.innerViewRef)}
1763
- style={contentContainerStyle}
1764
- removeClippedSubviews={
1765
- // Subview clipping causes issues with sticky headers on Android and
1766
- // would be hard to fix properly in a performant way.
1767
- Platform.OS === "android" && hasStickyHeaders
1768
- ? false
1769
- : this.props.removeClippedSubviews
1770
- }
1771
- collapsable={false}
1772
- >
1773
- {children}
1774
- </NativeDirectionalScrollContentView>
1775
- );
1776
-
1777
- const alwaysBounceHorizontal =
1778
- this.props.alwaysBounceHorizontal !== undefined
1779
- ? this.props.alwaysBounceHorizontal
1780
- : this.props.horizontal;
1781
-
1782
- const alwaysBounceVertical =
1783
- this.props.alwaysBounceVertical !== undefined
1784
- ? this.props.alwaysBounceVertical
1785
- : !this.props.horizontal;
1786
-
1787
- const baseStyle =
1788
- this.props.horizontal === true
1789
- ? styles.baseHorizontal
1790
- : styles.baseVertical;
1791
- const props = {
1792
- ...this.props,
1793
- alwaysBounceHorizontal,
1794
- alwaysBounceVertical,
1795
- style: StyleSheet.compose(baseStyle, this.props.style),
1796
- // Override the onContentSizeChange from props, since this event can
1797
- // bubble up from TextInputs
1798
- onContentSizeChange: null,
1799
- onLayout: this._handleLayout,
1800
- onMomentumScrollBegin: this._handleMomentumScrollBegin,
1801
- onMomentumScrollEnd: this._handleMomentumScrollEnd,
1802
- onResponderGrant: this._handleResponderGrant,
1803
- onResponderReject: this._handleResponderReject,
1804
- onResponderRelease: this._handleResponderRelease,
1805
- onResponderTerminationRequest: this._handleResponderTerminationRequest,
1806
- onScrollBeginDrag: this._handleScrollBeginDrag,
1807
- onScrollEndDrag: this._handleScrollEndDrag,
1808
- onScrollShouldSetResponder: this._handleScrollShouldSetResponder,
1809
- onStartShouldSetResponder: this._handleStartShouldSetResponder,
1810
- onStartShouldSetResponderCapture:
1811
- this._handleStartShouldSetResponderCapture,
1812
- onTouchEnd: this._handleTouchEnd,
1813
- onTouchMove: this._handleTouchMove,
1814
- onTouchStart: this._handleTouchStart,
1815
- onTouchCancel: this._handleTouchCancel,
1816
- onScroll: this._handleScroll,
1817
- scrollEventThrottle: hasStickyHeaders
1818
- ? 1
1819
- : this.props.scrollEventThrottle,
1820
- sendMomentumEvents:
1821
- this.props.onMomentumScrollBegin || this.props.onMomentumScrollEnd
1822
- ? true
1823
- : false,
1824
- // default to true
1825
- snapToStart: this.props.snapToStart !== false,
1826
- // default to true
1827
- snapToEnd: this.props.snapToEnd !== false,
1828
- // pagingEnabled is overridden by snapToInterval / snapToOffsets
1829
- pagingEnabled:
1830
- this.props.pagingEnabled === true &&
1831
- this.props.snapToInterval == null &&
1832
- this.props.snapToOffsets == null,
1833
- // RNOH patch - resolving flashScrollIndicators command on the JS side
1834
- // as it is currently not feasible on the native side
1835
- showsVerticalScrollIndicator: (this.props.showsVerticalScrollIndicator ?? true) || this.state.showScrollIndicator,
1836
- showsHorizontalScrollIndicator: (this.props.showsHorizontalScrollIndicator ?? true) || this.state.showScrollIndicator,
1837
- persistentScrollbar: this.props.persistentScrollbar || this.state.showScrollIndicator,
1838
- };
1839
-
1840
- const { decelerationRate } = this.props;
1841
- if (decelerationRate != null) {
1842
- props.decelerationRate = processDecelerationRate(decelerationRate);
1843
- }
1844
-
1845
- const refreshControl = this.props.refreshControl;
1846
- const scrollViewRef = this._scrollView.getForwardingRef(
1847
- this.props.scrollViewRef
1848
- );
1849
-
1850
- if (refreshControl) {
1851
- // RNOH: patch - use Android implementation
1852
- const { outer, inner } = splitLayoutProps(flattenStyle(props.style));
1853
- return React.cloneElement(
1854
- refreshControl,
1855
- { style: StyleSheet.compose(baseStyle, outer) },
1856
- <NativeDirectionalScrollView
1857
- {...props}
1858
- style={StyleSheet.compose(baseStyle, inner)}
1859
- ref={scrollViewRef}
1860
- >
1861
- {contentContainer}
1862
- </NativeDirectionalScrollView>
1863
- );
1864
- }
1865
-
1866
- return (
1867
- <NativeDirectionalScrollView {...props} ref={scrollViewRef}>
1868
- {contentContainer}
1869
- </NativeDirectionalScrollView>
1870
- );
1871
- }
1872
- }
1873
-
1874
- const styles = StyleSheet.create({
1875
- baseVertical: {
1876
- flexGrow: 1,
1877
- flexShrink: 1,
1878
- flexDirection: "column",
1879
- overflow: "scroll",
1880
- },
1881
- baseHorizontal: {
1882
- flexGrow: 1,
1883
- flexShrink: 1,
1884
- flexDirection: "row",
1885
- overflow: "scroll",
1886
- },
1887
- contentContainerHorizontal: {
1888
- flexDirection: "row",
1889
- },
1890
- });
1891
-
1892
- type ForwardedRef<T> = { current: null | T, ... } | ((null | T) => mixed);
1893
-
1894
- type RefForwarder<TNativeInstance, TPublicInstance> = {
1895
- getForwardingRef: (
1896
- ?ForwardedRef<TPublicInstance>
1897
- ) => (TNativeInstance | null) => void,
1898
- nativeInstance: TNativeInstance | null,
1899
- publicInstance: TPublicInstance | null,
1900
- };
1901
-
1902
- /**
1903
- * Helper function that should be replaced with `useCallback` and `useMergeRefs`
1904
- * once `ScrollView` is reimplemented as a functional component.
1905
- */
1906
- function createRefForwarder<TNativeInstance, TPublicInstance>(
1907
- mutator: (TNativeInstance) => TPublicInstance
1908
- ): RefForwarder<TNativeInstance, TPublicInstance> {
1909
- const state: RefForwarder<TNativeInstance, TPublicInstance> = {
1910
- getForwardingRef: memoize((forwardedRef) => {
1911
- return (nativeInstance: TNativeInstance | null): void => {
1912
- const publicInstance =
1913
- nativeInstance == null ? null : mutator(nativeInstance);
1914
-
1915
- state.nativeInstance = nativeInstance;
1916
- state.publicInstance = publicInstance;
1917
-
1918
- if (forwardedRef != null) {
1919
- if (typeof forwardedRef === "function") {
1920
- forwardedRef(publicInstance);
1921
- } else {
1922
- forwardedRef.current = publicInstance;
1923
- }
1924
- }
1925
- };
1926
- }),
1927
- nativeInstance: null,
1928
- publicInstance: null,
1929
- };
1930
-
1931
- return state;
1932
- }
1933
-
1934
- /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
1935
- * LTI update could not be added via codemod */
1936
- function Wrapper(props, ref: ((mixed) => mixed) | { current: mixed, ... }) {
1937
- return <ScrollView {...props} scrollViewRef={ref} />;
1938
- }
1939
- Wrapper.displayName = "ScrollView";
1940
- const ForwardedScrollView = React.forwardRef(Wrapper);
1941
-
1942
- // $FlowFixMe[prop-missing] Add static context to ForwardedScrollView
1943
- ForwardedScrollView.Context = ScrollViewContext;
1944
-
1945
- ForwardedScrollView.displayName = "ScrollView";
1946
-
1947
- module.exports = ((ForwardedScrollView: $FlowFixMe): React.AbstractComponent<
1948
- React.ElementConfig<typeof ScrollView>,
1949
- PublicScrollViewInstance
1950
- > &
1951
- ScrollViewComponentStatics);