Scrolling on `contentInset` area does nothing

[nandorojo]

Description

As of React Native 0.81, if you use the contentInset prop, and then try to scroll on the area which is inset, nothing will happen.

Before (0.79, Expo 53)

✅ Regardless of where you drag your finger, it will scroll.

CleanShot.2025-10-10.at.12.49.24.mp4

After (0.81, Expo 54)

🚨 It will only scroll if you drag from content within the scrollview itself.

CleanShot.2025-10-10.at.12.46.43.mp4

Steps to reproduce

1. Add contentInset={{ top: 300 }} to ScrollView
2. Put something in the scrollview
3. Try scrolling by dragging your finger on the inset area

import { Text, ScrollView } from 'react-native';
  
export default function App() {
  return (
    <ScrollView contentInset={{ top: 300 }}>
      <Text>
        You can only scroll if you drag me here.
      </Text> 
    </ScrollView>
  );
}

React Native Version

0.81.0

Affected Platforms

Runtime - iOS

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

N/A reproduced on Expo Snack

Stacktrace or Logs

N/A

MANDATORY Reproducer

https://snack.expo.dev/@vnando/broken-content-inset

Screenshots and Videos

On Expo Snack, you can toggle SDK 53/54 at the bottom to reproduce.

[nandorojo]

This appears to be the cause

[JeanJoskin]

I was able to fix this by patching that betterHitTest method inside RCTScrollViewComponentView.mm and changing the return target to the _scrollView instead of self.

So the return was

return isPointInside ? self : nil;

and patched to

return isPointInside ? _scrollView : nil;

It seems like the container UIView is receiving the event while it should be redirected to the UIScrollView.

[trcoffman]

Given how many AI chat experiences are being built these days, this seems like a really high priority bug. contentInset is the only good way on iOS to achieve the UX of positioning the latest user message at the top of the screen to allow room for streaming messages to come in without layout shifting during the streaming.