react-native-rigid-bounce-scroll-view

An iOS-style elastic and bouncy ScrollView for React Native Android, with native rigid overscroll, spring rebound, and stronger fling momentum.

Unlike Android stretch overscroll, this component moves the content as one rigid surface. iOS and web use the platform Animated.ScrollView as a fallback.

Built for apps that want React Native ScrollView bounces and elastic scrolling on Android without giving up standard scroll events or native momentum.

Features

• Rigid top and bottom overscroll on Android
• Vertical and horizontal scrolling
• Native SpringAnimation return
• Configurable drag resistance and travel
• Stronger fling momentum
• Momentum-to-spring response at scroll boundaries
• Pull-to-refresh through React Native RefreshControl
• Multiple vertical sticky headers through stickyHeaderIndices
• Compatible with Animated.event and standard scroll events
• Automatic Android linking for React Native CLI and Expo development builds

Installation

npm install react-native-rigid-bounce-scroll-view

Expo

This package contains Android native code. It does not work in Expo Go.

After installation, create or rebuild a development build:

npx expo prebuild
npx expo run:android

Existing projects that already contain an android directory only need to rebuild the Android app.

React Native CLI

Autolinking is supported. Rebuild the Android application after installation:

npx react-native run-android

Usage

import { RigidBounceScrollView } from 'react-native-rigid-bounce-scroll-view';

export function Screen() {
  return (
    <RigidBounceScrollView
      contentContainerStyle={{ padding: 24 }}
      maxOverscrollDistance={96}
      dragResistance={0.42}
      springStiffness={520}
      springDamping={0.82}
      flingVelocityMultiplier={1.35}
      showsVerticalScrollIndicator={false}
    >
      {/* Content */}
    </RigidBounceScrollView>
  );
}

Animated.event(..., { useNativeDriver: true }) can be passed through onScroll.

Horizontal

<RigidBounceScrollView
  horizontal
  contentContainerStyle={{ flexDirection: 'row', gap: 12 }}
  showsHorizontalScrollIndicator={false}
>
  {items}
</RigidBounceScrollView>

Refresh control

<RigidBounceScrollView
  refreshControl={
    <RefreshControl refreshing={refreshing} onRefresh={handleRefresh} />
  }
>
  {content}
</RigidBounceScrollView>

Sticky headers

<RigidBounceScrollView stickyHeaderIndices={[0, 4]}>
  {sections}
</RigidBounceScrollView>

Sticky headers are supported for vertical scrolling. Give each sticky header an opaque background when content should not remain visible beneath it.

Props

The component accepts standard ScrollViewProps. Custom sticky header renderers and inverted sticky headers are not currently supported.

| Prop | Type | Default | Description | | --- | --- | --- | --- | | elasticEnabled | boolean | true | Enables Android rigid overscroll. | | maxOverscrollDistance | number | 92 | Maximum content travel in density-independent pixels. | | dragResistance | number | 0.42 | Drag transfer ratio. Lower values feel heavier. | | springStiffness | number | 520 | Android spring stiffness. | | springDamping | number | 0.82 | Android spring damping ratio. | | flingVelocityMultiplier | number | 1.35 | Multiplies Android release velocity. | | horizontal | boolean | false | Uses the native horizontal rigid-bounce implementation. | | refreshControl | ReactElement | — | Adds pull-to-refresh to vertical scrolling. | | stickyHeaderIndices | number[] | — | Pins vertical child indices while scrolling. |

Platform behavior

| Platform | Behavior | | --- | --- | | Android | Native rigid overscroll, spring return, and enhanced fling. | | iOS | Standard Animated.ScrollView and native iOS bounce. | | Web | Standard React Native Web Animated.ScrollView. |

Compatibility

The first release is tested against:

• React Native 0.81.x
• React 19.1.x
• Expo SDK 54
• Android API 24+
• React Native New Architecture enabled through the ViewManager interop layer

The Android implementation subclasses React Native's ReactScrollView, so React Native compatibility is intentionally pinned until each version has been tested.

Current limitations

• RefreshControl and sticky headers are vertical-only, matching React Native behavior
• No custom StickyHeaderComponent
• No inverted or hide-on-scroll sticky headers
• Native Android changes require rebuilding the app
• Expo Go is not supported

Development

yarn
yarn typecheck
yarn lint
yarn prepare
yarn example android

License

MIT