@rific/scroll-view 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/scroll-view",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Blur styled scroll system for React Native. Floating headers/footers, keyboard awareness, and scroll-away chrome",
   "keywords": [
     "react-native",
@@ -39,15 +39,15 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "src",
+    "!src/__tests__",
+    "!src/__mocks__"
   ],
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
-    "dev": "tsup src/index.ts --format cjs,esm --dts --clean --watch",
     "fix": "eslint --fix",
     "lint": "eslint",
     "prepublishOnly": "npm run build",
-    "push": "yalc publish --push",
     "release": "git push --follow-tags",
     "release:major": "npm version major && git push --follow-tags",
     "release:minor": "npm version minor && git push --follow-tags",
@@ -59,7 +59,7 @@
   },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.12.0",
-    "@rific/auto-paper": "^0.4.0",
+    "@rific/auto-paper": "^0.6.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
@@ -90,14 +90,14 @@
     "typescript-eslint": "^8.59.3"
   },
   "peerDependencies": {
-    "@rific/auto-paper": "^0.3.1 || ^0.4.0 || ^0.5.0",
+    "@rific/auto-paper": "^0.6.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.73.0",
-    "react-native-gesture-handler": "*",
-    "react-native-keyboard-controller": "*",
+    "react-native": ">=0.76.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-keyboard-controller": ">=1.0.0",
     "react-native-paper": ">=5.0.0",
     "react-native-reanimated": ">=3.0.0",
-    "react-native-safe-area-context": "*"
+    "react-native-safe-area-context": ">=5.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/redux/scrollViewSlice.ts

@@ -1,14 +1,22 @@
-import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
-
 import { defaultScrollViewSettings, type ScrollViewSettings } from '../ScrollViewSettingsContext'
 
-const slice = createSlice({
-  name: 'scrollView',
-  initialState: defaultScrollViewSettings,
-  reducers: {
-    initialize: (_state, action: PayloadAction<ScrollViewSettings>) => action.payload
-  }
-})
+// Hand-rolled slice — no @reduxjs/toolkit dependency. Action types and creator
+// behavior match the previous createSlice implementation exactly, so this works
+// with RTK stores, vanilla Redux, or any reducer-based state container.
+type PayloadAction<P> = { payload: P; type: string }
+
+const createAction = <P>(type: string) => {
+  const actionCreator = (payload: P): PayloadAction<P> => ({ payload, type })
+  actionCreator.type = type
+  actionCreator.match = (action: { type: string }): action is PayloadAction<P> => action.type === type
+  return actionCreator
+}
+
+const initialize = createAction<ScrollViewSettings>('scrollView/initialize')
+
+export const scrollViewActions = { initialize }
 
-export const scrollViewActions = slice.actions
-export const scrollViewReducer = slice.reducer
+export const scrollViewReducer = (state: ScrollViewSettings = defaultScrollViewSettings, action: { type: string }): ScrollViewSettings => {
+  if (initialize.match(action)) return action.payload
+  return state
+}

package/src/__mocks__/auto-paper.ts

@@ -1,9 +0,0 @@
-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/__mocks__/flash-list.ts

@@ -1,20 +0,0 @@
-import React from 'react'
-
-const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
-
-// Minimal type surface so ts-jest can resolve FlashListProps without the real package
-export type FlashListProps<T> = {
-  data?: readonly T[] | null
-  estimatedItemSize?: number
-  renderItem?: ((info: { item: T; index: number }) => React.ReactElement | null) | null
-  contentInset?: { top?: number; bottom?: number; left?: number; right?: number }
-  contentOffset?: { x: number; y: number }
-  onRefresh?: (() => void) | null
-  onScroll?: unknown
-  refreshControl?: React.ReactElement | null
-  refreshing?: boolean | null
-  scrollEventThrottle?: number
-  [key: string]: unknown
-}
-
-export const FlashList = jest.fn(stub)

package/src/__mocks__/react-native-gesture-handler.ts

@@ -1,13 +0,0 @@
-import React from 'react'
-
-const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
-
-export const GestureDetector = stub
-export const useNativeGesture = jest.fn(() => ({}))
-export const useSimultaneousGestures = jest.fn((...gestures: unknown[]) => gestures[0])
-export const Gesture = {
-  Native: () => ({}),
-  Simultaneous: (..._gestures: unknown[]) => ({})
-}
-export type GestureType = object
-export type SingleGesture = object

package/src/__mocks__/react-native-keyboard-controller.ts

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
-
-export const KeyboardAwareScrollView = stub
-export const KeyboardAwareFlatList = stub
-export const useKeyboardHandler = jest.fn()
-export const useReanimatedKeyboardAnimation = () => ({
-  height: { value: 0 },
-  progress: { value: 0 }
-})

package/src/__mocks__/react-native-paper.ts

@@ -1,22 +0,0 @@
-import React from 'react'
-
-const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
-
-export const ProgressBar = jest.fn(() => null)
-export const Surface = jest.fn(stub)
-export const Chip = jest.fn(stub)
-export const Searchbar = jest.fn(() => null)
-
-const BackAction = jest.fn(() => null)
-export const Appbar = { BackAction }
-
-export const useTheme = () => ({
-  dark: false,
-  colors: {
-    primary: '#6200ee',
-    surface: '#ffffff',
-    onSurface: '#000000',
-    onSurfaceVariant: '#49454f',
-    outlineVariant: '#cac4d0'
-  }
-})

package/src/__mocks__/react-native-reanimated.ts

@@ -1,61 +0,0 @@
-import React from 'react'
-
-const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
-
-// Real Reanimated shared values persist their `.value` across re-renders (like useRef) — the
-// `init` argument is only honored on the first call. A naive `{ value: init }` per render would
-// silently discard mutations made during a previous render every time the owning component re-renders.
-export const useSharedValue = <T,>(init: T) => {
-  const ref = React.useRef<{ value: T } | null>(null)
-  if (!ref.current) ref.current = { value: init }
-  return ref.current
-}
-
-// Reanimated's useAnimatedRef returns a stable callable that also exposes `.current`, so
-// consumers can either pass it directly as a `ref` prop or read/assign `.current` imperatively.
-export const useAnimatedRef = <T,>() => {
-  const holder = React.useRef<((node: T | null) => void) & { current: T | null }>(undefined as unknown as ((node: T | null) => void) & { current: T | null })
-  if (!holder.current) {
-    let current: T | null = null
-    const fn = ((node: T | null) => {
-      current = node
-    }) as ((node: T | null) => void) & { current: T | null }
-    Object.defineProperty(fn, 'current', {
-      get: () => current,
-      set: (node: T | null) => {
-        current = node
-      }
-    })
-    holder.current = fn
-  }
-  return holder.current
-}
-export const useAnimatedStyle = (_factory: () => object) => ({})
-export const useAnimatedProps = (_factory: () => object) => ({})
-export const useAnimatedScrollHandler = (_handler: unknown) => jest.fn()
-export const useAnimatedReaction = jest.fn()
-export const useDerivedValue = (factory: () => unknown) => ({ value: factory() })
-export const withTiming = (value: number) => value
-export const withSpring = (value: number) => value
-export const runOnJS =
-  <T extends (...args: unknown[]) => unknown>(fn: T) =>
-  (...args: Parameters<T>) =>
-    fn(...args)
-export const runOnUI =
-  <T extends (...args: unknown[]) => unknown>(fn: T) =>
-  (...args: Parameters<T>) =>
-    fn(...args)
-
-export const createAnimatedComponent = (C: React.ComponentType) => C
-
-// The default export IS the Animated namespace — `import Animated from 'reanimated'` → Animated.View
-const Animated = {
-  View: stub,
-  Text: stub,
-  ScrollView: stub,
-  FlatList: stub,
-  createAnimatedComponent
-}
-
-export { Animated }
-export default Animated

package/src/__mocks__/react-native-safe-area-context.ts

@@ -1,2 +0,0 @@
-export const useSafeAreaInsets = () => ({ top: 44, bottom: 34, left: 0, right: 0 })
-export const SafeAreaProvider = ({ children }: { children?: React.ReactNode }) => children ?? null

package/src/__mocks__/react-native.ts

@@ -1,30 +0,0 @@
-import React from 'react'
-
-const stub = ({ children }: { children?: React.ReactNode }) => children ?? null
-
-const StyleSheet = {
-  absoluteFill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
-  create: <T extends object>(styles: T): T => styles,
-  flatten: (style: unknown) => style
-}
-
-const Dimensions = {
-  get: (_dim: string) => ({ width: 390, height: 844 })
-}
-
-const Platform = {
-  OS: 'ios' as 'ios' | 'android',
-  select: (obj: Record<string, unknown>) => obj[Platform.OS] ?? obj.default
-}
-
-export { Dimensions, Platform, StyleSheet }
-
-export const View = stub
-export const Text = stub
-export const Pressable = stub
-export const TouchableOpacity = stub
-export const FlatList = jest.fn(stub)
-export const RefreshControl = jest.fn(stub)
-export const SectionList = jest.fn(stub)
-export const ScrollView = jest.fn(stub)
-export const useWindowDimensions = () => ({ width: 390, height: 844, fontScale: 1, scale: 1 })

package/src/__tests__/CustomList.test.tsx

@@ -1,61 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { CustomList } from '../CustomList'
-import { ScrollViewProvider } from '../ScrollViewProvider'
-
-const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
-
-type MockListProps = {
-  contentInset?: unknown
-  contentOffset?: unknown
-  onScroll?: unknown
-  scrollEventThrottle?: number
-  onMomentumScrollEnd?: unknown
-  onScrollBeginDrag?: unknown
-  onScrollEndDrag?: unknown
-  [key: string]: unknown
-}
-
-const MockList = jest.fn((_props: MockListProps) => null)
-
-describe('CustomList', () => {
-  beforeEach(() => MockList.mockClear())
-
-  it('renders without crashing', () => {
-    render(<CustomList component={MockList} />, { wrapper })
-  })
-
-  it('wires up contentInset and contentOffset', () => {
-    render(<CustomList component={MockList} />, { wrapper })
-    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
-    expect(props).toHaveProperty('contentInset')
-    expect(props).toHaveProperty('contentOffset')
-  })
-
-  it('passes scrollEventThrottle={16}', () => {
-    render(<CustomList component={MockList} />, { wrapper })
-    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
-    expect(props?.scrollEventThrottle).toBe(16)
-  })
-
-  it('passes onScroll handler', () => {
-    render(<CustomList component={MockList} />, { wrapper })
-    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
-    expect(typeof props?.onScroll).toBe('function')
-  })
-
-  it('passes momentum and drag scroll handlers', () => {
-    render(<CustomList component={MockList} />, { wrapper })
-    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
-    expect(typeof props?.onMomentumScrollEnd).toBe('function')
-    expect(typeof props?.onScrollBeginDrag).toBe('function')
-    expect(typeof props?.onScrollEndDrag).toBe('function')
-  })
-
-  it('forwards extra props to the inner component', () => {
-    render(<CustomList component={MockList} testID='my-list' />, { wrapper })
-    const props = MockList.mock.calls[0]?.[0] as MockListProps | undefined
-    expect(props?.testID).toBe('my-list')
-  })
-})

package/src/__tests__/FlatList.test.tsx

@@ -1,135 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-import { FlatList as RNFlatList } from 'react-native'
-
-import { FlatList } from '../FlatList'
-import { ScrollViewProvider } from '../ScrollViewProvider'
-
-const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
-
-type MockFlatListProps = {
-  data?: unknown
-  keyExtractor?: (item: never, index: number) => string
-  numColumns?: number
-  renderItem?: (info: unknown) => React.ReactNode
-  [key: string]: unknown
-}
-
-const lastCallProps = () => {
-  const calls = (RNFlatList as unknown as jest.Mock).mock.calls
-  return calls[calls.length - 1]?.[0] as MockFlatListProps | undefined
-}
-
-describe('FlatList', () => {
-  it('renders without crashing', () => {
-    render(<FlatList data={[]} renderItem={() => null} />, { wrapper })
-  })
-
-  it('renders with data items', () => {
-    render(
-      <FlatList data={['a', 'b', 'c']} renderItem={({ item }) => <>{item}</>} keyExtractor={(item) => item} />,
-      { wrapper }
-    )
-  })
-
-  it('renders horizontal', () => {
-    render(<FlatList data={[]} renderItem={() => null} horizontal />, { wrapper })
-  })
-
-  it('renders horizontal paged list with HorizontalDots for multiple items', () => {
-    render(
-      <FlatList
-        data={['a', 'b', 'c']}
-        renderItem={({ item }) => <>{item}</>}
-        keyExtractor={(item) => item}
-        horizontal
-        pagingEnabled
-      />,
-      { wrapper }
-    )
-  })
-
-  it('renders with pullSearchHeight', () => {
-    render(<FlatList data={[]} renderItem={() => null} pullSearchHeight={60} />, { wrapper })
-  })
-
-  it('renders with renderFilters', () => {
-    render(
-      <FlatList data={[]} renderItem={() => null} renderFilters={<></>} />,
-      { wrapper }
-    )
-  })
-
-  it('renders with keyboardAware', () => {
-    render(<FlatList data={[]} renderItem={() => null} keyboardAware />, { wrapper })
-  })
-})
-
-describe('FlatList numColumns row-chunking', () => {
-  beforeEach(() => (RNFlatList as unknown as jest.Mock).mockClear())
-
-  it('passes data through unchanged when numColumns is omitted', () => {
-    const data = ['a', 'b', 'c']
-    render(<FlatList data={data} renderItem={() => null} keyExtractor={(item) => item} />, { wrapper })
-    expect(lastCallProps()?.data).toBe(data)
-  })
-
-  it('passes data through unchanged when numColumns is 1', () => {
-    const data = ['a', 'b', 'c']
-    render(<FlatList data={data} renderItem={() => null} keyExtractor={(item) => item} numColumns={1} />, { wrapper })
-    expect(lastCallProps()?.data).toBe(data)
-  })
-
-  it('never forwards the numColumns prop itself to the underlying RNFlatList', () => {
-    render(<FlatList data={['a', 'b', 'c']} renderItem={() => null} keyExtractor={(item) => item} numColumns={3} />, { wrapper })
-    expect(lastCallProps()?.numColumns).toBeUndefined()
-  })
-
-  it('chunks data into rows of numColumns, with a partial last row', () => {
-    render(<FlatList data={['a', 'b', 'c', 'd', 'e']} renderItem={() => null} keyExtractor={(item) => item} numColumns={2} />, { wrapper })
-    expect(lastCallProps()?.data).toEqual([['a', 'b'], ['c', 'd'], ['e']])
-  })
-
-  it('row keyExtractor joins per-item keys with a colon', () => {
-    render(<FlatList data={['a', 'b', 'c', 'd']} renderItem={() => null} keyExtractor={(item) => item} numColumns={2} />, { wrapper })
-    const rowKeyExtractor = lastCallProps()?.keyExtractor
-    expect(rowKeyExtractor?.(['a', 'b'] as never, 0)).toBe('a:b')
-    expect(rowKeyExtractor?.(['c', 'd'] as never, 1)).toBe('c:d')
-  })
-
-  it('row renderItem renders every item in the row via the original renderItem', () => {
-    render(
-      <FlatList
-        data={['fig', 'kiwi', 'plum']}
-        renderItem={({ item }) => <>{item}</>}
-        keyExtractor={(item) => item}
-        numColumns={2}
-      />,
-      { wrapper }
-    )
-    const rowRenderItem = lastCallProps()?.renderItem
-    const { container } = render(rowRenderItem?.({ index: 0, item: ['fig', 'kiwi'], separators: {} as never }) as React.ReactElement)
-    expect(container.textContent).toContain('fig')
-    expect(container.textContent).toContain('kiwi')
-    expect(container.textContent).not.toContain('plum')
-  })
-
-  it('renderItem indexes items by their position across the whole flattened list, not just within the row', () => {
-    const indices: number[] = []
-    render(
-      <FlatList
-        data={['a', 'b', 'c', 'd', 'e']}
-        renderItem={({ index }) => {
-          indices.push(index)
-          return null
-        }}
-        keyExtractor={(item) => item}
-        numColumns={2}
-      />,
-      { wrapper }
-    )
-    const rowRenderItem = lastCallProps()?.renderItem
-    render(rowRenderItem?.({ index: 2, item: ['e'], separators: {} as never }) as React.ReactElement)
-    expect(indices).toEqual([4]) // row index 2 * numColumns 2 + column 0
-  })
-})

package/src/__tests__/PullSearch.test.tsx

@@ -1,38 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { PullSearch, type PullSearchHandle } from '../PullSearch'
-import { ScrollViewProvider } from '../ScrollViewProvider'
-
-const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
-
-describe('PullSearch', () => {
-  it('renders without crashing', () => {
-    render(<PullSearch onChangeText={jest.fn()} onHeightChange={jest.fn()} />, { wrapper })
-  })
-
-  it('renders with placeholder', () => {
-    render(
-      <PullSearch onChangeText={jest.fn()} onHeightChange={jest.fn()} placeholder='Search items...' />,
-      { wrapper }
-    )
-  })
-
-  it('renders with initial value', () => {
-    render(<PullSearch onChangeText={jest.fn()} onHeightChange={jest.fn()} value='hello' />, { wrapper })
-  })
-
-  it('exposes blur and focus via imperative ref', () => {
-    const ref = React.createRef<PullSearchHandle>()
-    render(<PullSearch ref={ref} onChangeText={jest.fn()} onHeightChange={jest.fn()} />, { wrapper })
-    expect(typeof ref.current?.blur).toBe('function')
-    expect(typeof ref.current?.focus).toBe('function')
-  })
-
-  it('does not throw when blur/focus called with no input mounted', () => {
-    const ref = React.createRef<PullSearchHandle>()
-    render(<PullSearch ref={ref} onChangeText={jest.fn()} onHeightChange={jest.fn()} />, { wrapper })
-    expect(() => ref.current?.blur()).not.toThrow()
-    expect(() => ref.current?.focus()).not.toThrow()
-  })
-})

package/src/__tests__/ScrollView.test.tsx

@@ -1,23 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { ScrollView } from '../ScrollView'
-import { ScrollViewProvider } from '../ScrollViewProvider'
-
-const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
-
-describe('ScrollView', () => {
-  it('renders without crashing', () => {
-    render(<ScrollView />, { wrapper })
-  })
-
-  it('renders children', () => {
-    const { getByText } = render(
-      <ScrollView>
-        <></>
-      </ScrollView>,
-      { wrapper }
-    )
-    expect(getByText).toBeDefined()
-  })
-})

package/src/__tests__/ScrollViewHeader.test.tsx

@@ -1,28 +0,0 @@
-import { render } from '@testing-library/react'
-import React from 'react'
-
-import { ScrollViewFooter } from '../ScrollViewFooter'
-import { ScrollViewHeader } from '../ScrollViewHeader'
-import { ScrollViewProvider } from '../ScrollViewProvider'
-
-const wrapper = ({ children }: { children: React.ReactNode }) => <ScrollViewProvider>{children}</ScrollViewProvider>
-
-describe('ScrollViewHeader', () => {
-  it('renders without crashing', () => {
-    render(<ScrollViewHeader />, { wrapper })
-  })
-
-  it('renders with children', () => {
-    render(<ScrollViewHeader><></></ScrollViewHeader>, { wrapper })
-  })
-})
-
-describe('ScrollViewFooter', () => {
-  it('renders without crashing', () => {
-    render(<ScrollViewFooter />, { wrapper })
-  })
-
-  it('renders with children', () => {
-    render(<ScrollViewFooter><></></ScrollViewFooter>, { wrapper })
-  })
-})

package/src/__tests__/ScrollViewProvider.test.tsx

@@ -1,65 +0,0 @@
-import { act, render } from '@testing-library/react'
-import React, { useContext } from 'react'
-
-import { ScrollViewContext } from '../ScrollViewContext'
-import { ScrollViewProvider } from '../ScrollViewProvider'
-import { useScrollView } from '../useScrollView'
-
-const ContextReader = ({ onRead }: { onRead: (v: ReturnType<typeof useScrollView>) => void }) => {
-  const value = useScrollView()
-  onRead(value)
-  return null
-}
-
-describe('ScrollViewProvider', () => {
-  it('renders without crashing', () => {
-    render(
-      <ScrollViewProvider>
-        <></>
-      </ScrollViewProvider>
-    )
-  })
-
-  it('provides default context values', () => {
-    let capturedValue: ReturnType<typeof useScrollView> | undefined
-    render(
-      <ScrollViewProvider>
-        <ContextReader onRead={(v) => { capturedValue = v }} />
-      </ScrollViewProvider>
-    )
-    expect(capturedValue?.progress).toBeNull()
-    expect(capturedValue?.progressing).toBe(false)
-  })
-
-  it('accepts headerFixed and footerFixed props', () => {
-    let capturedCtx: { headerFixed: boolean; footerFixed: boolean } | undefined
-    const Reader = () => {
-      const ctx = useContext(ScrollViewContext)
-      capturedCtx = { headerFixed: ctx.headerFixed, footerFixed: ctx.footerFixed }
-      return null
-    }
-    render(
-      <ScrollViewProvider headerFixed footerFixed>
-        <Reader />
-      </ScrollViewProvider>
-    )
-    expect(capturedCtx?.headerFixed).toBe(true)
-    expect(capturedCtx?.footerFixed).toBe(true)
-  })
-
-  it('setProgress updates progress value', () => {
-    let capturedValue: ReturnType<typeof useScrollView> | undefined
-    const { rerender } = render(
-      <ScrollViewProvider>
-        <ContextReader onRead={(v) => { capturedValue = v }} />
-      </ScrollViewProvider>
-    )
-    act(() => { capturedValue?.setProgress(0.5) })
-    rerender(
-      <ScrollViewProvider>
-        <ContextReader onRead={(v) => { capturedValue = v }} />
-      </ScrollViewProvider>
-    )
-    expect(capturedValue?.progress).toBe(0.5)
-  })
-})