diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index 6d594e12f9..18cbfb2834 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -6504,6 +6504,32 @@ export interface ScrollViewPropsIOS { */ indicatorStyle?: 'default' | 'black' | 'white'; + /** + * When set, the scroll view will adjust the scroll position so that the first child + * that is currently visible and at or beyond minIndexForVisible will not change position. + * This is useful for lists that are loading content in both directions, e.g. a chat thread, + * where new messages coming in might otherwise cause the scroll position to jump. A value + * of 0 is common, but other values such as 1 can be used to skip loading spinners or other + * content that should not maintain position. + * + * The optional autoscrollToTopThreshold can be used to make the content automatically scroll + * to the top after making the adjustment if the user was within the threshold of the top + * before the adjustment was made. This is also useful for chat-like applications where you + * want to see new messages scroll into place, but not if the user has scrolled up a ways and + * it would be disruptive to scroll a bunch. + * + * Caveat 1: Reordering elements in the scrollview with this enabled will probably cause + * jumpiness and jank. It can be fixed, but there are currently no plans to do so. For now, + * don't re-order the content of any ScrollViews or Lists that use this feature. + * + * Caveat 2: This uses contentOffset and frame.origin in native code to compute visibility. + * Occlusion, transforms, and other complexity won't be taken into account as to whether + * content is "visible" or not. + */ + maintainVisibleContentPosition?: null | { + autoscrollToTopThreshold?: number | null; + minIndexForVisible: number; + }; /** * The maximum allowed zoom scale. The default value is 1.0. */ diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx index 53721496c5..8a08b6bc7d 100644 --- a/types/react-native/test/index.tsx +++ b/types/react-native/test/index.tsx @@ -611,7 +611,7 @@ class ScrollerListComponentTest extends React.Component<{}, { dataSource: ListVi if (this.scrollView) { this.scrollView.setNativeProps({ scrollEnabled: false }); - // Dummy values for scroll dimenions changes + // Dummy values for scroll dimensions changes this.scrollView.getScrollResponder().scrollResponderZoomTo({ x: 0, y: 0, @@ -1044,7 +1044,7 @@ class AccessibilityTest extends React.Component { onAccessibilityTap={() => {}} accessibilityRole="header" accessibilityState={{ checked: true }} - accessibilityHint="Very importent header" + accessibilityHint="Very important header" accessibilityValue={{ min: 60, max: 120, now: 80 }} onMagicTap={() => {}} onAccessibilityEscape={() => {}} @@ -1179,6 +1179,11 @@ const NativeIDTest = () => ( ); +const ScrollViewMaintainVisibleContentPositionTest = () => ( + + +); + const MaxFontSizeMultiplierTest = () => Text; const ShareTest = () => { @@ -1301,7 +1306,7 @@ const OpaqueTest2 = () => ( /> ); -// Test you cannot ammend opaque type +// Test you cannot amend opaque type PlatformColor('?attr/colorControlNormal').resource_paths.push('foo'); // $ExpectError const someColorProp: ColorValue = PlatformColor('test');