@rific/scroll-view 0.1.0 → 0.2.0

package/README.md

@@ -38,7 +38,7 @@ import { ScrollViewSettingsProvider } from '@rific/scroll-view'
 
 export default function RootLayout({ children }) {
   return (
-    <ScrollViewSettingsProvider value={{ snapBack: true }}>
+    <ScrollViewSettingsProvider initialValue={{ snapBack: true }}>
       {children}
     </ScrollViewSettingsProvider>
   )
@@ -49,6 +49,18 @@ export default function RootLayout({ children }) {
 
 ## Components
 
+### `ScrollViewSettingsProvider`
+
+App-wide defaults for scroll settings. Wrap your root layout to set global defaults.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `children` | `ReactNode` | — |
+| `initialValue` | `Partial<ScrollViewSettings>` | Initial settings applied once on mount |
+| `onChange` | `(settings: ScrollViewSettings) => void` | Called whenever settings change |
+
+---
+
 ### `ScrollViewProvider`
 
 Screen-level provider that owns header/footer state and scroll position. Must wrap `ScrollViewHeader`, `ScrollViewFooter`, and the scroll component.
@@ -105,14 +117,17 @@ Drop-in for React Native's `ScrollView`. Accepts all `ScrollViewProps` plus:
 
 | Prop | Type | Description |
 |------|------|-------------|
+| `chipProps` | `ChipProps` | Customize the scroll-to-top chip (label, style, etc.) |
+| `chipThreshold` | `number` | Scroll offset (px) before the chip appears. Default `100` |
 | `footerFixed` | `boolean` | Pin footer for this scroll view; overrides provider |
-| `headerFixed` | `boolean` | Pin header for this scroll view; overrides provider |
 | `gesture` | `GestureType` | Compose with an external RNGH gesture |
+| `headerFixed` | `boolean` | Pin header for this scroll view; overrides provider |
 | `keyboardAware` | `boolean` | Add keyboard height to bottom content inset |
+| `onChipPress` | `() => void` | Additional callback fired when the chip is pressed |
 | `onRefresh` | `() => void` | Enables pull-to-refresh |
-| `refreshing` | `boolean` | Controlled refreshing state |
 | `pullSearchHeight` | `number` | Reserve space above content for `PullSearch` |
 | `ref` | `RefObject<RNScrollView>` | Forward ref to the underlying scroll view |
+| `refreshing` | `boolean` | Controlled refreshing state |
 
 ---
 
@@ -122,14 +137,17 @@ Drop-in for React Native's `FlatList`. Accepts all `FlatListProps<T>` plus:
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `renderFilters` | `ReactNode` | Rendered below `ListHeaderComponent`, above list items |
+| `chipProps` | `ChipProps` | Customize the scroll-to-top/start chip (label, style, etc.) |
+| `chipThreshold` | `number` | Scroll offset (px) before the chip appears. Default `100` |
 | `footerFixed` | `boolean` | Pin footer for this list; overrides provider |
-| `headerFixed` | `boolean` | Pin header for this list; overrides provider |
 | `gesture` | `GestureType` | Compose with an external RNGH gesture |
+| `headerFixed` | `boolean` | Pin header for this list; overrides provider |
 | `keyboardAware` | `boolean` | Add keyboard height to bottom content inset |
+| `onChipPress` | `() => void` | Additional callback fired when the chip is pressed |
 | `onRefresh` | `() => Promise<void> \| void` | Enables pull-to-refresh |
 | `pullSearchHeight` | `number` | Reserve space above content for `PullSearch` |
 | `ref` | `RefObject<RNFlatList>` | Forward ref to the underlying list |
+| `renderFilters` | `ReactNode` | Rendered below `ListHeaderComponent`, above list items |
 
 Performance props are user-overridable with sensible defaults:
 
@@ -165,20 +183,41 @@ import { CustomList } from '@rific/scroll-view'
 
 | Prop | Type | Description |
 |------|------|-------------|
+| `chipProps` | `ChipProps` | Customize the scroll-to-top chip (label, style, etc.) |
 | `component` | `ComponentType<P>` | The list component to render |
-| `renderFilters` | `ReactNode` | Rendered below `ListHeaderComponent`, above list items |
 | `footerFixed` | `boolean` | Pin footer; overrides provider |
-| `headerFixed` | `boolean` | Pin header; overrides provider |
 | `gesture` | `GestureType` | Compose with an external RNGH gesture |
+| `headerFixed` | `boolean` | Pin header; overrides provider |
 | `keyboardAware` | `boolean` | Add keyboard height to bottom content inset |
 | `onRefresh` | `() => Promise<void> \| void` | Enables pull-to-refresh |
 | `pullSearchHeight` | `number` | Reserve space above content for `PullSearch` |
+| `renderFilters` | `ReactNode` | Rendered below `ListHeaderComponent`, above list items |
 | `scrollRef` | `RefObject<{ scrollToOffset }>` | Forward ref to the underlying list |
 
 The underlying component receives `contentInset`, `contentOffset`, `onScroll`, `refreshControl`, and `scrollEventThrottle` — props it must support for the library to function.
 
 ---
 
+### `ChipProps`
+
+Passed via `chipProps` on any scroll component to customise the floating scroll-to-top chip. Accepts all `Chip` props from `@rific/auto-paper` except `compact`, `icon`, and `onPress` (which are managed by the library), plus:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `label` | `ReactNode` | Override the default label ("Top" / "Start") |
+| `style` | `ViewStyle` | Merged with the chip's default style |
+
+```tsx
+<FlatList
+  chipProps={{ label: 'Back to top', style: { opacity: 0.9 } }}
+  data={items}
+  renderItem={renderItem}
+  keyExtractor={(item) => item.id}
+/>
+```
+
+---
+
 ### `PullSearch`
 
 A search bar that lives above the list content and is revealed by pulling down. Use alongside `pullSearchHeight` on the scroll component.

package/dist/index.d.mts

@@ -1,13 +1,18 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, RefObject } from 'react';
+import { ReactNode, ComponentType, RefObject } from 'react';
 import { NativeSyntheticEvent, NativeScrollEvent, StyleProp, ViewStyle, FlatListProps as FlatListProps$1, FlatList as FlatList$1, ScrollViewProps as ScrollViewProps$1, ScrollView as ScrollView$1, SectionListProps as SectionListProps$1, SectionList as SectionList$1 } from 'react-native';
 import { GestureType } from 'react-native-gesture-handler';
+import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
 import * as redux from 'redux';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { SharedValue } from 'react-native-reanimated';
 
+type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress'> & {
+    label?: ReactNode;
+};
+
 type ScrollToOffsetRef = {
     scrollToOffset: (params: {
         animated?: boolean;
@@ -15,12 +20,15 @@ type ScrollToOffsetRef = {
     }) => void;
 };
 type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset' | 'onScroll' | 'refreshControl' | 'scrollEventThrottle'> & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     component: ComponentType<P>;
     renderFilters?: ReactNode;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onRefresh?: () => Promise<void> | void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -29,15 +37,18 @@ type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset
     scrollRef?: RefObject<ScrollToOffsetRef | null>;
     style?: StyleProp<ViewStyle>;
 };
-declare const CustomListInner: <P extends object>({ component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
+declare const CustomListInner: <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
 declare const CustomList: typeof CustomListInner;
 
 type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     renderFilters?: ReactNode;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onRefresh?: () => Promise<void> | void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -45,7 +56,7 @@ type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
     pullSearchHeight?: number;
     ref?: RefObject<FlatList$1 | null>;
 };
-declare const FlatListInner: <T>({ contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
+declare const FlatListInner: <T>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
 declare const FlatList: typeof FlatListInner;
 
 type PullSearchHandle = {
@@ -89,10 +100,13 @@ declare const scrollViewActions: _reduxjs_toolkit.CaseReducerActions<{
 declare const scrollViewReducer: redux.Reducer<ScrollViewSettings>;
 
 type ScrollViewProps = ScrollViewProps$1 & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onRefresh?: () => void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -100,7 +114,7 @@ type ScrollViewProps = ScrollViewProps$1 & {
     ref?: RefObject<ScrollView$1 | null>;
     refreshing?: boolean;
 };
-declare const ScrollViewInner: ({ children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => react.JSX.Element;
+declare const ScrollViewInner: ({ chipProps, chipThreshold, children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => react.JSX.Element;
 declare const ScrollView: typeof ScrollViewInner;
 
 type ScrollViewContextType = {
@@ -167,20 +181,23 @@ declare const ScrollViewProvider: ({ blur, children, fixed, footerFixed, headerF
 type ScrollViewSettingsProviderProps = {
     children: ReactNode;
     onChange?: (settings: ScrollViewSettings) => void;
-    value?: Partial<ScrollViewSettings>;
+    initialValue?: Partial<ScrollViewSettings>;
 };
-declare const ScrollViewSettingsProvider: ({ children, onChange, value }: ScrollViewSettingsProviderProps) => react.JSX.Element;
+declare const ScrollViewSettingsProvider: ({ children, onChange, initialValue }: ScrollViewSettingsProviderProps) => react.JSX.Element;
 
 type SectionListProps<ItemT, SectionT extends {
     data: ReadonlyArray<ItemT>;
 } = {
     data: ReadonlyArray<ItemT>;
 }> = Omit<SectionListProps$1<ItemT, SectionT>, 'horizontal'> & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     renderFilters?: ReactNode;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -191,7 +208,7 @@ declare const SectionListInner: <ItemT, SectionT extends {
     data: ReadonlyArray<ItemT>;
 } = {
     data: ReadonlyArray<ItemT>;
-}>({ contentContainerStyle: externalContentContainerStyle, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize, ...props }: SectionListProps<ItemT, SectionT>) => react.JSX.Element;
+}>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize, ...props }: SectionListProps<ItemT, SectionT>) => react.JSX.Element;
 declare const SectionList: typeof SectionListInner;
 
 declare const useKeyboardInset: () => number;
@@ -207,4 +224,4 @@ declare const useScrollView: () => {
 
 declare const useScrollViewSettings: () => ScrollViewSettingsContextType;
 
-export { CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewSettings };
+export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewSettings };

package/dist/index.d.ts

@@ -1,13 +1,18 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, RefObject } from 'react';
+import { ReactNode, ComponentType, RefObject } from 'react';
 import { NativeSyntheticEvent, NativeScrollEvent, StyleProp, ViewStyle, FlatListProps as FlatListProps$1, FlatList as FlatList$1, ScrollViewProps as ScrollViewProps$1, ScrollView as ScrollView$1, SectionListProps as SectionListProps$1, SectionList as SectionList$1 } from 'react-native';
 import { GestureType } from 'react-native-gesture-handler';
+import { ChipProps as ChipProps$1 } from '@rific/auto-paper';
 import * as redux from 'redux';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as react_native_reanimated from 'react-native-reanimated';
 import { SharedValue } from 'react-native-reanimated';
 
+type ChipProps = Omit<ChipProps$1, 'compact' | 'icon' | 'onPress'> & {
+    label?: ReactNode;
+};
+
 type ScrollToOffsetRef = {
     scrollToOffset: (params: {
         animated?: boolean;
@@ -15,12 +20,15 @@ type ScrollToOffsetRef = {
     }) => void;
 };
 type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset' | 'onScroll' | 'refreshControl' | 'scrollEventThrottle'> & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     component: ComponentType<P>;
     renderFilters?: ReactNode;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onRefresh?: () => Promise<void> | void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -29,15 +37,18 @@ type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset
     scrollRef?: RefObject<ScrollToOffsetRef | null>;
     style?: StyleProp<ViewStyle>;
 };
-declare const CustomListInner: <P extends object>({ component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
+declare const CustomListInner: <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => react.JSX.Element;
 declare const CustomList: typeof CustomListInner;
 
 type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     renderFilters?: ReactNode;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onRefresh?: () => Promise<void> | void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -45,7 +56,7 @@ type FlatListProps<T> = Omit<FlatListProps$1<T>, 'onRefresh' | 'refreshing'> & {
     pullSearchHeight?: number;
     ref?: RefObject<FlatList$1 | null>;
 };
-declare const FlatListInner: <T>({ contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
+declare const FlatListInner: <T>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize, ...props }: FlatListProps<T>) => react.JSX.Element;
 declare const FlatList: typeof FlatListInner;
 
 type PullSearchHandle = {
@@ -89,10 +100,13 @@ declare const scrollViewActions: _reduxjs_toolkit.CaseReducerActions<{
 declare const scrollViewReducer: redux.Reducer<ScrollViewSettings>;
 
 type ScrollViewProps = ScrollViewProps$1 & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onRefresh?: () => void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -100,7 +114,7 @@ type ScrollViewProps = ScrollViewProps$1 & {
     ref?: RefObject<ScrollView$1 | null>;
     refreshing?: boolean;
 };
-declare const ScrollViewInner: ({ children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => react.JSX.Element;
+declare const ScrollViewInner: ({ chipProps, chipThreshold, children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => react.JSX.Element;
 declare const ScrollView: typeof ScrollViewInner;
 
 type ScrollViewContextType = {
@@ -167,20 +181,23 @@ declare const ScrollViewProvider: ({ blur, children, fixed, footerFixed, headerF
 type ScrollViewSettingsProviderProps = {
     children: ReactNode;
     onChange?: (settings: ScrollViewSettings) => void;
-    value?: Partial<ScrollViewSettings>;
+    initialValue?: Partial<ScrollViewSettings>;
 };
-declare const ScrollViewSettingsProvider: ({ children, onChange, value }: ScrollViewSettingsProviderProps) => react.JSX.Element;
+declare const ScrollViewSettingsProvider: ({ children, onChange, initialValue }: ScrollViewSettingsProviderProps) => react.JSX.Element;
 
 type SectionListProps<ItemT, SectionT extends {
     data: ReadonlyArray<ItemT>;
 } = {
     data: ReadonlyArray<ItemT>;
 }> = Omit<SectionListProps$1<ItemT, SectionT>, 'horizontal'> & {
+    chipProps?: ChipProps;
+    chipThreshold?: number;
     renderFilters?: ReactNode;
     footerFixed?: boolean;
     gesture?: GestureType;
     headerFixed?: boolean;
     keyboardAware?: boolean;
+    onChipPress?: () => void;
     onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void;
@@ -191,7 +208,7 @@ declare const SectionListInner: <ItemT, SectionT extends {
     data: ReadonlyArray<ItemT>;
 } = {
     data: ReadonlyArray<ItemT>;
-}>({ contentContainerStyle: externalContentContainerStyle, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize, ...props }: SectionListProps<ItemT, SectionT>) => react.JSX.Element;
+}>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender, maxToRenderPerBatch, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize, ...props }: SectionListProps<ItemT, SectionT>) => react.JSX.Element;
 declare const SectionList: typeof SectionListInner;
 
 declare const useKeyboardInset: () => number;
@@ -207,4 +224,4 @@ declare const useScrollView: () => {
 
 declare const useScrollViewSettings: () => ScrollViewSettingsContextType;
 
-export { CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewSettings };
+export { type ChipProps, CustomList, type CustomListProps, FlatList, type FlatListProps, PullSearch, type PullSearchHandle, type PullSearchProps, ScrollView, ScrollViewContext, type ScrollViewContextType, ScrollViewFooter, type ScrollViewFooterProps, ScrollViewHeader, type ScrollViewHeaderProps, type ScrollViewProps, ScrollViewProvider, type ScrollViewProviderProps, type ScrollViewSettings, ScrollViewSettingsContext, type ScrollViewSettingsContextType, ScrollViewSettingsProvider, type ScrollViewSettingsProviderProps, SectionList, type SectionListProps, defaultScrollViewSettings, scrollViewActions, scrollViewReducer, useKeyboardInset, useScrollView, useScrollViewSettings };

package/dist/index.js

@@ -63,11 +63,18 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var RefreshControl = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.RefreshControl, { refreshing: false, ...props });
 
 // src/internal/ScrollViewChip.tsx
+var import_auto_paper = require("@rific/auto-paper");
 var import_react_native2 = require("react-native");
-var import_react_native_paper = require("react-native-paper");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var ScrollViewChip = ({ isHorizontal, onPress, style }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated.default.View, { style: [styles.chip, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Chip, { compact: true, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress, style: styles.chipInner, children: isHorizontal ? "Start" : "Top" }) });
+var ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }) => {
+  const { label, style: chipStyle, ...restChipProps } = chipProps ?? {};
+  const handlePress = onChipPress ? () => {
+    onPress();
+    onChipPress();
+  } : onPress;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_reanimated.default.View, { style: [styles.chip, style], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_auto_paper.Chip, { compact: true, ...restChipProps, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
+};
 var styles = import_react_native2.StyleSheet.create({
   chip: { alignItems: "center", left: 0, position: "absolute", right: 0, zIndex: 3 },
   chipInner: { elevation: 2, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 }
@@ -108,7 +115,7 @@ var ScrollViewContext = (0, import_react.createContext)({
 });
 
 // src/internal/useScrollHandler.ts
-function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }) {
+function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }) {
   const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = (0, import_react2.useContext)(ScrollViewContext);
   const snapUpAccum = (0, import_react_native_reanimated2.useSharedValue)(0);
   const fromBottomBounce = (0, import_react_native_reanimated2.useSharedValue)(false);
@@ -120,12 +127,12 @@ function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal,
         "worklet";
         if (isHorizontal) {
           scrollPosition.value = x;
-          chipHidden.value = x < 100 ? 1 : 0;
+          chipHidden.value = x < chipThreshold ? 1 : 0;
           return;
         }
         const delta = y - scrollPosition.value;
         scrollPosition.value = y;
-        chipHidden.value = y < 100 ? 1 : 0;
+        chipHidden.value = y < chipThreshold ? 1 : 0;
         const maxScroll = contentHeight - layoutHeight;
         if (maxScroll > 0 && y >= maxScroll) {
           fromBottomBounce.value = true;
@@ -191,7 +198,7 @@ function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal,
         snapUpAccum.value = 0;
       }
     },
-    [headerFixed, footerFixed, isHorizontal, onPullSearchZoneEnter]
+    [headerFixed, footerFixed, isHorizontal, chipThreshold, onPullSearchZoneEnter]
   );
 }
 
@@ -341,7 +348,7 @@ function useScrollInit({ listHeaderComponent, onMomentumScrollEnd: externalMomen
 
 // src/CustomList.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var CustomListInner = ({ component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }) => {
+var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }) => {
   const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
   const scrollViewInternal = (0, import_react6.useRef)(null);
@@ -384,7 +391,7 @@ var CustomListInner = ({ component: List, renderFilters, footerFixed: footerFixe
     if (!pullSearchHeight) return;
     scrollViewInternal.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const onScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const onScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = (0, import_react6.useCallback)(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollViewInternal.current?.scrollToOffset({ offset, animated: true });
@@ -397,7 +404,7 @@ var CustomListInner = ({ component: List, renderFilters, footerFixed: footerFixe
   const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: containerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TypedList, { ...restProps, contentContainerStyle, contentInset, contentOffset, ListHeaderComponent: activeListHeader, onMomentumScrollEnd: handleMomentumScrollEnd, onScroll, onScrollBeginDrag: handleScrollBeginDrag, onScrollEndDrag: handleScrollEndDrag, ref: handleRef, refreshControl, scrollEventThrottle: 16 }),
     hiddenHeader && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { pointerEvents: "none", style: styles2.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScrollViewChip, { onPress: handleScrollToTop, style: chipStyle })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle })
   ] });
   return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler.GestureDetector, { gesture: detectorGesture, children: content }) : content;
 };
@@ -411,10 +418,10 @@ var import_react_native_gesture_handler2 = require("react-native-gesture-handler
 var import_react_native_reanimated6 = __toESM(require("react-native-reanimated"));
 
 // src/internal/HorizontalDots.tsx
-var import_auto_paper = require("@rific/auto-paper");
+var import_auto_paper2 = require("@rific/auto-paper");
 var import_react7 = require("react");
 var import_react_native5 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
+var import_react_native_paper = require("react-native-paper");
 var import_react_native_reanimated5 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -444,7 +451,7 @@ var HorizontalDots = ({ total }) => {
   const { blur, footerHeightShared, scrollPosition } = (0, import_react7.useContext)(ScrollViewContext);
   const { width } = (0, import_react_native5.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
-  const theme = (0, import_react_native_paper2.useTheme)();
+  const theme = (0, import_react_native_paper.useTheme)();
   const insetsBottom = insets.bottom;
   const activeColor = theme.colors.primary;
   const inactiveColor = theme.colors.outlineVariant;
@@ -458,7 +465,7 @@ var HorizontalDots = ({ total }) => {
     return { transform: [{ translateX: -offset }] };
   });
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated5.default.View, { pointerEvents: "none", style: [styles3.pillContainer, pillContainerStyle], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: styles3.pill, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper.BlurView, { blur, style: import_react_native5.StyleSheet.absoluteFill }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_auto_paper2.BlurView, { blur, style: import_react_native5.StyleSheet.absoluteFill }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { style: styles3.dotsClip, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_reanimated5.default.View, { style: [styles3.dotsRow, rowStyle], children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dot, { activeColor, index: i, inactiveColor, pageWidth: width, scrollPosition }, i)) }) })
   ] }) });
 };
@@ -479,7 +486,7 @@ var styles3 = import_react_native5.StyleSheet.create({
 
 // src/FlatList.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var FlatListInner = ({ contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
+var FlatListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = (0, import_react8.useRef)(null);
   const isHorizontal = horizontal === true;
   const showDots = isHorizontal && pagingEnabled === true && (data?.length ?? 0) > 1;
@@ -516,7 +523,7 @@ var FlatListInner = ({ contentContainerStyle: externalContentContainerStyle, dat
     if (!pullSearchHeight) return;
     scrollView.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = (0, import_react8.useCallback)(() => {
     if (isHorizontal) {
       scrollView.current?.scrollToOffset({ offset: 0, animated: true });
@@ -567,7 +574,7 @@ var FlatListInner = ({ contentContainerStyle: externalContentContainerStyle, dat
       }
     ),
     hiddenHeader && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native6.View, { pointerEvents: "none", style: styles4.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollViewChip, { isHorizontal, onPress: handleScrollToTop, style: chipStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ScrollViewChip, { chipProps, isHorizontal, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
     showDots && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HorizontalDots, { total: data?.length ?? 0 })
   ] });
   return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_gesture_handler2.GestureDetector, { gesture: detectorGesture, children: content }) : content;
@@ -578,12 +585,12 @@ var FlatList = (0, import_react8.memo)(FlatListInner);
 // src/PullSearch.tsx
 var import_react9 = require("react");
 var import_react_native7 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
+var import_react_native_paper2 = require("react-native-paper");
 var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var PullSearch = (0, import_react9.forwardRef)(function PullSearch2({ debounce, onChangeText, onHeightChange, placeholder, value: propValue }, ref) {
   const { headerHeight, scrollPosition } = (0, import_react9.useContext)(ScrollViewContext);
-  const theme = (0, import_react_native_paper3.useTheme)();
+  const theme = (0, import_react_native_paper2.useTheme)();
   const inputRef = (0, import_react9.useRef)(null);
   const [barHeight, setBarHeight] = (0, import_react9.useState)(0);
   const [value, setValue] = (0, import_react9.useState)(propValue ?? "");
@@ -637,7 +644,7 @@ var PullSearch = (0, import_react9.forwardRef)(function PullSearch2({ debounce,
     const hideY = -headerHeight + barHeight;
     return { opacity: (0, import_react_native_reanimated7.interpolate)(scrollPosition.value, [showY, hideY], [1, 0], import_react_native_reanimated7.Extrapolation.CLAMP) };
   }, [barHeight, headerHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated7.default.View, { onLayout: handleLayout, style: [styles5.container, animatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper3.Searchbar, { autoCorrect: false, onChangeText: (text) => setValue((text || "").trimStart()), onClearIconPress: handleClear, placeholder, placeholderTextColor: theme.colors.onSurfaceVariant, ref: inputRef, spellCheck: false, style: styles5.input, value }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_reanimated7.default.View, { onLayout: handleLayout, style: [styles5.container, animatedStyle], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper2.Searchbar, { autoCorrect: false, onChangeText: (text) => setValue((text || "").trimStart()), onClearIconPress: handleClear, placeholder, placeholderTextColor: theme.colors.onSurfaceVariant, ref: inputRef, spellCheck: false, style: styles5.input, value }) });
 });
 var styles5 = import_react_native7.StyleSheet.create({
   container: { paddingVertical: 8 },
@@ -2213,7 +2220,7 @@ var import_react_native8 = require("react-native");
 var import_react_native_gesture_handler3 = require("react-native-gesture-handler");
 var import_react_native_reanimated8 = __toESM(require("react-native-reanimated"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }) => {
+var ScrollViewInner = ({ chipProps, chipThreshold, children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }) => {
   const scrollView = (0, import_react11.useRef)(null);
   const isHorizontal = horizontal === true;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style });
@@ -2231,7 +2238,7 @@ var ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, header
     if (!pullSearchHeight) return;
     scrollTo(-contentInset.top + pullSearchHeight, true);
   }, [contentInset.top, pullSearchHeight, scrollTo]);
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = (0, import_react11.useCallback)(() => {
     if (isHorizontal) {
       scrollView.current?.scrollTo({ x: 0, animated: true });
@@ -2264,14 +2271,14 @@ var ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, header
         children
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollViewChip, { isHorizontal, onPress: handleScrollToTop, style: chipStyle })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ScrollViewChip, { chipProps, isHorizontal, onChipPress, onPress: handleScrollToTop, style: chipStyle })
   ] });
   return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_gesture_handler3.GestureDetector, { gesture: detectorGesture, children: content }) : content;
 };
 var ScrollView = (0, import_react11.memo)(ScrollViewInner);
 
 // src/ScrollViewFooter.tsx
-var import_auto_paper2 = require("@rific/auto-paper");
+var import_auto_paper3 = require("@rific/auto-paper");
 var import_react12 = require("react");
 var import_react_native9 = require("react-native");
 var import_react_native_reanimated9 = __toESM(require("react-native-reanimated"));
@@ -2301,7 +2308,7 @@ var ScrollViewFooter = ({ children, style }) => {
     return { transform: [{ translateY: Math.min(effective, footerHeight) }] };
   }, [footerHeight, footerFixed]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_reanimated9.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, footerStyle], children: [
-    footerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper2.BlurView, { blur, style: import_react_native9.StyleSheet.absoluteFill }),
+    footerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_auto_paper3.BlurView, { blur, style: import_react_native9.StyleSheet.absoluteFill }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { style: [styles6.row, { paddingBottom: insets.bottom }, style], children })
   ] });
 };
@@ -2311,20 +2318,20 @@ var styles6 = import_react_native9.StyleSheet.create({
 });
 
 // src/ScrollViewHeader.tsx
-var import_auto_paper3 = require("@rific/auto-paper");
+var import_auto_paper4 = require("@rific/auto-paper");
 var import_react13 = require("react");
 var import_react_native10 = require("react-native");
-var import_react_native_paper4 = require("react-native-paper");
+var import_react_native_paper3 = require("react-native-paper");
 var import_react_native_reanimated10 = __toESM(require("react-native-reanimated"));
 var import_react_native_safe_area_context4 = require("react-native-safe-area-context");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [import_react_native10.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper3.BlurView, { blur: true, style: import_react_native10.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [import_react_native10.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Surface, { style: import_react_native10.StyleSheet.absoluteFill, elevation: 1, children: null }) });
+var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [import_react_native10.StyleSheet.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur: true, style: import_react_native10.StyleSheet.absoluteFill }) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [import_react_native10.StyleSheet.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Surface, { style: import_react_native10.StyleSheet.absoluteFill, elevation: 1, children: null }) });
 var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }) => {
   const { blur, headerHeight, headerFixed, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = (0, import_react13.useContext)(ScrollViewContext);
   const { settings } = (0, import_react13.useContext)(ScrollViewSettingsContext);
   const effectiveBackActionFixed = backActionFixed ?? settings.backActionFixed;
   const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
-  const theme = (0, import_react_native_paper4.useTheme)();
+  const theme = (0, import_react_native_paper3.useTheme)();
   const top = topInset ? insets.top : 0;
   const handleLayout = ({
     nativeEvent: {
@@ -2359,7 +2366,7 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFi
   const leadingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", left: actionMargin, position: "absolute", top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   const trailingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", position: "absolute", right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated10.default.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper3.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight }] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated10.default.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_auto_paper4.BlurView, { blur, style: [styles7.blurInner, { height: headerHeight }] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated10.default.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === 0 ? styles7.headerInit : styles7.header, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [{ paddingTop: top }, style], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: styles7.side }),
@@ -2372,13 +2379,13 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionFi
       ] }) }),
       !blur && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native10.View, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated10.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_reanimated10.default.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
     backAction && (effectiveBackActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated10.default.View, { style: leadingStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native_reanimated10.default.View, { style: [leadingStyle, translateStyle], children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper4.Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper3.Appbar.BackAction, { onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle })
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native10.View, { style: trailingStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ActionBg, { blur, style: actionStyle }),
@@ -2406,14 +2413,14 @@ var styles7 = import_react_native10.StyleSheet.create({
 });
 
 // src/ScrollViewProvider.tsx
-var import_auto_paper4 = require("@rific/auto-paper");
+var import_auto_paper5 = require("@rific/auto-paper");
 var import_react14 = require("react");
 var import_react_native11 = require("react-native");
 var import_react_native_reanimated11 = require("react-native-reanimated");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 60 }) => {
   const { settings } = (0, import_react14.useContext)(ScrollViewSettingsContext);
-  const effectiveBlur = (0, import_auto_paper4.useBlur)(blur);
+  const effectiveBlur = (0, import_auto_paper5.useBlur)(blur);
   const effectiveSnapBack = snapBack ?? settings.snapBack;
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
@@ -2457,10 +2464,10 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFi
 // src/ScrollViewSettingsProvider.tsx
 var import_react15 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var ScrollViewSettingsProvider = ({ children, onChange, value }) => {
+var ScrollViewSettingsProvider = ({ children, onChange, initialValue }) => {
   const [settings, setSettings] = (0, import_react15.useState)(() => ({
     ...defaultScrollViewSettings,
-    ...value
+    ...initialValue
   }));
   const set2 = (0, import_react15.useCallback)(
     (patch) => {
@@ -2594,7 +2601,7 @@ function useStickyHeaders(headerFixed, enabled) {
 // src/SectionList.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var AnimatedSectionList = (0, import_react_native_reanimated13.createAnimatedComponent)(import_react_native12.SectionList);
-var SectionListInner = ({ contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
+var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = (0, import_react17.useRef)(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
@@ -2669,7 +2676,7 @@ var SectionListInner = ({ contentContainerStyle: externalContentContainerStyle,
     if (!pullSearchHeight) return;
     scrollTo(-contentInset.top + pullSearchHeight, true);
   }, [contentInset.top, pullSearchHeight, scrollTo]);
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = (0, import_react17.useCallback)(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated: true });
@@ -2716,7 +2723,7 @@ var SectionListInner = ({ contentContainerStyle: externalContentContainerStyle,
       headerHeight > 0 ? 1 : 0
     ),
     hiddenHeader && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native12.View, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollViewChip, { onPress: handleScrollToTop, style: chipStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
     usesCustomSticky && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated13.default.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_reanimated13.default.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
   ] });
   return detectorGesture ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_gesture_handler4.GestureDetector, { gesture: detectorGesture, children: content }) : content;

package/dist/index.mjs

@@ -13,11 +13,18 @@ import { jsx } from "react/jsx-runtime";
 var RefreshControl = (props) => /* @__PURE__ */ jsx(RNRefreshControl, { refreshing: false, ...props });
 
 // src/internal/ScrollViewChip.tsx
+import { Chip } from "@rific/auto-paper";
 import { StyleSheet } from "react-native";
-import { Chip } from "react-native-paper";
 import Animated from "react-native-reanimated";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ScrollViewChip = ({ isHorizontal, onPress, style }) => /* @__PURE__ */ jsx2(Animated.View, { style: [styles.chip, style], children: /* @__PURE__ */ jsx2(Chip, { compact: true, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress, style: styles.chipInner, children: isHorizontal ? "Start" : "Top" }) });
+var ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }) => {
+  const { label, style: chipStyle, ...restChipProps } = chipProps ?? {};
+  const handlePress = onChipPress ? () => {
+    onPress();
+    onChipPress();
+  } : onPress;
+  return /* @__PURE__ */ jsx2(Animated.View, { style: [styles.chip, style], children: /* @__PURE__ */ jsx2(Chip, { compact: true, ...restChipProps, icon: isHorizontal ? "chevron-left" : "chevron-up", onPress: handlePress, style: [styles.chipInner, chipStyle], children: label ?? (isHorizontal ? "Start" : "Top") }) });
+};
 var styles = StyleSheet.create({
   chip: { alignItems: "center", left: 0, position: "absolute", right: 0, zIndex: 3 },
   chipInner: { elevation: 2, shadowColor: "#000", shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.15, shadowRadius: 2 }
@@ -58,7 +65,7 @@ var ScrollViewContext = createContext({
 });
 
 // src/internal/useScrollHandler.ts
-function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }) {
+function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }) {
   const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext(ScrollViewContext);
   const snapUpAccum = useSharedValue(0);
   const fromBottomBounce = useSharedValue(false);
@@ -70,12 +77,12 @@ function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal,
         "worklet";
         if (isHorizontal) {
           scrollPosition.value = x;
-          chipHidden.value = x < 100 ? 1 : 0;
+          chipHidden.value = x < chipThreshold ? 1 : 0;
           return;
         }
         const delta = y - scrollPosition.value;
         scrollPosition.value = y;
-        chipHidden.value = y < 100 ? 1 : 0;
+        chipHidden.value = y < chipThreshold ? 1 : 0;
         const maxScroll = contentHeight - layoutHeight;
         if (maxScroll > 0 && y >= maxScroll) {
           fromBottomBounce.value = true;
@@ -141,7 +148,7 @@ function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal,
         snapUpAccum.value = 0;
       }
     },
-    [headerFixed, footerFixed, isHorizontal, onPullSearchZoneEnter]
+    [headerFixed, footerFixed, isHorizontal, chipThreshold, onPullSearchZoneEnter]
   );
 }
 
@@ -291,7 +298,7 @@ function useScrollInit({ listHeaderComponent, onMomentumScrollEnd: externalMomen
 
 // src/CustomList.tsx
 import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
-var CustomListInner = ({ component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }) => {
+var CustomListInner = ({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }) => {
   const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
   const scrollViewInternal = useRef2(null);
@@ -334,7 +341,7 @@ var CustomListInner = ({ component: List, renderFilters, footerFixed: footerFixe
     if (!pullSearchHeight) return;
     scrollViewInternal.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const onScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const onScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = useCallback2(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollViewInternal.current?.scrollToOffset({ offset, animated: true });
@@ -347,7 +354,7 @@ var CustomListInner = ({ component: List, renderFilters, footerFixed: footerFixe
   const content = /* @__PURE__ */ jsxs(View, { style: containerStyle, children: [
     /* @__PURE__ */ jsx3(TypedList, { ...restProps, contentContainerStyle, contentInset, contentOffset, ListHeaderComponent: activeListHeader, onMomentumScrollEnd: handleMomentumScrollEnd, onScroll, onScrollBeginDrag: handleScrollBeginDrag, onScrollEndDrag: handleScrollEndDrag, ref: handleRef, refreshControl, scrollEventThrottle: 16 }),
     hiddenHeader && /* @__PURE__ */ jsx3(View, { pointerEvents: "none", style: styles2.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ jsx3(ScrollViewChip, { onPress: handleScrollToTop, style: chipStyle })
+    /* @__PURE__ */ jsx3(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle })
   ] });
   return detectorGesture ? /* @__PURE__ */ jsx3(GestureDetector, { gesture: detectorGesture, children: content }) : content;
 };
@@ -429,7 +436,7 @@ var styles3 = StyleSheet3.create({
 
 // src/FlatList.tsx
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var FlatListInner = ({ contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
+var FlatListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = useRef3(null);
   const isHorizontal = horizontal === true;
   const showDots = isHorizontal && pagingEnabled === true && (data?.length ?? 0) > 1;
@@ -466,7 +473,7 @@ var FlatListInner = ({ contentContainerStyle: externalContentContainerStyle, dat
     if (!pullSearchHeight) return;
     scrollView.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = useCallback3(() => {
     if (isHorizontal) {
       scrollView.current?.scrollToOffset({ offset: 0, animated: true });
@@ -517,7 +524,7 @@ var FlatListInner = ({ contentContainerStyle: externalContentContainerStyle, dat
       }
     ),
     hiddenHeader && /* @__PURE__ */ jsx5(View3, { pointerEvents: "none", style: styles4.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ jsx5(ScrollViewChip, { isHorizontal, onPress: handleScrollToTop, style: chipStyle }),
+    /* @__PURE__ */ jsx5(ScrollViewChip, { chipProps, isHorizontal, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
     showDots && /* @__PURE__ */ jsx5(HorizontalDots, { total: data?.length ?? 0 })
   ] });
   return detectorGesture ? /* @__PURE__ */ jsx5(GestureDetector2, { gesture: detectorGesture, children: content }) : content;
@@ -2163,7 +2170,7 @@ import { View as View4 } from "react-native";
 import { Gesture as Gesture3, GestureDetector as GestureDetector3 } from "react-native-gesture-handler";
 import Animated5 from "react-native-reanimated";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }) => {
+var ScrollViewInner = ({ chipProps, chipThreshold, children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }) => {
   const scrollView = useRef5(null);
   const isHorizontal = horizontal === true;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, isHorizontal, keyboardAware, pullSearchHeight, style });
@@ -2181,7 +2188,7 @@ var ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, header
     if (!pullSearchHeight) return;
     scrollTo(-contentInset.top + pullSearchHeight, true);
   }, [contentInset.top, pullSearchHeight, scrollTo]);
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = useCallback5(() => {
     if (isHorizontal) {
       scrollView.current?.scrollTo({ x: 0, animated: true });
@@ -2214,7 +2221,7 @@ var ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, header
         children
       }
     ),
-    /* @__PURE__ */ jsx7(ScrollViewChip, { isHorizontal, onPress: handleScrollToTop, style: chipStyle })
+    /* @__PURE__ */ jsx7(ScrollViewChip, { chipProps, isHorizontal, onChipPress, onPress: handleScrollToTop, style: chipStyle })
   ] });
   return detectorGesture ? /* @__PURE__ */ jsx7(GestureDetector3, { gesture: detectorGesture, children: content }) : content;
 };
@@ -2407,10 +2414,10 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerFixed, headerFi
 // src/ScrollViewSettingsProvider.tsx
 import { useCallback as useCallback7, useMemo as useMemo6, useState as useState5 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var ScrollViewSettingsProvider = ({ children, onChange, value }) => {
+var ScrollViewSettingsProvider = ({ children, onChange, initialValue }) => {
   const [settings, setSettings] = useState5(() => ({
     ...defaultScrollViewSettings,
-    ...value
+    ...initialValue
   }));
   const set2 = useCallback7(
     (patch) => {
@@ -2544,7 +2551,7 @@ function useStickyHeaders(headerFixed, enabled) {
 // src/SectionList.tsx
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var AnimatedSectionList = createAnimatedComponent(RNSectionList);
-var SectionListInner = ({ contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
+var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
   const scrollView = useRef7(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, keyboardAware, pullSearchHeight, style });
@@ -2619,7 +2626,7 @@ var SectionListInner = ({ contentContainerStyle: externalContentContainerStyle,
     if (!pullSearchHeight) return;
     scrollTo(-contentInset.top + pullSearchHeight, true);
   }, [contentInset.top, pullSearchHeight, scrollTo]);
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : void 0 });
   const handleScrollToTop = useCallback9(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated: true });
@@ -2666,7 +2673,7 @@ var SectionListInner = ({ contentContainerStyle: externalContentContainerStyle,
       headerHeight > 0 ? 1 : 0
     ),
     hiddenHeader && /* @__PURE__ */ jsx12(View7, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ jsx12(ScrollViewChip, { onPress: handleScrollToTop, style: chipStyle }),
+    /* @__PURE__ */ jsx12(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
     usesCustomSticky && /* @__PURE__ */ jsx12(Animated8.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ jsx12(Animated8.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
   ] });
   return detectorGesture ? /* @__PURE__ */ jsx12(GestureDetector4, { gesture: detectorGesture, children: content }) : content;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",

package/src/CustomList.tsx

@@ -3,7 +3,7 @@ import { Dimensions, type NativeScrollEvent, type NativeSyntheticEvent, type Sty
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler'
 
 import { RefreshControl } from './internal/RefreshControl'
-import { ScrollViewChip } from './internal/ScrollViewChip'
+import { type ChipProps, ScrollViewChip } from './internal/ScrollViewChip'
 import { useScrollHandler } from './internal/useScrollHandler'
 import { useScrollList } from './internal/useScrollList'
 import { useScrollInit } from './useScrollInit'
@@ -11,12 +11,15 @@ import { useScrollInit } from './useScrollInit'
 type ScrollToOffsetRef = { scrollToOffset: (params: { animated?: boolean; offset: number }) => void }
 
 export type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'contentOffset' | 'onScroll' | 'refreshControl' | 'scrollEventThrottle'> & {
+  chipProps?: ChipProps
+  chipThreshold?: number
   component: ComponentType<P>
   renderFilters?: ReactNode
   footerFixed?: boolean
   gesture?: GestureType
   headerFixed?: boolean
   keyboardAware?: boolean
+  onChipPress?: () => void
   onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   onRefresh?: () => Promise<void> | void
   onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
@@ -26,7 +29,7 @@ export type CustomListProps<P extends object> = Omit<P, 'contentInset' | 'conten
   style?: StyleProp<ViewStyle>
 }
 
-const CustomListInner = <P extends object>({ component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => {
+const CustomListInner = <P extends object>({ chipProps, chipThreshold, component: List, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, scrollRef, style, ...props }: CustomListProps<P>) => {
   // Intercept ListHeaderComponent so useScrollInit can apply the same 2-phase measurement as FlatList.
   const { ListHeaderComponent: listHeaderComponent, contentContainerStyle: externalContentContainerStyle, ...restProps } = props as Record<string, unknown>
 
@@ -81,7 +84,7 @@ const CustomListInner = <P extends object>({ component: List, renderFilters, foo
     scrollViewInternal.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true })
   }, [contentInset.top, pullSearchHeight])
 
-  const onScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+  const onScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
 
   const handleScrollToTop = useCallback(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
@@ -116,7 +119,7 @@ const CustomListInner = <P extends object>({ component: List, renderFilters, foo
           {hiddenHeader}
         </View>
       )}
-      <ScrollViewChip onPress={handleScrollToTop} style={chipStyle} />
+      <ScrollViewChip chipProps={chipProps} onChipPress={onChipPress} onPress={handleScrollToTop} style={chipStyle} />
     </View>
   )
   return detectorGesture ? <GestureDetector gesture={detectorGesture}>{content}</GestureDetector> : content

package/src/FlatList.tsx

@@ -5,17 +5,20 @@ import Animated from 'react-native-reanimated'
 
 import { HorizontalDots } from './internal/HorizontalDots'
 import { RefreshControl } from './internal/RefreshControl'
-import { ScrollViewChip } from './internal/ScrollViewChip'
+import { type ChipProps, ScrollViewChip } from './internal/ScrollViewChip'
 import { useScrollHandler } from './internal/useScrollHandler'
 import { useScrollList } from './internal/useScrollList'
 import { useScrollInit } from './useScrollInit'
 
 export type FlatListProps<T> = Omit<RNFlatListProps<T>, 'onRefresh' | 'refreshing'> & {
+  chipProps?: ChipProps
+  chipThreshold?: number
   renderFilters?: ReactNode
   footerFixed?: boolean
   gesture?: GestureType
   headerFixed?: boolean
   keyboardAware?: boolean
+  onChipPress?: () => void
   onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   onRefresh?: () => Promise<void> | void
   onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
@@ -24,7 +27,7 @@ export type FlatListProps<T> = Omit<RNFlatListProps<T>, 'onRefresh' | 'refreshin
   ref?: RefObject<RNFlatList | null>
 }
 
-const FlatListInner = <T,>({ contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }: FlatListProps<T>) => {
+const FlatListInner = <T,>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, data, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pagingEnabled, pullSearchHeight, removeClippedSubviews = false, showsHorizontalScrollIndicator, showsVerticalScrollIndicator, style, onContentSizeChange, ref: externalRef, windowSize = 100, ...props }: FlatListProps<T>) => {
   const scrollView = useRef<RNFlatList>(null)
   const isHorizontal = horizontal === true
   const showDots = isHorizontal && pagingEnabled === true && (data?.length ?? 0) > 1
@@ -70,7 +73,7 @@ const FlatListInner = <T,>({ contentContainerStyle: externalContentContainerStyl
     scrollView.current?.scrollToOffset({ offset: -contentInset.top + pullSearchHeight, animated: true })
   }, [contentInset.top, pullSearchHeight])
 
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
 
   const handleScrollToTop = useCallback(() => {
     if (isHorizontal) {
@@ -127,7 +130,7 @@ const FlatListInner = <T,>({ contentContainerStyle: externalContentContainerStyl
           {hiddenHeader}
         </View>
       )}
-      <ScrollViewChip isHorizontal={isHorizontal} onPress={handleScrollToTop} style={chipStyle} />
+      <ScrollViewChip chipProps={chipProps} isHorizontal={isHorizontal} onChipPress={onChipPress} onPress={handleScrollToTop} style={chipStyle} />
       {showDots && <HorizontalDots total={data?.length ?? 0} />}
     </View>
   )

package/src/ScrollView.tsx

@@ -4,16 +4,19 @@ import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture
 import Animated from 'react-native-reanimated'
 
 import { RefreshControl } from './internal/RefreshControl'
-import { ScrollViewChip } from './internal/ScrollViewChip'
+import { type ChipProps, ScrollViewChip } from './internal/ScrollViewChip'
 import { useScrollHandler } from './internal/useScrollHandler'
 import { useScrollList } from './internal/useScrollList'
 import { useScrollInit } from './useScrollInit'
 
 export type ScrollViewProps = RNScrollViewProps & {
+  chipProps?: ChipProps
+  chipThreshold?: number
   footerFixed?: boolean
   gesture?: GestureType
   headerFixed?: boolean
   keyboardAware?: boolean
+  onChipPress?: () => void
   onRefresh?: () => void
   onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
@@ -22,7 +25,7 @@ export type ScrollViewProps = RNScrollViewProps & {
   refreshing?: boolean
 }
 
-const ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => {
+const ScrollViewInner = ({ chipProps, chipThreshold, children, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, horizontal, keyboardAware, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, style, ...props }: ScrollViewProps) => {
   const scrollView = useRef<RNScrollView>(null)
   const isHorizontal = horizontal === true
 
@@ -45,7 +48,7 @@ const ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, head
     scrollTo(-contentInset.top + pullSearchHeight, true)
   }, [contentInset.top, pullSearchHeight, scrollTo])
 
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
 
   const handleScrollToTop = useCallback(() => {
     if (isHorizontal) {
@@ -80,7 +83,7 @@ const ScrollViewInner = ({ children, footerFixed: footerFixedProp, gesture, head
       >
         {children}
       </Animated.ScrollView>
-      <ScrollViewChip isHorizontal={isHorizontal} onPress={handleScrollToTop} style={chipStyle} />
+      <ScrollViewChip chipProps={chipProps} isHorizontal={isHorizontal} onChipPress={onChipPress} onPress={handleScrollToTop} style={chipStyle} />
     </View>
   )
   return detectorGesture ? <GestureDetector gesture={detectorGesture}>{content}</GestureDetector> : content

package/src/ScrollViewSettingsProvider.tsx

@@ -5,13 +5,13 @@ import { defaultScrollViewSettings, type ScrollViewSettings, ScrollViewSettingsC
 export type ScrollViewSettingsProviderProps = {
   children: ReactNode
   onChange?: (settings: ScrollViewSettings) => void
-  value?: Partial<ScrollViewSettings>
+  initialValue?: Partial<ScrollViewSettings>
 }
 
-export const ScrollViewSettingsProvider = ({ children, onChange, value }: ScrollViewSettingsProviderProps) => {
+export const ScrollViewSettingsProvider = ({ children, onChange, initialValue }: ScrollViewSettingsProviderProps) => {
   const [settings, setSettings] = useState<ScrollViewSettings>(() => ({
     ...defaultScrollViewSettings,
-    ...value
+    ...initialValue
   }))
 
   const set = useCallback(

package/src/SectionList.tsx

@@ -4,7 +4,7 @@ import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture
 import Animated, { createAnimatedComponent } from 'react-native-reanimated'
 
 import { RefreshControl } from './internal/RefreshControl'
-import { ScrollViewChip } from './internal/ScrollViewChip'
+import { type ChipProps, ScrollViewChip } from './internal/ScrollViewChip'
 import { useScrollHandler } from './internal/useScrollHandler'
 import { useScrollList } from './internal/useScrollList'
 import { useStickyHeaders } from './internal/useStickyHeaders'
@@ -13,11 +13,14 @@ import { useScrollInit } from './useScrollInit'
 const AnimatedSectionList = createAnimatedComponent(RNSectionList) as unknown as typeof RNSectionList
 
 export type SectionListProps<ItemT, SectionT extends { data: ReadonlyArray<ItemT> } = { data: ReadonlyArray<ItemT> }> = Omit<RNSectionListProps<ItemT, SectionT>, 'horizontal'> & {
+  chipProps?: ChipProps
+  chipThreshold?: number
   renderFilters?: ReactNode
   footerFixed?: boolean
   gesture?: GestureType
   headerFixed?: boolean
   keyboardAware?: boolean
+  onChipPress?: () => void
   onMomentumScrollEnd?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   onScrollBeginDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
   onScrollEndDrag?: (e: NativeSyntheticEvent<NativeScrollEvent>) => void
@@ -25,7 +28,7 @@ export type SectionListProps<ItemT, SectionT extends { data: ReadonlyArray<ItemT
   ref?: RefObject<RNSectionList<ItemT, SectionT> | null>
 }
 
-const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> } = { data: ReadonlyArray<ItemT> }>({ contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }: SectionListProps<ItemT, SectionT>) => {
+const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> } = { data: ReadonlyArray<ItemT> }>({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }: SectionListProps<ItemT, SectionT>) => {
   const scrollView = useRef<RNSectionList<ItemT, SectionT>>(null)
 
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props as RNSectionListProps<ItemT, SectionT>
@@ -122,7 +125,7 @@ const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> }
     scrollTo(-contentInset.top + pullSearchHeight, true)
   }, [contentInset.top, pullSearchHeight, scrollTo])
 
-  const handleScroll = useScrollHandler({ chipHidden, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
+  const handleScroll = useScrollHandler({ chipHidden, chipThreshold, footerFixed, headerFixed, onPullSearchZoneEnter: pullSearchHeight ? onPullSearchZoneEnter : undefined })
 
   const handleScrollToTop = useCallback(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top
@@ -175,7 +178,7 @@ const SectionListInner = <ItemT, SectionT extends { data: ReadonlyArray<ItemT> }
           {hiddenHeader}
         </View>
       )}
-      <ScrollViewChip onPress={handleScrollToTop} style={chipStyle} />
+      <ScrollViewChip chipProps={chipProps} onChipPress={onChipPress} onPress={handleScrollToTop} style={chipStyle} />
       {usesCustomSticky && (
         <Animated.View pointerEvents='none' style={[styles.stickyClip, clipStyle]}>
           {activeIndex >= 0 && activeIndex < sections.length && <Animated.View style={[styles.stickyOverlay, overlayStyle]}>{renderSectionHeader({ section: sections[activeIndex] })}</Animated.View>}

package/src/__mocks__/auto-paper.ts

@@ -3,6 +3,7 @@ import React from 'react'
 const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
 
 export const BlurView = jest.fn(stub)
+export const Chip = jest.fn(stub)
 export const FAB = jest.fn(stub)
 export const usePaperDefaults = () => ({ FAB: {} })
 export const useBlur = (blur?: boolean) => blur ?? false

package/src/__tests__/ScrollViewProvider.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 import React, { useContext } from 'react'
 
 import { ScrollViewContext } from '../ScrollViewContext'
@@ -54,7 +54,7 @@ describe('ScrollViewProvider', () => {
         <ContextReader onRead={(v) => { capturedValue = v }} />
       </ScrollViewProvider>
     )
-    capturedValue?.setProgress(0.5)
+    act(() => { capturedValue?.setProgress(0.5) })
     rerender(
       <ScrollViewProvider>
         <ContextReader onRead={(v) => { capturedValue = v }} />

package/src/index.ts

@@ -2,6 +2,7 @@ export type { CustomListProps } from './CustomList'
 export { CustomList } from './CustomList'
 export type { FlatListProps } from './FlatList'
 export { FlatList } from './FlatList'
+export type { ChipProps } from './internal/ScrollViewChip'
 export type { PullSearchHandle, PullSearchProps } from './PullSearch'
 export { PullSearch } from './PullSearch'
 export { scrollViewActions, scrollViewReducer } from './redux/scrollViewSlice'

package/src/internal/ScrollViewChip.tsx

@@ -1,20 +1,36 @@
+import { Chip, type ChipProps as AutoPaperChipProps } from '@rific/auto-paper'
+import { type ReactNode } from 'react'
 import { StyleSheet, type ViewStyle } from 'react-native'
-import { Chip } from 'react-native-paper'
 import Animated, { type AnimatedStyle } from 'react-native-reanimated'
 
+export type ChipProps = Omit<AutoPaperChipProps, 'compact' | 'icon' | 'onPress'> & {
+  label?: ReactNode
+}
+
 type Props = {
+  chipProps?: ChipProps
   isHorizontal?: boolean
+  onChipPress?: () => void
   onPress: () => void
   style: AnimatedStyle<ViewStyle>
 }
 
-export const ScrollViewChip = ({ isHorizontal, onPress, style }: Props) => (
-  <Animated.View style={[styles.chip, style]}>
-    <Chip compact icon={isHorizontal ? 'chevron-left' : 'chevron-up'} onPress={onPress} style={styles.chipInner}>
-      {isHorizontal ? 'Start' : 'Top'}
-    </Chip>
-  </Animated.View>
-)
+export const ScrollViewChip = ({ chipProps, isHorizontal, onChipPress, onPress, style }: Props) => {
+  const { label, style: chipStyle, ...restChipProps } = (chipProps ?? {}) as Partial<ChipProps>
+  const handlePress = onChipPress
+    ? () => {
+        onPress()
+        onChipPress()
+      }
+    : onPress
+  return (
+    <Animated.View style={[styles.chip, style]}>
+      <Chip compact {...restChipProps} icon={isHorizontal ? 'chevron-left' : 'chevron-up'} onPress={handlePress} style={[styles.chipInner, chipStyle]}>
+        {label ?? (isHorizontal ? 'Start' : 'Top')}
+      </Chip>
+    </Animated.View>
+  )
+}
 
 const styles = StyleSheet.create({
   chip: { alignItems: 'center', left: 0, position: 'absolute', right: 0, zIndex: 3 },

package/src/internal/useScrollHandler.ts

@@ -6,13 +6,14 @@ import { ScrollViewContext } from '../ScrollViewContext'
 
 type UseScrollHandlerOptions = {
   chipHidden: SharedValue<number>
+  chipThreshold?: number
   footerFixed: boolean
   headerFixed: boolean
   isHorizontal?: boolean
   onPullSearchZoneEnter?: () => void
 }
 
-export function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }: UseScrollHandlerOptions) {
+export function useScrollHandler({ chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, onPullSearchZoneEnter }: UseScrollHandlerOptions) {
   const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext(ScrollViewContext)
   const snapUpAccum = useSharedValue(0)
   const fromBottomBounce = useSharedValue(false)
@@ -25,12 +26,12 @@ export function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHoriz
         'worklet'
         if (isHorizontal) {
           scrollPosition.value = x
-          chipHidden.value = x < 100 ? 1 : 0
+          chipHidden.value = x < chipThreshold ? 1 : 0
           return
         }
         const delta = y - scrollPosition.value
         scrollPosition.value = y
-        chipHidden.value = y < 100 ? 1 : 0
+        chipHidden.value = y < chipThreshold ? 1 : 0
         const maxScroll = contentHeight - layoutHeight
         if (maxScroll > 0 && y >= maxScroll) {
           fromBottomBounce.value = true
@@ -96,6 +97,6 @@ export function useScrollHandler({ chipHidden, footerFixed, headerFixed, isHoriz
         snapUpAccum.value = 0
       }
     },
-    [headerFixed, footerFixed, isHorizontal, onPullSearchZoneEnter]
+    [headerFixed, footerFixed, isHorizontal, chipThreshold, onPullSearchZoneEnter]
   )
 }