From 8e73648f5d8f3a338bf32e923e4c70be6db540cb Mon Sep 17 00:00:00 2001 From: John Haupenthal Date: Sun, 6 Oct 2024 16:54:43 -0700 Subject: [PATCH] chore: update docs --- docs/assets/highlight.css | 16 ++++---- docs/assets/navigation.js | 2 +- docs/assets/search.js | 2 +- docs/functions/LazyChild.LazyChild.html | 2 +- .../LazyScrollView.LazyScrollView.html | 9 ++++- docs/hierarchy.html | 1 + docs/index.html | 8 +++- .../LazyChild.LazyChildCallbacks.html | 21 ++++++++++ docs/interfaces/LazyChild.LazyChildProps.html | 38 ++++++++++++------- .../LazyScrollView.LazyScrollViewMethods.html | 20 ++++++++++ .../LazyScrollView.LazyScrollViewProps.html | 8 ++-- docs/modules/LazyChild.html | 3 +- docs/modules/LazyScrollView.html | 3 +- 13 files changed, 100 insertions(+), 33 deletions(-) create mode 100644 docs/hierarchy.html create mode 100644 docs/interfaces/LazyChild.LazyChildCallbacks.html create mode 100644 docs/interfaces/LazyScrollView.LazyScrollViewMethods.html diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css index 8379b6a..d902459 100644 --- a/docs/assets/highlight.css +++ b/docs/assets/highlight.css @@ -13,16 +13,16 @@ --dark-hl-5: #9CDCFE; --light-hl-6: #0000FF; --dark-hl-6: #569CD6; - --light-hl-7: #800000; - --dark-hl-7: #808080; + --light-hl-7: #0070C1; + --dark-hl-7: #4FC1FF; --light-hl-8: #267F99; --dark-hl-8: #4EC9B0; - --light-hl-9: #E50000; - --dark-hl-9: #9CDCFE; - --light-hl-10: #098658; - --dark-hl-10: #B5CEA8; - --light-hl-11: #0070C1; - --dark-hl-11: #4FC1FF; + --light-hl-9: #800000; + --dark-hl-9: #808080; + --light-hl-10: #E50000; + --dark-hl-10: #9CDCFE; + --light-hl-11: #098658; + --dark-hl-11: #B5CEA8; --light-hl-12: #000000FF; --dark-hl-12: #D4D4D4; --light-code-background: #FFFFFF; diff --git a/docs/assets/navigation.js b/docs/assets/navigation.js index 0f307f0..1bc4a8b 100644 --- a/docs/assets/navigation.js +++ b/docs/assets/navigation.js @@ -1 +1 @@ -window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAE43QvQrCMBQF4Hc5c1AQ7ZDV1UEQXEqHkKYkmCYlvcU/+u7iYkyN1TU39+OeU95B6kLg2InbdauNrcHQCdLgaH09WNUvX6OFptaC4WRcDb5ikM/XoBx4+Qntg+/6qBlHKjRCJmD6eeJvipHN3dcMTpLxLgumVrEeqwl2kMFbezTqnE8c53/Hjivz2d/ozNqvFnKHp1V89TOlVA+lccwyAwIAAA==" \ No newline at end of file +window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAE43QzwvCIBTA8f/lnaUgagevuxYEQZexg6lDmdNwb/SL/e9Rh2ybK68+30f8Fg9AeUWgsGX3W660EUDgzFABhcaJzsh2+RktFDYGCNTaCqArAvx16qUFWkyhnBlzYrxug6gtSl8xPkCnC6N3NllPpvzeu3My/b6cxAax6ixH7WwUHFrZui9H2IF7Z8xRy0s8aJgnVw0rO4nKifnff+HRxX8lwsLvyrPvJPWOJRpGn/Uj+csnppI/WswCAAA=" \ No newline at end of file diff --git a/docs/assets/search.js b/docs/assets/search.js index 080340d..05ff4f1 100644 --- a/docs/assets/search.js +++ b/docs/assets/search.js @@ -1 +1 @@ -window.searchData = "data:application/octet-stream;base64,H4sIAAAAAAAAE82XXW+bMBSG/8vprUc5fCVwO+1i0iZV2tSLoajKwFmsEUCGpGmj/PeJT+PYtJBW6q4SYd7nHB+/2Mcn4NljAUF4gr8sjSGwCKTrHYUAvq2fnz5vWRIDgT1PIIBdFu8TWtz2I8a23CVAIErWRUELCADOpCN5zguozT6NSpalQ9hLWAL5mtO0lGAiluV6arA7nuVFH5GlJeWbdUS1Iet358dF0xKzjKpBTtPZIW8GyldiX8jHUsnSL1Xsn1tOi22WxHfrYn4lbkYoV6foua4t1unhoXzK6ftkZfSweckZ2imOF/XIyrfXVAP5+JJeJtVW9JN1VU2VKY6UNKc8oml5zwr2O6G9ZP4MxkHv9UHVaJaw8ql2zDVFVhEfvu4XKXWr7lyz6pfTm1LKIyvfmHZD+J8KeWRlV0fvjXWsJjdSRvYnzTj9RXn2na6LPae7Cjw78zHM1QWVG4gfEc+S5J7RR20XIYbntBIaqNxPDLCvRrmY3YA93l6Il17sMUbTmNhtaHORv6XNpqCjqz4h/k1PmJKGDgPnFQGWxvQIwQkOlBcsSyEAy7ANHwhsGE3iqsNsciYQZbvWY3EW7eu/q/a1exqVGa9ebt6+NYGEJrFMw1riakXCTlwP1A86hnhSC3FMiIoQJaEFJERiuYbtSzpL0VmSzgYSWhqdrehsSecACW2NzlF0jqRzgYQOQcdwTEcSuorQlYQekNDVBPQUnSfpFmMBF4pwIQmXQEJPE3Cp6JaSzgcSLjQ6X9H58tKbY5mi6hq8sE1lhqUmKGp8IxsHrdGwqndQNg9WnvB1YVX7oOwfrGyBequrHkLZROiOi1UfoWwkrPyBum8FVS+hbCasLIK67wVVO7WP6m3mQHlJ46/NdhOG/YF9god2D+o3xxO4EJzOBBbND5rtr1X9nsVGVD/t96JqrE6ov5MJtiXY9iRIc7o+U57thqerIPqCiNOQyfr5KWru0gJjCkw3y3mwvDnHBBEFcVq9KlRRHw2H+mAeoAbZodOm514BVZMcZIneJGJ33g0gg1XFxTRISquTtuyuGXl9ixNIWxCdqcAjK0d5ruBNnGV66JtI2tw1BG0haP58Wt1vC9hyULxpnmuvaofmqlaKq5qAegK6fJ25IpCznCYspRCEq/P5H/q9J+3VEgAA"; \ No newline at end of file +window.searchData = "data:application/octet-stream;base64,H4sIAAAAAAAAE82ZS2/bOBDHvwtzVVzPUJIf1yKHBbZAgRY5rGAUrkSvicqSISlpEiPffaEnSZO0Kcdd+CRD0vznwZ85JHUgRf67JMvoQH7xLCFL9Ei23jGyJH+v314/b3maEI88FSlZkl2ePKWs/DQ8mWyrXUo8EqfrsmQlWRLy7vVKoX9CavOUxRXPM1nslKxH9uuCZZUiJnxhEOrOPq/T9Oc6/lUOXnlWsWKzjpnR7fD+eP8wRZFtnj3Ufr5vC1Zu8zT5ui4vC+HOonQmLoOcPCxBQEWxfvyoXvfsetFNBsHxQU6M6dqL/MKr69TYIHQ7JT4OrqvwPV5cYy1da4kfecl/8pRXr83AXJqDLnMz5T0KrS+uf2lxj1N1Ke0Lr64Qfqtyi4V94VVf1/AKda0TPTPzfy3yvet00Lz7wRk/rh8WLBvt8k6ydK5Lm50llD0rYpZVTb1SNvzPx0dmF7pOoPzfLC/YP6zIv7B1+VSwXa0zOkybzHWC/EArl2I828arMrnn5T3PtqzgFUtGhvyB/+2ZKC9o563i/9PK1ehPtvFbKfFV2vlQ4z/dypXYT7XxGynvNdp5X9w/28ptYR+38dsr7KXt3FDXo1auNPJvcZGn6SNnv437T/H45Cb0eHkgzL6wapsn1plG0jfanV8xSAlY0CmbN77nH4rhTlJxCcYsdSEy4yJ06SZnFYd0zxT1W7UurH/GcXH3Ujde3iZMtynPucpt6mdK/ZBZ15fjMmiFbrzMD1ni1rSdi1yn7TJlndzWWL05bnDOT1f5ZlOy8X8puY/0ChcU7eQ6vWCbj8TVml8hqKMzT0MPUw8+rcLjxmvlEZ4l7IUsD+SZFSXPM7IkOKGTBfHIhrM0qc9429A8Eue7bpeU5PFT83PVvfbI4iov6pfbtz9NiRdNPQwn4QxXKy/qjZsHzY1eQ9xpDMFmCJohKIZIvAg8CpPZHBRD1AxRMaTEi9DkkWqGVDH0iRdRD2Dig2roa4a+YhgQL/JNHgPNMFAMQ5vHUDMMFcMZ8aLA5HGmGc4Uw7nN41wznCuGC+JFocnjQjNcqABMbS5BZweO4KmRmJkgAAM+Kj9QUzE32uoEgYoQ1GAsjLY6RKBSBDUbMDUa6yCBShIENnhBZwlUmMBKE+g4gcoTzGwIg04UqEiBlSnQoQKVKljYQAadK1DBQitYqIOFKlgINpxRBwuPJia0+jVMTSpYWLMCYHSsk4UqWdiQhcY5UScLVbKwhgWo0VhHC1W00IoW6mihihbWtIBvdKyzhSpbaGULdbZQZQtrXCAwOtbhQhUuaoWL6nBRFS5a8wKhyTHV6aIqXbTpe8Y5j+p40aPW1+BlnPSoofupeFHfyibV8epuNUuOZ1ZULPmrXXpE0bDMPpAf3XqE9uuhA/HJ8vDukbC9zNsLTLtrdxu6+9jdR+yu3XPsntPm+btYyzR3h+VM/azJYzheFyHNRUiATirtGfMbK/KdfMYsJGEqafpOmun67TVuP4kLHUmmr8s4sVh88paiE6pu+Q5y+3bDIaRmUp7uobX7nOdmGSyFJcdFu2F1L54Q3fUnOZI2StqXaGqZQygUqVvq/W5HEpHqR93GIs9YvZ+p+lPefXOwLSSlRLsaQuAq/MIrq64vdINOd+ao+zwc8LH2nFioBkJ11qkuxqs2Z6RCVBqZRTdLuA1Q94nruf3EVYlPXEJ7IQFPnUSbvaQ05NJ0Q90UWgqrXJGRJlJ0G+BehmVKRiCNAboVv1cq23MwSUuiBB3wWHlkz/cs5Rkjy2j1/v4ff4S88n8kAAA="; \ No newline at end of file diff --git a/docs/functions/LazyChild.LazyChild.html b/docs/functions/LazyChild.LazyChild.html index deff4f1..1585e4d 100644 --- a/docs/functions/LazyChild.LazyChild.html +++ b/docs/functions/LazyChild.LazyChild.html @@ -1 +1 @@ -LazyChild | react-native-lazy-scrollview

Function LazyChild

Settings

Member Visibility
+LazyChild | react-native-lazy-scrollview

Function LazyChild

Settings

Member Visibility
diff --git a/docs/functions/LazyScrollView.LazyScrollView.html b/docs/functions/LazyScrollView.LazyScrollView.html index b35fd3f..52a867f 100644 --- a/docs/functions/LazyScrollView.LazyScrollView.html +++ b/docs/functions/LazyScrollView.LazyScrollView.html @@ -1,2 +1,7 @@ -LazyScrollView | react-native-lazy-scrollview

Function LazyScrollView

  • LazyScrollView(__namedParameters): Element

  • ScrollView to wrap Lazy Children in.

    -

    Parameters

    • __namedParameters: Props

    Returns Element

Settings

Member Visibility
+LazyScrollView | react-native-lazy-scrollview

Function LazyScrollView

ScrollView to wrap Lazy Children in.

+
  • LazyScrollView(props): null | ReactElement<any, string | JSXElementConstructor<any>>

  • NOTE: Exotic components are not callable.

    +

    Parameters

    • props: Pick<Props,
          | "children"
          | "style"
          | "hitSlop"
          | "pointerEvents"
          | "removeClippedSubviews"
          | "testID"
          | "nativeID"
          | "collapsable"
          | "needsOffscreenAlphaCompositing"
          | "renderToHardwareTextureAndroid"
          | "focusable"
          | "shouldRasterizeIOS"
          | "isTVSelectable"
          | "hasTVPreferredFocus"
          | "tvParallaxProperties"
          | "tvParallaxShiftDistanceX"
          | "tvParallaxShiftDistanceY"
          | "tvParallaxTiltAngle"
          | "tvParallaxMagnification"
          | "onStartShouldSetResponder"
          | "onMoveShouldSetResponder"
          | "onResponderEnd"
          | "onResponderGrant"
          | "onResponderReject"
          | "onResponderMove"
          | "onResponderRelease"
          | "onResponderStart"
          | "onResponderTerminationRequest"
          | "onResponderTerminate"
          | "onStartShouldSetResponderCapture"
          | "onMoveShouldSetResponderCapture"
          | "onTouchStart"
          | "onTouchMove"
          | "onTouchEnd"
          | "onTouchCancel"
          | "onTouchEndCapture"
          | "onPointerEnter"
          | "onPointerEnterCapture"
          | "onPointerLeave"
          | "onPointerLeaveCapture"
          | "onPointerMove"
          | "onPointerMoveCapture"
          | "onPointerCancel"
          | "onPointerCancelCapture"
          | "onPointerDown"
          | "onPointerDownCapture"
          | "onPointerUp"
          | "onPointerUpCapture"
          | "accessible"
          | "accessibilityActions"
          | "accessibilityLabel"
          | "accessibilityRole"
          | "accessibilityState"
          | "accessibilityHint"
          | "accessibilityValue"
          | "onAccessibilityAction"
          | "accessibilityLiveRegion"
          | "importantForAccessibility"
          | "accessibilityElementsHidden"
          | "accessibilityViewIsModal"
          | "onAccessibilityEscape"
          | "onAccessibilityTap"
          | "onMagicTap"
          | "accessibilityIgnoresInvertColors"
          | "animatedProps"
          | "layout"
          | "entering"
          | "exiting"
          | "contentContainerStyle"
          | "decelerationRate"
          | "horizontal"
          | "invertStickyHeaders"
          | "keyboardDismissMode"
          | "keyboardShouldPersistTaps"
          | "onContentSizeChange"
          | "onScrollBeginDrag"
          | "onScrollEndDrag"
          | "onMomentumScrollEnd"
          | "onMomentumScrollBegin"
          | "pagingEnabled"
          | "scrollEnabled"
          | "showsHorizontalScrollIndicator"
          | "showsVerticalScrollIndicator"
          | "stickyHeaderHiddenOnScroll"
          | "refreshControl"
          | "snapToInterval"
          | "snapToOffsets"
          | "snapToStart"
          | "snapToEnd"
          | "stickyHeaderIndices"
          | "disableIntervalMomentum"
          | "disableScrollViewPanResponder"
          | "StickyHeaderComponent"
          | "alwaysBounceHorizontal"
          | "alwaysBounceVertical"
          | "automaticallyAdjustContentInsets"
          | "automaticallyAdjustKeyboardInsets"
          | "automaticallyAdjustsScrollIndicatorInsets"
          | "bounces"
          | "bouncesZoom"
          | "canCancelContentTouches"
          | "centerContent"
          | "contentInset"
          | "contentOffset"
          | "contentInsetAdjustmentBehavior"
          | "directionalLockEnabled"
          | "indicatorStyle"
          | "maintainVisibleContentPosition"
          | "maximumZoomScale"
          | "minimumZoomScale"
          | "onScrollAnimationEnd"
          | "pinchGestureEnabled"
          | "scrollEventThrottle"
          | "scrollIndicatorInsets"
          | "scrollToOverflowEnabled"
          | "scrollsToTop"
          | "snapToAlignment"
          | "onScrollToTop"
          | "zoomScale"
          | "endFillColor"
          | "scrollPerfTag"
          | "overScrollMode"
          | "nestedScrollEnabled"
          | "fadingEdgeLength"
          | "persistentScrollbar"
          | "offset"> & RefAttributes<LazyScrollViewMethods>

    Returns null | ReactElement<any, string | JSXElementConstructor<any>>

Properties

$$typeof +defaultProps? +displayName? +propTypes? +

Properties

Readonly$$typeof

$$typeof: symbol

OptionaldefaultProps

defaultProps?: Partial<Pick<Props,
    | "children"
    | "style"
    | "hitSlop"
    | "pointerEvents"
    | "removeClippedSubviews"
    | "testID"
    | "nativeID"
    | "collapsable"
    | "needsOffscreenAlphaCompositing"
    | "renderToHardwareTextureAndroid"
    | "focusable"
    | "shouldRasterizeIOS"
    | "isTVSelectable"
    | "hasTVPreferredFocus"
    | "tvParallaxProperties"
    | "tvParallaxShiftDistanceX"
    | "tvParallaxShiftDistanceY"
    | "tvParallaxTiltAngle"
    | "tvParallaxMagnification"
    | "onStartShouldSetResponder"
    | "onMoveShouldSetResponder"
    | "onResponderEnd"
    | "onResponderGrant"
    | "onResponderReject"
    | "onResponderMove"
    | "onResponderRelease"
    | "onResponderStart"
    | "onResponderTerminationRequest"
    | "onResponderTerminate"
    | "onStartShouldSetResponderCapture"
    | "onMoveShouldSetResponderCapture"
    | "onTouchStart"
    | "onTouchMove"
    | "onTouchEnd"
    | "onTouchCancel"
    | "onTouchEndCapture"
    | "onPointerEnter"
    | "onPointerEnterCapture"
    | "onPointerLeave"
    | "onPointerLeaveCapture"
    | "onPointerMove"
    | "onPointerMoveCapture"
    | "onPointerCancel"
    | "onPointerCancelCapture"
    | "onPointerDown"
    | "onPointerDownCapture"
    | "onPointerUp"
    | "onPointerUpCapture"
    | "accessible"
    | "accessibilityActions"
    | "accessibilityLabel"
    | "accessibilityRole"
    | "accessibilityState"
    | "accessibilityHint"
    | "accessibilityValue"
    | "onAccessibilityAction"
    | "accessibilityLiveRegion"
    | "importantForAccessibility"
    | "accessibilityElementsHidden"
    | "accessibilityViewIsModal"
    | "onAccessibilityEscape"
    | "onAccessibilityTap"
    | "onMagicTap"
    | "accessibilityIgnoresInvertColors"
    | "animatedProps"
    | "layout"
    | "entering"
    | "exiting"
    | "contentContainerStyle"
    | "decelerationRate"
    | "horizontal"
    | "invertStickyHeaders"
    | "keyboardDismissMode"
    | "keyboardShouldPersistTaps"
    | "onContentSizeChange"
    | "onScrollBeginDrag"
    | "onScrollEndDrag"
    | "onMomentumScrollEnd"
    | "onMomentumScrollBegin"
    | "pagingEnabled"
    | "scrollEnabled"
    | "showsHorizontalScrollIndicator"
    | "showsVerticalScrollIndicator"
    | "stickyHeaderHiddenOnScroll"
    | "refreshControl"
    | "snapToInterval"
    | "snapToOffsets"
    | "snapToStart"
    | "snapToEnd"
    | "stickyHeaderIndices"
    | "disableIntervalMomentum"
    | "disableScrollViewPanResponder"
    | "StickyHeaderComponent"
    | "alwaysBounceHorizontal"
    | "alwaysBounceVertical"
    | "automaticallyAdjustContentInsets"
    | "automaticallyAdjustKeyboardInsets"
    | "automaticallyAdjustsScrollIndicatorInsets"
    | "bounces"
    | "bouncesZoom"
    | "canCancelContentTouches"
    | "centerContent"
    | "contentInset"
    | "contentOffset"
    | "contentInsetAdjustmentBehavior"
    | "directionalLockEnabled"
    | "indicatorStyle"
    | "maintainVisibleContentPosition"
    | "maximumZoomScale"
    | "minimumZoomScale"
    | "onScrollAnimationEnd"
    | "pinchGestureEnabled"
    | "scrollEventThrottle"
    | "scrollIndicatorInsets"
    | "scrollToOverflowEnabled"
    | "scrollsToTop"
    | "snapToAlignment"
    | "onScrollToTop"
    | "zoomScale"
    | "endFillColor"
    | "scrollPerfTag"
    | "overScrollMode"
    | "nestedScrollEnabled"
    | "fadingEdgeLength"
    | "persistentScrollbar"
    | "offset"> & RefAttributes<LazyScrollViewMethods>>

OptionaldisplayName

displayName?: string

OptionalpropTypes

propTypes?: WeakValidationMap<Pick<Props,
    | "children"
    | "style"
    | "hitSlop"
    | "pointerEvents"
    | "removeClippedSubviews"
    | "testID"
    | "nativeID"
    | "collapsable"
    | "needsOffscreenAlphaCompositing"
    | "renderToHardwareTextureAndroid"
    | "focusable"
    | "shouldRasterizeIOS"
    | "isTVSelectable"
    | "hasTVPreferredFocus"
    | "tvParallaxProperties"
    | "tvParallaxShiftDistanceX"
    | "tvParallaxShiftDistanceY"
    | "tvParallaxTiltAngle"
    | "tvParallaxMagnification"
    | "onStartShouldSetResponder"
    | "onMoveShouldSetResponder"
    | "onResponderEnd"
    | "onResponderGrant"
    | "onResponderReject"
    | "onResponderMove"
    | "onResponderRelease"
    | "onResponderStart"
    | "onResponderTerminationRequest"
    | "onResponderTerminate"
    | "onStartShouldSetResponderCapture"
    | "onMoveShouldSetResponderCapture"
    | "onTouchStart"
    | "onTouchMove"
    | "onTouchEnd"
    | "onTouchCancel"
    | "onTouchEndCapture"
    | "onPointerEnter"
    | "onPointerEnterCapture"
    | "onPointerLeave"
    | "onPointerLeaveCapture"
    | "onPointerMove"
    | "onPointerMoveCapture"
    | "onPointerCancel"
    | "onPointerCancelCapture"
    | "onPointerDown"
    | "onPointerDownCapture"
    | "onPointerUp"
    | "onPointerUpCapture"
    | "accessible"
    | "accessibilityActions"
    | "accessibilityLabel"
    | "accessibilityRole"
    | "accessibilityState"
    | "accessibilityHint"
    | "accessibilityValue"
    | "onAccessibilityAction"
    | "accessibilityLiveRegion"
    | "importantForAccessibility"
    | "accessibilityElementsHidden"
    | "accessibilityViewIsModal"
    | "onAccessibilityEscape"
    | "onAccessibilityTap"
    | "onMagicTap"
    | "accessibilityIgnoresInvertColors"
    | "animatedProps"
    | "layout"
    | "entering"
    | "exiting"
    | "contentContainerStyle"
    | "decelerationRate"
    | "horizontal"
    | "invertStickyHeaders"
    | "keyboardDismissMode"
    | "keyboardShouldPersistTaps"
    | "onContentSizeChange"
    | "onScrollBeginDrag"
    | "onScrollEndDrag"
    | "onMomentumScrollEnd"
    | "onMomentumScrollBegin"
    | "pagingEnabled"
    | "scrollEnabled"
    | "showsHorizontalScrollIndicator"
    | "showsVerticalScrollIndicator"
    | "stickyHeaderHiddenOnScroll"
    | "refreshControl"
    | "snapToInterval"
    | "snapToOffsets"
    | "snapToStart"
    | "snapToEnd"
    | "stickyHeaderIndices"
    | "disableIntervalMomentum"
    | "disableScrollViewPanResponder"
    | "StickyHeaderComponent"
    | "alwaysBounceHorizontal"
    | "alwaysBounceVertical"
    | "automaticallyAdjustContentInsets"
    | "automaticallyAdjustKeyboardInsets"
    | "automaticallyAdjustsScrollIndicatorInsets"
    | "bounces"
    | "bouncesZoom"
    | "canCancelContentTouches"
    | "centerContent"
    | "contentInset"
    | "contentOffset"
    | "contentInsetAdjustmentBehavior"
    | "directionalLockEnabled"
    | "indicatorStyle"
    | "maintainVisibleContentPosition"
    | "maximumZoomScale"
    | "minimumZoomScale"
    | "onScrollAnimationEnd"
    | "pinchGestureEnabled"
    | "scrollEventThrottle"
    | "scrollIndicatorInsets"
    | "scrollToOverflowEnabled"
    | "scrollsToTop"
    | "snapToAlignment"
    | "onScrollToTop"
    | "zoomScale"
    | "endFillColor"
    | "scrollPerfTag"
    | "overScrollMode"
    | "nestedScrollEnabled"
    | "fadingEdgeLength"
    | "persistentScrollbar"
    | "offset"> & RefAttributes<LazyScrollViewMethods>>

Settings

Member Visibility

On This Page

Properties
diff --git a/docs/hierarchy.html b/docs/hierarchy.html new file mode 100644 index 0000000..bef35de --- /dev/null +++ b/docs/hierarchy.html @@ -0,0 +1 @@ +react-native-lazy-scrollview

react-native-lazy-scrollview

Class Hierarchy

Settings

Member Visibility
diff --git a/docs/index.html b/docs/index.html index ea84bcb..3880896 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,13 +9,17 @@

react-native-lazy-scrollview

CI

Motivation

To provide an easy way to trigger logic when a child (or nested child) of a ScrollView passes a threshold scroll value. This is useful when you have a screen with dynamic content that you don't want to unmount when it scrolls offscreen, but also would like to lazy load. Also provides ability to trigger additional logic when a percentage of your component is visible in the ScrollView.

Example: Say you have some components lower in your scoll that make expensive api calls. Give them a skeleton loader, make your threshold 300, and trigger your api call when the component is within 300 px of the bottom of the ScrollView by passing yourApiCall to the onEnterThresholdPass prop on the LazyChild that wraps your component. And then say you're like "yeah but I also want to know when 75% of this api-heavy component is viewable". Then set the percentVisibleThreshold on the LazyChild wrapping that sucker to 0.75, then trigger and analytic call with onVisibilityEnter! This will fire every time the component leaves or enters. It has onVisibilityExit, which you can use if you're feeling super froggy and want to pause a video when it goes under a certain percentage of viewable area, and if then you can use onExitThresholdPass to unmount the video and replace it with a spacer.

+

Notes

⚠️ Limitations

Currently only supports vertical ScrollView.

Installation

yarn add react-native-lazy-scrollview

This library requires reanimated. Follow their installation instructions.

API Documentation

-

Usage Examples

// MyCoolHomeScreen.tsx
import { LazyScrollView } from 'react-native-lazy-scrollview';
import { CoolComponentA, CoolComponentB, CoolComponentC } from './components';

export function MyCoolHomeScreen() {
  return (
    // Trigger onThresholdReached when child is 300 pixels below the bottom
    <LazyScrollView offset={300} showsVerticalScrollIndicator={false}>
      <CoolComponentA />
      <VideoPlayer />
      <CoolComponentB />
      <CoolComponentC />
    </LazyScrollView>
  );
}

// CoolComponentC.tsx
import { View } from 'react-native';
import { LazyChild } from 'react-native-lazy-scrollview';
import { ContentView, SkeletonLoader } from './components';

export function CoolComponentC() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const onEnterThresholdPass = async () => {
    try {
      const fetchedData = await someExpensiveApiCall();
      setData(fetchedData);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  };

  // Fired when LazyChild has 75% visibility
  const onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

  if (!data) {
    // Trigger has fired and no data :(
    return null;
  }

  return (
    <LazyChild
      onEnterThresholdPass={onEnterThresholdPass}
      onVisibilityEnter={onVisibilityEnter}
      percentVisibleThreshold={0.75}
    >
      {loading ? <SkeletonLoader /> : <ContentView data={data} />}
    </LazyChild>
  );
}

// PriceMasterVideo.tsx
import { View } from 'react-native';
import { LazyChild } from 'react-native-lazy-scrollview';
import { ContentView, SkeletonLoader, VideoPlayer } from './components';

const videoURl = 'https://youtu.be/wfJnni0oBPE?si=kRdIUcq4l5dfGfqV';

export function PriceMasterVideo() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [paused, setPaused] = useState(true);

  const onEnterThresholdPass = async () => {
    setLoading(false);
  };

  // Fired when LazyChild has 25% visibility
  const onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

  // Fired when LazyChild is less that 25% visible after being visible
  const onVisibilityExit = async () => {
    setPaused(true);
  };

  return (
    <LazyChild
      onEnterThresholdPass={onEnterThresholdPass}
      onVisibilityEnter={onVisibilityEnter}
      percentVisibleThreshold={0.25}
    >
      {loading ? (
        <SkeletonLoader />
      ) : (
        <VideoPlayer paused={paused} videoUrl={videoUrl} />
      )}
    </LazyChild>
  );
}
+
Usage Examples
// MyCoolHomeScreen.tsx
import { LazyScrollView } from 'react-native-lazy-scrollview';
import {
  CoolComponentA,
  CoolComponentB,
  CoolComponentC,
  PriceMasterVideo,
  ScrollToTopButton,
} from './components';

export function MyCoolHomeScreen() {
  const ref = useRef<LazyScrollViewMethods>(null);

  return (
    // Trigger onThresholdReached when child is 300 pixels below the bottom
    <LazyScrollView offset={300} showsVerticalScrollIndicator={false}>
      <CoolComponentA />
      <PriceMasterVideo />
      <CoolComponentB />
      <CoolComponentC />
      <ScrollToTopButton
        onPress={() => ref.current?.scrollToStart({ animated: true })}
      />
    </LazyScrollView>
  );
}

// CoolComponentC.tsx
import { View } from 'react-native';
import { LazyChild } from 'react-native-lazy-scrollview';
import { ContentView, SkeletonLoader } from './components';

export function CoolComponentC() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  const onEnterThresholdPass = async () => {
    try {
      const fetchedData = await someExpensiveApiCall();
      setData(fetchedData);
      setLoading(false);
    } catch (e) {
      setLoading(false);
    }
  };

  // Fired when LazyChild has 75% visibility
  const onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

  if (!data) {
    // Trigger has fired and no data :(
    return null;
  }

  return (
    <LazyChild
      onEnterThresholdPass={onEnterThresholdPass}
      onVisibilityEnter={onVisibilityEnter}
      percentVisibleThreshold={0.75}
    >
      {loading ? <SkeletonLoader /> : <ContentView data={data} />}
    </LazyChild>
  );
}

// PriceMasterVideo.tsx
import { View } from 'react-native';
import { LazyChild } from 'react-native-lazy-scrollview';
import { ContentView, SkeletonLoader, VideoPlayer } from './components';

const videoURl = 'https://youtu.be/wfJnni0oBPE?si=kRdIUcq4l5dfGfqV';

export function PriceMasterVideo() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [paused, setPaused] = useState(true);

  const onEnterThresholdPass = async () => {
    setLoading(false);
  };

  // Fired when LazyChild has 25% visibility
  const onVisibilityEnter = async () => {
    analyticsCall();
    setPaused(false);
  };

  // Fired when LazyChild is less that 25% visible after being visible
  const onVisibilityExit = async () => {
    setPaused(true);
  };

  return (
    <LazyChild
      onEnterThresholdPass={onEnterThresholdPass}
      onVisibilityEnter={onVisibilityEnter}
      percentVisibleThreshold={0.25}
    >
      {loading ? (
        <SkeletonLoader />
      ) : (
        <VideoPlayer paused={paused} videoUrl={videoUrl} />
      )}
    </LazyChild>
  );
}
 

 
 
Example
To run the example app, clone the repo

@@ -25,4 +29,4 @@ 
react-native-lazy-scrollview

 
License
MIT

 

 
Made with create-react-native-library

-
Settings
Member Visibility
On This Page
MotivationInstallationUsage ExamplesExampleLicense

+
Settings
Member Visibility
On This Page
MotivationInstallationUsage ExamplesExampleLicense

diff --git a/docs/interfaces/LazyChild.LazyChildCallbacks.html b/docs/interfaces/LazyChild.LazyChildCallbacks.html
new file mode 100644
index 0000000..10d77a4
--- /dev/null
+++ b/docs/interfaces/LazyChild.LazyChildCallbacks.html
@@ -0,0 +1,21 @@
+LazyChildCallbacks | react-native-lazy-scrollview
Interface LazyChildCallbacks
interface LazyChildCallbacks { 
    onEnterThresholdPass?: (() => void); 
    onExitThresholdPass?: (() => void); 
    onVisibilityEnter?: (() => void); 
    onVisibilityExit?: (() => void); 
}
Hierarchy (view full)
Properties
onEnterThresholdPass?
+onExitThresholdPass?
+onVisibilityEnter?
+onVisibilityExit?
+
 Properties
OptionalonEnterThresholdPass
onEnterThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being offscreen

+
    
+
  • Note: This will only fire once and stop measuring if onExitThresholdPass is not provided.
    • 
+

+
OptionalonExitThresholdPass
onExitThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being onscreen

+
    
+
  • Note: This will not fire if onEnterThresholdPass has not fired.
    • 
+

+
OptionalonVisibilityEnter
onVisibilityEnter?: (() => void)
Callback to fire when the LazyChild's viewable area exceeds the percentVisibleThreshold.

+
    
+
  • Note: This will only fire once and stop measuring if onVisibilityExit is not provided.
    • 
+

+
OptionalonVisibilityExit
onVisibilityExit?: (() => void)
Callback to fire when the LazyChild's viewable area goes under the percentVisibleThreshold after being above it.

+
    
+
  • Note: This will not fire if onVisibilityEnter has not fired.
    • 
+

+
Settings
Member Visibility
On This Page
Properties

diff --git a/docs/interfaces/LazyChild.LazyChildProps.html b/docs/interfaces/LazyChild.LazyChildProps.html
index ed6091a..43ccc80 100644
--- a/docs/interfaces/LazyChild.LazyChildProps.html
+++ b/docs/interfaces/LazyChild.LazyChildProps.html
@@ -1,21 +1,33 @@
 LazyChildProps | react-native-lazy-scrollview
Interface LazyChildProps
LazyChildProps

-
interface LazyChildProps { 
    children: ReactNode; 
    ignoreZeroMeasurement?: boolean; 
    onEnterThresholdPass?: (() => void); 
    onExitThresholdPass?: (() => void); 
    onVisibilityEnter?: (() => void); 
    onVisibilityExit?: (() => void); 
    percentVisibleThreshold?: number; 
}
Properties
children
+
interface LazyChildProps { 
    children: ReactNode; 
    ignoreZeroMeasurement?: boolean; 
    onEnterThresholdPass?: (() => void); 
    onExitThresholdPass?: (() => void); 
    onVisibilityEnter?: (() => void); 
    onVisibilityExit?: (() => void); 
    percentVisibleThreshold?: number; 
}
Hierarchy (view full)
Properties
children
 ignoreZeroMeasurement?
-onEnterThresholdPass?
-onExitThresholdPass?
-onVisibilityEnter?
-onVisibilityExit?
+onEnterThresholdPass?
+onExitThresholdPass?
+onVisibilityEnter?
+onVisibilityExit?
 percentVisibleThreshold?
-
 Properties
children
children: ReactNode
OptionalignoreZeroMeasurement
ignoreZeroMeasurement?: boolean
Protects against firing callback on measurement with zero value.  Good to set to false if you know the LazyChild is the first item in the LazyScrollview.

+
 Properties
children
children: ReactNode
OptionalignoreZeroMeasurement
ignoreZeroMeasurement?: boolean
Protects against firing callback on measurement with zero value.  Good to set to false if you know the LazyChild is the first item in the LazyScrollview.

 
Default Value
true
 

 
-
OptionalonEnterThresholdPass
onEnterThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being offscreen

-
OptionalonExitThresholdPass
onExitThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being onscreen

-
OptionalonVisibilityEnter
onVisibilityEnter?: (() => void)
Callback to fire when the LazyChild's viewable area exceeds the percentVisibleThreshold.

-
OptionalonVisibilityExit
onVisibilityExit?: (() => void)
Callback to fire when the LazyChild's viewable area goes under the percentVisibleThreshold after being above it.

-
OptionalpercentVisibleThreshold
percentVisibleThreshold?: number
How much of the LazyChild should be visible before the percent visible threshold is passed.  For example, 0.5 would fire onPercentVisibleThresholdPass when 50% of the LazyChild is visible.  This has no effect if onPercentVisibleThresholdPass is not provided.

-
Default Value
1.0
+
OptionalonEnterThresholdPass
onEnterThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being offscreen

+
    
+
  • Note: This will only fire once and stop measuring if onExitThresholdPass is not provided.
    • 
+

+
OptionalonExitThresholdPass
onExitThresholdPass?: (() => void)
Callback to fire when the LazyChild passes the LazyScrollView's offset after being onscreen

+
    
+
  • Note: This will not fire if onEnterThresholdPass has not fired.
    • 
+

+
OptionalonVisibilityEnter
onVisibilityEnter?: (() => void)
Callback to fire when the LazyChild's viewable area exceeds the percentVisibleThreshold.

+
    
+
  • Note: This will only fire once and stop measuring if onVisibilityExit is not provided.
    • 
+

+
OptionalonVisibilityExit
onVisibilityExit?: (() => void)
Callback to fire when the LazyChild's viewable area goes under the percentVisibleThreshold after being above it.

+
    
+
  • Note: This will not fire if onVisibilityEnter has not fired.
    • 
+

+
OptionalpercentVisibleThreshold
percentVisibleThreshold?: number
How much of the LazyChild should be visible before the percent visible threshold is passed.  For example, 0.5 would fire onPercentVisibleThresholdPass when 50% of the LazyChild is visible.  This has no effect if onPercentVisibleThresholdPass is not provided.

+
Default Value
1.0
 

 
-
Settings
Member Visibility
On This Page
Properties

+
Settings
Member Visibility
On This Page
Properties

diff --git a/docs/interfaces/LazyScrollView.LazyScrollViewMethods.html b/docs/interfaces/LazyScrollView.LazyScrollViewMethods.html
new file mode 100644
index 0000000..426928b
--- /dev/null
+++ b/docs/interfaces/LazyScrollView.LazyScrollViewMethods.html
@@ -0,0 +1,20 @@
+LazyScrollViewMethods | react-native-lazy-scrollview
Interface LazyScrollViewMethods
interface LazyScrollViewMethods { 
    scrollTo: ((y?: number | { 
        animated?: boolean; 
        x?: number; 
        y?: number; 
    }, x?: number, animated?: boolean) => void); 
    scrollToEnd: ((options?: { 
        animated: boolean; 
    }) => void); 
    scrollToStart: ((options?: { 
        animated: boolean; 
    }) => void); 
}
Properties
scrollTo
+scrollToEnd
+scrollToStart
+
 Properties
scrollTo
scrollTo: ((y?: number | { 
    animated?: boolean; 
    x?: number; 
    y?: number; 
}, x?: number, animated?: boolean) => void)
Type declaration
    • (y?, x?, animated?): void
    • Scrolls to a given x, y offset, either immediately or with a smooth animation.
+Syntax:
      
+
      scrollTo(options: {x: number = 0; y: number = 0; animated: boolean = true})
      
+
      Note: The weird argument signature is due to the fact that, for historical reasons,
+the function also accepts separate arguments as an alternative to the options object.
+This is deprecated due to ambiguity (y before x), and SHOULD NOT BE USED.
      
+
      Parameters
      • Optionaly: number | { 
            animated?: boolean; 
            x?: number; 
            y?: number; 
        }
      • Optionalx: number
      • Optionalanimated: boolean
      Returns void
scrollToEnd
scrollToEnd: ((options?: { 
    animated: boolean; 
}) => void)
Type declaration
    • (options?): void
    • A helper function that scrolls to the end of the scrollview;
+If this is a vertical ScrollView, it scrolls to the bottom.
+If this is a horizontal ScrollView scrolls to the right.
      
+
      The options object has an animated prop, that enables the scrolling animation or not.
+The animated prop defaults to true
      
+
      Parameters
      • Optionaloptions: { 
            animated: boolean; 
        }
        • animated: boolean
      Returns void
scrollToStart
scrollToStart: ((options?: { 
    animated: boolean; 
}) => void)
Type declaration
    • (options?): void
    • A helper function that scrolls to the end of the scrollview;
+If this is a vertical ScrollView, it scrolls to the bottom.
+If this is a horizontal ScrollView scrolls to the right.
      
+
      The options object has an animated prop, that enables the scrolling animation or not.
+The animated prop defaults to true
      
+
      Parameters
      • Optionaloptions: { 
            animated: boolean; 
        }
        • animated: boolean
      Returns void
Settings
Member Visibility
On This Page
Properties

diff --git a/docs/interfaces/LazyScrollView.LazyScrollViewProps.html b/docs/interfaces/LazyScrollView.LazyScrollViewProps.html
index 2e5ea03..084c2a8 100644
--- a/docs/interfaces/LazyScrollView.LazyScrollViewProps.html
+++ b/docs/interfaces/LazyScrollView.LazyScrollViewProps.html
@@ -1,6 +1,8 @@
-LazyScrollViewProps | react-native-lazy-scrollview
Interface LazyScrollViewProps
interface LazyScrollViewProps { 
    offset?: number; 
}
Properties
offset?
+LazyScrollViewProps | react-native-lazy-scrollview
Interface LazyScrollViewProps
interface LazyScrollViewProps { 
    offset?: number; 
    ref?: MutableRefObject<LazyScrollViewMethods>; 
}
Properties
offset?
+ref?
 
 Properties
Optionaloffset
offset?: number
How far above or below the bottom of the ScrollView the threshold trigger is. Negative is above, postive it below. Accepts ScrollView props.

-
Default Value
0 (bottom of ScrollView)
+
Default Value
0 (bottom of ScrollView)
 

 
-
Settings
Member Visibility
On This Page
Properties

+
Optionalref
ref?: MutableRefObject<LazyScrollViewMethods>
Ref to the LazyScrollView.  Exposes scrollTo, scrollToStart, and scrollToEnd methods.

+
Settings
Member Visibility
On This Page
Properties

diff --git a/docs/modules/LazyChild.html b/docs/modules/LazyChild.html
index 27c20b2..49e0581 100644
--- a/docs/modules/LazyChild.html
+++ b/docs/modules/LazyChild.html
@@ -1,3 +1,4 @@
-LazyChild | react-native-lazy-scrollview
Module LazyChild
Index
Interfaces
LazyChildProps
+LazyChild | react-native-lazy-scrollview
Module LazyChild
Index
Interfaces
LazyChildCallbacks
+LazyChildProps
 
Functions
LazyChild
 
Settings
Member Visibility

diff --git a/docs/modules/LazyScrollView.html b/docs/modules/LazyScrollView.html
index 200a8cd..72c6bd8 100644
--- a/docs/modules/LazyScrollView.html
+++ b/docs/modules/LazyScrollView.html
@@ -1,3 +1,4 @@
-LazyScrollView | react-native-lazy-scrollview
Module LazyScrollView
Index
Interfaces
LazyScrollViewProps
+LazyScrollView | react-native-lazy-scrollview
Module LazyScrollView
Index
Interfaces
LazyScrollViewMethods
+LazyScrollViewProps
 
Functions
LazyScrollView
 
Settings
Member Visibility