@lynx-example/lynx-ui-scroll-view 0.0.16 → 0.0.18

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @lynx-example/lynx-ui-scroll-view
 
+## 0.0.18
+
+### Patch Changes
+
+- Updated dependencies [[`d294b97`](https://github.com/lynx-family/lynx-ui/commit/d294b976e0bb814c05a5c655ad37b059d7ebdb1f)]:
+  - @lynx-js/lynx-ui@3.138.0
+
+## 0.0.17
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/lynx-ui@3.137.0
+
 ## 0.0.16
 
 ### Patch Changes

package/NativeUseBounces/index.css

@@ -0,0 +1,136 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.demo-container {
+  width: 100%;
+  height: 100%;
+  padding: 36px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--canvas);
+}
+
+.header {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.title {
+  color: var(--content);
+  font-size: 28px;
+  font-weight: 700;
+}
+
+.description {
+  color: var(--content-subtle);
+  font-size: 14px;
+  margin-top: 6px;
+}
+
+.metrics {
+  width: 100%;
+  margin-top: 14px;
+  padding: 12px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  border-radius: 12px;
+  background-color: var(--paper);
+}
+
+.metric {
+  color: var(--content-subtle);
+  font-size: 12px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background-color: var(--canvas);
+}
+
+.metric--event {
+  color: var(--primary);
+  font-weight: 600;
+}
+
+.scroll-view {
+  background-color: var(--paper);
+}
+
+.scroll-content {
+  width: 100%;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: linear-gradient(
+    180deg,
+    var(--gradient-a),
+    var(--gradient-b),
+    var(--gradient-c),
+    var(--gradient-d)
+  );
+}
+
+.card {
+  width: 100%;
+  height: 88px;
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: 16px;
+  background-color: var(--canvas);
+}
+
+.card__index {
+  width: 52px;
+  color: var(--primary);
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.card__copy {
+  display: flex;
+  flex-direction: column;
+}
+
+.card__title {
+  color: var(--content);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.card__subtitle {
+  color: var(--content-subtle);
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.bounce-item {
+  width: 100%;
+  height: 96px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.bounce-item--upper {
+  background-color: var(--primary);
+}
+
+.bounce-item--lower {
+  background-color: var(--primary-2);
+}
+
+.bounce-item__label {
+  color: var(--gradient-content);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.bounce-item__hint {
+  color: var(--gradient-content);
+  font-size: 12px;
+  margin-top: 4px;
+}

package/NativeUseBounces/index.tsx

@@ -0,0 +1,155 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import { root, useState } from '@lynx-js/react'
+
+import { ScrollView } from '@lynx-js/lynx-ui'
+import type { ScrollEvent } from '@lynx-js/types'
+
+import './index.css'
+
+const VIEWPORT_HEIGHT = 420
+const TRIGGER_DISTANCE = 48
+const ITEMS = Array.from({ length: 12 }, (_, index) => index + 1)
+
+interface Metrics {
+  bounceCount: number
+  lastBounce: 'none' | 'upper' | 'lower'
+  maxLowerDistance: number
+  maxUpperDistance: number
+  minScrollTop: number
+  scrollHeight: number
+  scrollTop: number
+}
+
+function BounceItem(props: {
+  direction: 'upper' | 'lower'
+  label: string
+}) {
+  const { direction, label } = props
+  return (
+    <view className={`bounce-item bounce-item--${direction}`}>
+      <text className='bounce-item__label'>{label}</text>
+      <text className='bounce-item__hint'>Threshold: 48px</text>
+    </view>
+  )
+}
+
+function formatMetric(value: number) {
+  return Number.isFinite(value) ? value.toFixed(1) : '--'
+}
+
+function App() {
+  const [metrics, setMetrics] = useState<Metrics>({
+    bounceCount: 0,
+    lastBounce: 'none',
+    maxLowerDistance: 0,
+    maxUpperDistance: 0,
+    minScrollTop: 0,
+    scrollHeight: 0,
+    scrollTop: 0,
+  })
+
+  const handleScroll = (event: ScrollEvent) => {
+    const { scrollHeight, scrollTop } = event.detail
+    const upperDistance = Math.max(0, -scrollTop)
+    const lowerDistance = Math.max(0, scrollTop - scrollHeight)
+
+    setMetrics(previous => ({
+      ...previous,
+      maxLowerDistance: Math.max(
+        previous.maxLowerDistance,
+        lowerDistance,
+      ),
+      maxUpperDistance: Math.max(
+        previous.maxUpperDistance,
+        upperDistance,
+      ),
+      minScrollTop: Math.min(previous.minScrollTop, scrollTop),
+      scrollHeight,
+      scrollTop,
+    }))
+  }
+
+  return (
+    <view className='demo-container lunaris-dark'>
+      <view className='header'>
+        <text className='title'>Native useBounces</text>
+        <text className='description'>
+          Pull beyond both edges and watch bindscroll metrics.
+        </text>
+        <view className='metrics'>
+          <text className='metric'>
+            {`scrollTop: ${formatMetric(metrics.scrollTop)}`}
+          </text>
+          <text className='metric'>
+            {`min scrollTop: ${formatMetric(metrics.minScrollTop)}`}
+          </text>
+          <text className='metric'>
+            {`max upper: ${formatMetric(metrics.maxUpperDistance)}`}
+          </text>
+          <text className='metric'>
+            {`max lower: ${formatMetric(metrics.maxLowerDistance)}`}
+          </text>
+          <text className='metric'>
+            {`scrollHeight: ${formatMetric(metrics.scrollHeight)}`}
+          </text>
+          <text className='metric metric--event'>
+            {`bounce event: ${metrics.lastBounce} (${metrics.bounceCount})`}
+          </text>
+        </view>
+      </view>
+
+      <ScrollView
+        enableNewArch={true}
+        scrollOrientation='vertical'
+        className='scroll-view'
+        style={{
+          width: '100%',
+          height: `${VIEWPORT_HEIGHT}px`,
+          borderRadius: '20px',
+        }}
+        onScroll={handleScroll}
+        bounceableOptions={{
+          enableBounces: true,
+          alwaysBouncing: true,
+          singleSidedBounce: 'both',
+          startBounceTriggerDistance: TRIGGER_DISTANCE,
+          endBounceTriggerDistance: TRIGGER_DISTANCE,
+          upperBounceItem: (
+            <BounceItem direction='upper' label='Native upper bounce' />
+          ),
+          lowerBounceItem: (
+            <BounceItem direction='lower' label='Native lower bounce' />
+          ),
+          onScrollToBounces: ({ direction }) => {
+            setMetrics(previous => ({
+              ...previous,
+              bounceCount: previous.bounceCount + 1,
+              lastBounce: direction,
+            }))
+          },
+        }}
+      >
+        <view className='scroll-content'>
+          {ITEMS.map(item => (
+            <view className='card' key={`native-bounce-card-${item}`}>
+              <text className='card__index'>{`${item}`}</text>
+              <view className='card__copy'>
+                <text className='card__title'>Native ScrollView</text>
+                <text className='card__subtitle'>
+                  scroll-view-new-arch=true
+                </text>
+              </view>
+            </view>
+          ))}
+        </view>
+      </ScrollView>
+    </view>
+  )
+}
+
+root.render(<App />)
+
+export default App

package/lynx.config.mjs

@@ -9,6 +9,7 @@ const defaultConfig = exampleConfig({
   ScrollViewBounces: './Bounces/index.tsx',
   ScrollViewBouncesRTL: './BouncesRTL/index.tsx',
   ScrollViewInnerFlex: './InnerFlex/index.tsx',
+  ScrollViewNativeUseBounces: './NativeUseBounces/index.tsx',
   ScrollViewScrollBy: './ScrollBy/index.tsx',
   ScrollViewZIndex: './ZIndex/index.tsx',
 }, { needWeb: false })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-example/lynx-ui-scroll-view",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Example app demonstrating ScrollView usage in lynx-ui",
   "homepage": "https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/ScrollView#readme",
   "repository": {
@@ -26,7 +26,7 @@
     "@lynx-js/react": "0.123.1",
     "clsx": "^2.1.1",
     "@lynx-js/luna-styles": "0.2.2",
-    "@lynx-js/lynx-ui": "3.136.0"
+    "@lynx-js/lynx-ui": "3.138.0"
   },
   "devDependencies": {
     "@lynx-js/qrcode-rsbuild-plugin": "0.6.0",