Interface ScrollViewPropsIOS

interface ScrollViewPropsIOS {
    alwaysBounceHorizontal?: boolean;
    alwaysBounceVertical?: boolean;
    automaticallyAdjustContentInsets?: boolean;
    automaticallyAdjustKeyboardInsets?: boolean;
    automaticallyAdjustsScrollIndicatorInsets?: boolean;
    bounces?: boolean;
    bouncesZoom?: boolean;
    canCancelContentTouches?: boolean;
    centerContent?: boolean;
    contentInset?: Insets;
    contentInsetAdjustmentBehavior?: "always" | "never" | "automatic" | "scrollableAxes";
    contentOffset?: PointProp;
    directionalLockEnabled?: boolean;
    indicatorStyle?: "black" | "white" | "default";
    maintainVisibleContentPosition?: null | {
        autoscrollToTopThreshold?: null | number;
        minIndexForVisible: number;
    };
    maximumZoomScale?: number;
    minimumZoomScale?: number;
    onScrollAnimationEnd?: (() => void);
    onScrollToTop?: ((event) => void);
    pinchGestureEnabled?: boolean;
    scrollEventThrottle?: number;
    scrollIndicatorInsets?: Insets;
    scrollToOverflowEnabled?: boolean;
    scrollsToTop?: boolean;
    snapToAlignment?: "center" | "end" | "start";
    zoomScale?: number;
}

Hierarchy (view full)

Properties

alwaysBounceHorizontal? alwaysBounceVertical? automaticallyAdjustContentInsets? automaticallyAdjustKeyboardInsets? automaticallyAdjustsScrollIndicatorInsets? bounces? bouncesZoom? canCancelContentTouches? centerContent? contentInset? contentInsetAdjustmentBehavior? contentOffset? directionalLockEnabled? indicatorStyle? maintainVisibleContentPosition? maximumZoomScale? minimumZoomScale? onScrollAnimationEnd? onScrollToTop? pinchGestureEnabled? scrollEventThrottle? scrollIndicatorInsets? scrollToOverflowEnabled? scrollsToTop? snapToAlignment? zoomScale?

Properties

Optional alwaysBounceHorizontal

alwaysBounceHorizontal?: boolean

When true the scroll view bounces horizontally when it reaches the end even if the content is smaller than the scroll view itself. The default value is true when horizontal={true} and false otherwise.

Optional alwaysBounceVertical

alwaysBounceVertical?: boolean

When true the scroll view bounces vertically when it reaches the end even if the content is smaller than the scroll view itself. The default value is false when horizontal={true} and true otherwise.

Optional automaticallyAdjustContentInsets

automaticallyAdjustContentInsets?: boolean

Controls whether iOS should automatically adjust the content inset for scroll views that are placed behind a navigation bar or tab bar/ toolbar. The default value is true.

Optional automaticallyAdjustKeyboardInsets

automaticallyAdjustKeyboardInsets?: boolean

Controls whether the ScrollView should automatically adjust its contentInset and scrollViewInsets when the Keyboard changes its size. The default value is false.

Optional automaticallyAdjustsScrollIndicatorInsets

automaticallyAdjustsScrollIndicatorInsets?: boolean

Controls whether iOS should automatically adjust the scroll indicator insets. The default value is true. Available on iOS 13 and later.

Optional bounces

bounces?: boolean

When true the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. When false it disables all bouncing even if the alwaysBounce* props are true. The default value is true.

Optional bouncesZoom

bouncesZoom?: boolean

When true gestures can drive zoom past min/max and the zoom will animate to the min/max value at gesture end otherwise the zoom will not exceed the limits.

Optional canCancelContentTouches

canCancelContentTouches?: boolean

When false once tracking starts won't try to drag if the touch moves. The default value is true.

Optional centerContent

centerContent?: boolean

When true the scroll view automatically centers the content when the content is smaller than the scroll view bounds; when the content is larger than the scroll view this property has no effect. The default value is false.

Optional contentInset

contentInset?: Insets

The amount by which the scroll view content is inset from the edges of the scroll view. Defaults to {0, 0, 0, 0}.

Optional contentInsetAdjustmentBehavior

contentInsetAdjustmentBehavior?: "always" | "never" | "automatic" | "scrollableAxes"

This property specifies how the safe area insets are used to modify the content area of the scroll view. The default value of this property must be 'automatic'. But the default value is 'never' until RN@0.51.

Optional contentOffset

contentOffset?: PointProp

Used to manually set the starting scroll offset. The default value is {x: 0, y: 0}

Optional directionalLockEnabled

directionalLockEnabled?: boolean

When true the ScrollView will try to lock to only vertical or horizontal scrolling while dragging. The default value is false.

Optional indicatorStyle

indicatorStyle?: "black" | "white" | "default"

The style of the scroll indicators.

  • default (the default), same as black.
  • black, scroll indicator is black. This style is good against a white content background.
  • white, scroll indicator is white. This style is good against a black content background.

Optional maintainVisibleContentPosition

maintainVisibleContentPosition?: null | {
    autoscrollToTopThreshold?: null | number;
    minIndexForVisible: number;
}

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.

Type declaration

  • Optional autoscrollToTopThreshold?: null | number
  • minIndexForVisible: number

Optional maximumZoomScale

maximumZoomScale?: number

The maximum allowed zoom scale. The default value is 1.0.

Optional minimumZoomScale

minimumZoomScale?: number

The minimum allowed zoom scale. The default value is 1.0.

Optional onScrollAnimationEnd

onScrollAnimationEnd?: (() => void)

Called when a scrolling animation ends.

Type declaration

    • (): void

    • Returns void

Optional onScrollToTop

onScrollToTop?: ((event) => void)

Fires when the scroll view scrolls to top after the status bar has been tapped

Type declaration

Platform

ios

Optional pinchGestureEnabled

pinchGestureEnabled?: boolean

When true, ScrollView allows use of pinch gestures to zoom in and out. The default value is true.

Optional scrollEventThrottle

scrollEventThrottle?: number

Limits how often scroll events will be fired while scrolling, specified as a time interval in ms. This may be useful when expensive work is performed in response to scrolling. Values <= 16 will disable throttling, regardless of the refresh rate of the device.

Optional scrollIndicatorInsets

scrollIndicatorInsets?: Insets

The amount by which the scroll view indicators are inset from the edges of the scroll view. This should normally be set to the same value as the contentInset. Defaults to {0, 0, 0, 0}.

Optional scrollToOverflowEnabled

scrollToOverflowEnabled?: boolean

When true, the scroll view can be programmatically scrolled beyond its content size. The default value is false.

Platform

ios

Optional scrollsToTop

scrollsToTop?: boolean

When true the scroll view scrolls to top when the status bar is tapped. The default value is true.

Optional snapToAlignment

snapToAlignment?: "center" | "end" | "start"

When snapToInterval is set, snapToAlignment will define the relationship of the snapping to the scroll view. - start (the default) will align the snap at the left (horizontal) or top (vertical) - center will align the snap in the center - end will align the snap at the right (horizontal) or bottom (vertical)

Optional zoomScale

zoomScale?: number

The current scale of the scroll view content. The default value is 1.0.

On This Page