`ScrollView` Android prop `fadingEdgeLength` no longer reacts to scroll position

[sorenfrederiksen]

Description

It seems, after this change, released in 0.81.0, that the fadingEdgeLength prop no longer behaves as expected.

Previous (expected) behaviour, prior to 0.81.0

When a ScrollView with fadingEdgeLength is at scroll position 0 (i.e. it hasn't been scrolled), the fadingEdgeLength should not fade the start of the scrolling container (in this case, the top of the "Add music" drawer):

In addition, the fadingEdgeLength stops being applied to the bottom of the scroll view, when the user scrolls to its end:

before-expected-behaviour.mp4

Current (unexpected) behaviour, after 0.81.0

When a ScrollView with fadingEdgeLength is at scroll position 0, the fadingEdgeLength is now applied to the start of the scrolling container (in this case, the top of the "Add music" drawer):

In addition, the fadingEdgeLength is now always applied to both the top and bottom of the scroll view, regardless of scroll position:

after-android-always-applied.mp4

Steps to reproduce

1. Add fadingEdgeLength={40} to a ScrollView with sufficient content to make the view scrollable.
2. Notice the fadingEdgeLength applies to the top of the ScrollView, even when at scroll position 0 (i.e. before scrolling).
3. Notice the fadingEdgeLength is always applied and doesn't react to scroll position changing at all (e.g. previously, the fadingEdgeLength would stop applying to the bottom of the ScrollView when you scrolled to the end of the scrolling area).

Forgive me for not having a reproducer up and running - I don't have an Expo Snack account - but if you modify this example Snack like this, you should be able to observe the issue:

import { StyleSheet, Text, ScrollView } from 'react-native';

// You can import supported modules from npm
import { Card } from 'react-native-paper';

// or any files within the Snack
import AssetExample from './components/AssetExample';

export default function App() {
  return (
    // Change `View` to `ScrollView`, add `fadingEdgeLength`
    <ScrollView style={styles.container} fadingEdgeLength={40}>
      // Add content sufficient to make view scrollable
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

React Native Version

0.81.0

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 26.2
  CPU: (10) arm64 Apple M2 Pro
  Memory: 96.48 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.3.0
    path: /Users/dksorfre/.local/share/mise/installs/node/22.3.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.1
    path: /Users/dksorfre/.local/share/mise/installs/node/22.3.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/dksorfre/.local/share/mise/installs/ruby/3.1.4/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "31"
      - "33"
      - "34"
      - "34"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 30.0.3
      - 33.0.0
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-33 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14344949
  Xcode:
    version: 26.0/17A324
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.2
    path: /Users/dksorfre/.local/share/mise/installs/java/17.0.2/bin/javac
  Ruby:
    version: 3.1.4
    path: /Users/dksorfre/.local/share/mise/installs/ruby/3.1.4/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found - Edit: It is enabled.
  newArchEnabled: Not found - Edit: It is enabled.
iOS:
  hermesEnabled: Not found - Edit: It is enabled.
  newArchEnabled: Not found - Edit: It is enabled.

Stacktrace or Logs

No stacktrace.

MANDATORY Reproducer

https://snack.expo.dev/?platform=android

Please see "Steps to reproduce".

Screenshots and Videos

Please see my issue description.