react-native-blur-scrollview

React Native's ScrollView, plus iOS 26 UIScrollView scroll edge blur effects.

The component renders a normal React Native ScrollView and configures the underlying native UIScrollView when the public iOS 26 API is available. Older iOS versions, Android, web, and builds compiled with an older iOS SDK behave like a plain ScrollView.

Install

npm install react-native-blur-scrollview
cd ios && pod install

Usage

import { BlurScrollView } from 'react-native-blur-scrollview'

export function Screen() {
  return (
    <BlurScrollView
      topEdgeEffect="soft"
      bottomEdgeEffect="automatic"
      contentInsetAdjustmentBehavior="never"
    >
      {/* content */}
    </BlurScrollView>
  )
}

BlurScrollView accepts every React Native ScrollView prop, plus:

topEdgeEffect?: ScrollEdgeEffectValue
bottomEdgeEffect?: ScrollEdgeEffectValue
leftEdgeEffect?: ScrollEdgeEffectValue
rightEdgeEffect?: ScrollEdgeEffectValue

Each edge value can be:

true
false
'automatic'
'soft'
'hard'
'hidden'
'none'
{ style?: 'automatic' | 'soft' | 'hard'; hidden?: boolean }

false, 'hidden', and 'none' hide that edge effect. true uses the automatic style.

Overlay Containers

iOS 26 also has UIScrollEdgeElementContainerInteraction for controls or header/footer views that overlay a scroll edge. Use ScrollEdgeEffectContainer to attach that interaction.

import { useRef } from 'react'
import { StyleSheet, Text } from 'react-native'
import { BlurScrollView, ScrollEdgeEffectContainer } from 'react-native-blur-scrollview'

export function HeaderScreen() {
  const scrollViewRef = useRef(null)

  return (
    <>
      <BlurScrollView ref={scrollViewRef} topEdgeEffect="soft">
        {/* content */}
      </BlurScrollView>

      <ScrollEdgeEffectContainer
        scrollViewRef={scrollViewRef}
        edge="top"
        style={styles.header}
      >
        <Text>Header</Text>
      </ScrollEdgeEffectContainer>
    </>
  )
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
})

Availability

The native blur edge effect is only available on iOS 26, tvOS 26, and newer SDK builds that expose UIScrollView.topEdgeEffect. The package compiles and runs on older versions as a no-op.

Use isScrollEdgeEffectAvailable() when UI needs to branch explicitly.