Lynx UI logo
Lynx UI
  • English

      • <List>

      A virtualized List component for ReactLynx. Designed to render long lists of data.
      Info

      You can check the source code to understand how it works, and you're welcome to submit MRs to enhance its capabilities.

      Basic Usage

      lynx-ui-listBasic/index.tsx
      Code
      Preview

      ListProps

      Properties

      bounces
      iOS
      Typeboolean·Defaulttrue
      Enable iOS bounces effect.
      children
      iOS
      Android
      Harmony
      TypeReactNode
      Children of list.
      className
      iOS
      Android
      Harmony
      Typestring
      className
      crossAxisGap
      iOS
      Android
      Harmony
      Typenumber·Default0
      Specifies the cross axis spacing between Component in the list.
      enableScroll
      iOS
      Android
      Harmony
      Typeboolean·Defaulttrue
      Enable vertical scroll.
      enableScrollBar
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Enable scrollBar.
      enableScrollMonitor
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Enable scroll monitor.
      exposureID
      iOS
      Android
      Harmony
      Typestring
      exposure-id for global exposure
      exposureScene
      iOS
      Android
      Harmony
      Typestring
      exposure-scene for global exposure
      initialScrollIndex
      iOS
      Android
      Harmony
      Typenumber·Default0
      The position to which the list automatically scrolls on the initial load.
      iosEnableSimultaneousTouch
      iOS
      Typeboolean·Defaulttrue
      Force touch event to send to List.
      iosScrollsToTop
      iOS
      Typeboolean·Defaulttrue
      Whether tapping the iOS status bar should scroll to top.
      itemSnap
      iOS
      Android
      Harmony
      TypeListItemSnapAlignment
      Paginated scrolling effects
      listId
      iOS
      Android
      Harmony
      Typestring
      The id of the list.
      listMaxSize
      iOS
      Android
      Harmony
      Typenumber
      Unit is px. Sets the auto-limiting size for the container. When child content size is below this value,the container size adjusts to fit content. When exceeded, the container locks at this size.
      listType
      iOS
      Android
      Harmony
      Typesingle | flow | waterfall
      The layout type of list.
      lowerThresholdItemCount
      iOS
      Android
      Harmony
      Typenumber·Default0
      Will override the lower-threshold. The item threshold from the lower edge of the list to trigger the onScrollToLower event.
      main-thread:gesture
      iOS
      Android
      TypeBaseGesture
      If you want to use gesture, pass it here.
      mainAxisGap
      iOS
      Android
      Harmony
      Typenumber·Default0
      Specifies the major axis spacing between Component in the list.
      name
      iOS
      Android
      Harmony
      Typestring
      The name of list.
      needLayoutCompleteInfo
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Output layout complete detailed info.
      onUIAppear
      iOS
      Android
      Harmony
      Type(e: CommonEvent) => void
      Exposure event for UI
      onUIDisappear
      iOS
      Android
      Harmony
      Type(e: CommonEvent) => void
      Disappear event for UI
      preloadBufferCount
      iOS
      Android
      Harmony
      Typenumber·Default0
      Controls the number of nodes to be preloaded outside the on-screen nodes of the list. Not supported when listType is set to 'waterfall'.
      ref
      TypeForwardedRef
      scrollEventThrottle
      iOS
      Android
      Harmony
      Typenumber·Default200
      The time interval, in milliseconds, for the list to trigger the scroll event callback.
      scrollMonitorTag
      iOS
      Android
      Harmony
      Typestring·Defaultfalse
      The tag for scroll monitor.
      scrollOrientation
      iOS
      Android
      Harmony
      Typevertical | horizontal·Default'vertical'
      Set to 'vertical' for vertical scrolling and set to 'horizontal' for horizontal scrolling.
      scrollPropagationBehavior
      iOS
      Android
      TypeScrollPropagationBehavior·Default'native'
      Controls whether scroll events propagate to parent containers. For now, 'preventPropagate' needs to be used together with temporaryBlockScrollClass and temporaryBlockScrollTag on iOS.
      shouldRequestStateRestore
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      The lifecycle of element layer reuse. It solves the problem of reuse status disorder in the UI layer.
      showVisibleItemInfoInScrollEvent
      iOS
      Android
      Harmony
      Typeboolean·Defaultfalse
      Controls whether the attachedCells information is included in the bindScroll event detail.
      spanCount
      iOS
      Android
      Harmony
      Typenumber·Defaulttrue
      The span count of list.
      stickyOffset
      iOS
      Android
      Harmony
      Typenumber·Default0
      The offset of the sticky position from the top or bottom of the list.
      style
      iOS
      Android
      Harmony
      TypeCSSProperties
      style
      temporaryAndroidEnableOverflow
      Android
      Typeboolean·Defaulttrue
      Used to control whether platform list enable overflow property on Android platform.
      temporaryBlockScrollClass
      iOS
      Typestring·Default'BDXLynxViewPager'
      The specific class name of the container that is blocked when 'scrollPropagationBehavior' is set to be 'preventPropagate', must be informed by the container provider. For now, 'preventPropagate' needs to be used together with temporaryBlockScrollClass and temporaryBlockScrollTag on iOS. This is a temporary props and will be deprecated on new Lynx SDK version.
      temporaryBlockScrollTag
      iOS
      Typenumber·Default0
      Used to specify the native container tag that is blocked when 'scrollPropagationBehavior' is set to be 'preventPropagate', corresponding to the Tag attribute of UIView. Needs to be specified by the native container provider. For now, 'preventPropagate' needs to be used together with temporaryBlockScrollClass and temporaryBlockScrollTag on iOS. This is a temporary props and will be deprecated on new Lynx SDK version.
      upperThresholdItemCount
      iOS
      Android
      Harmony
      Typenumber·Default0
      Will override the upper-threshold. The item threshold from the upper edge of the list to trigger the onScrollToUpper event.
      useRefactorList
      iOS
      Android
      Harmony
      Typeboolean·Defaulttrue
      Use refactored list.

      Events

      catchLongPress
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Same as onLongPress, but stops the event from propagating to parent elements.
      catchTouchCancel
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Same as onTouchCancel, but stops the event from propagating to parent elements.
      catchTouchEnd
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Same as onTouchEnd, but stops the event from propagating to parent elements.
      catchTouchMove
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Same as onTouchMove, but stops the event from propagating to parent elements.
      catchTouchStart
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Same as onTouchStart, but stops the event from propagating to parent elements.
      debugLogLevel
      iOS
      Android
      Harmony
      Type0 | 1 | 2 | 3·Default0
      Display debug logs. 0: none, 1: error, 2: info, 3: verbose
      onLayoutChange
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when UI has changed viewport size.
      onLayoutComplete
      iOS
      Android
      Harmony
      Type(e: LayoutCompleteEvent) => void
      Send when list's items are updated and this update process has finished.
      onLongPress
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when a touch-point is held on the UI for a period of time.
      onScroll
      iOS
      Android
      Type(e: ScrollEvent) => void
      Being triggered when scrolling occurs.
      onScrollEnd
      iOS
      Android
      Type(e: [object Object] | undefined) => void·Defaultundefined
      Being triggered when scrolling stops.
      onScrollStateChange
      iOS
      Android
      Harmony
      Type(e: ListScrollStateChangeEvent) => void
      The scroll state change.
      onScrollToLower
      iOS
      Android
      Type(e: [object Object] | undefined) => void·Defaultundefined
      Being triggered when scrolling to lower.
      onScrollToUpper
      iOS
      Android
      Type(e: [object Object] | undefined) => void·Defaultundefined
      Being triggered when scrolling to upper.
      onSnapToItem
      iOS
      Android
      Harmony
      Type(e: ListSnapEvent) => void
      Send when list snaps to an item.
      onTap
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when a touch-point is tapped on the UI.
      onTouchCancel
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when a touch event is interrupted or cancelled before it is completed.
      onTouchEnd
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when a touch-point is removed from the UI.
      onTouchMove
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when a touch-point is moving on the UI.
      onTouchStart
      iOS
      Android
      Harmony
      Type(e: EventHandler | undefined) => void
      Send when a touch-point is placed on the UI.

      diffResultDetails

      insertions
      Typenumber[]
      move_from
      Typenumber[]
      move_to
      Typenumber[]
      removals
      Typenumber[]
      update_from
      Typenumber[]
      update_to
      Typenumber[]

      LayoutCompleteEvent

      detail
      iOS
      Android
      Harmony
      TypelayoutCompleteEventDetail
      Layout details.

      layoutCompleteEventDetail

      diffResult
      TypediffResultDetails
      layout-id
      iOS
      Android
      Harmony
      Typenumber
      Connected to a setState.
      visibleCellsAfterLayout
      TypeListItemInfo[]
      visibleCellsBeforeLayout
      TypeListItemInfo[]

      ListItemInfo

      height
      Typenumber
      isBinding
      Typeboolean
      itemKey
      Typestring
      originX
      Typenumber
      originY
      Typenumber
      updated
      Typeboolean
      width
      Typenumber

      ListItemSnapAlignment

      factor
      iOS
      Android
      Harmony
      Typenumber
      Anchoring the position in pagination, with a value range of [0, 1]. 0 - the scrolling List child node aligns with the top of the List. 1 - the scrolling List child node aligns with the bottom of the List.
      offset
      iOS
      Android
      Harmony
      Typenumber
      Add an additional offset parameter to apply an extra offset on top of the factor.

      ListRef

      autoScroll
      iOS
      Android
      Harmony
      Type(rate: px | rpx | ppx | rem | em | vw | vh, start: boolean, autoStop: boolean) => void
      Scroll the list to the specified position and offset.
      getVisibleCells
      iOS
      Android
      Harmony
      Type(success: (res: unknown) => void, fail: (res: unknown) => void) => void
      Scroll the list to the specified position and offset.
      scrollIntoID
      iOS
      Android
      Harmony
      Type(animated: boolean, alignTo: top | bottom | middle | none, listItemID: string, id: string, index: number, offset: number, success: (res: unknown) => void, fail: (res: unknown) => void) => void·Defaultfalse
      Extends standard list's scrollTo. This method uses worklet and supports parameter id like 'scrollIntoView' method for scroll-view. As list is lazy, index is necessary in this method to find where id's component located. useRefactorList={true} is required
      scrollTo
      iOS
      Android
      Harmony
      Type(animated: boolean, alignTo: top | bottom | middle | none, index: number, offset: number, success: (res: unknown) => void, fail: (res: unknown) => void) => void·Default0
      Scroll the list to the specified position and offset.
      Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.