[BUG]: onDragChange behaves differently on iOS

[szheleshchenko]

Before submitting a new issue

• [x] I tested using the latest version of the library, as the bug might be already fixed.
• [x] I tested using a supported version of react native.
• [x] I checked for possible duplicate issues, with possible answers.

Bug summary

The onDragChange callback behaves differently on Android and iOS.

const handleDragChange = ({ nativeEvent }) => {
  console.log(nativeEvent.value);
};

return <TrueSheet onDragChange={handleDragChange} />;

Expected Behavior

nativeEvent.value should update consistently on both platforms while dragging AND after release.

Actual Behavior

On Android: nativeEvent.value smoothly decreases from the initial size to 0 when swiping down. On iOS: nativeEvent.value stops changing as soon as the user releases the sheet.

Library version

2.0.4

Environment info

System: OS: Windows 11 10.0.22631 CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-1240P Memory: 1.09 GB / 15.71 GB Binaries: Node: version: 22.11.0 path: C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: version: 10.9.0 path: C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-233.14808.21.2331.11842104 Visual Studio: Not Found Languages: Java: 17.0.12 Ruby: Not Found npmPackages: "@react-native-community/cli": Not Found react: installed: 18.3.1 wanted: 18.3.1 react-native: installed: 0.76.6 wanted: 0.76.6 react-native-windows: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: Not found newArchEnabled: Not found

Steps to reproduce

1. Render TrueSheet with onDragChange.
2. Swipe down to close the sheet.
3. Observe event.nativeEvent.value logs.

Reproducible example repository

https://github.com/szheleshchenko/true-sheet-reproduction

[szheleshchenko]

This temporary workaround works in my case.

const dragOffset = useSharedValue(0);

const handleDragChange = ({ nativeEvent }) => {
  dragOffset.value = nativeEvent.value;
};

const handleDragEnd = ({ nativeEvent }) => {
  if (Platform.OS === 'ios' && nativeEvent.value <= 0) {
    dragOffset.value = withTiming(0, { duration: 250 });
  }
};

return <TrueSheet onDragChange={handleDragChange} onDragEnd={handleDragEnd} />;

[lodev09]

@szheleshchenko did you checkout example? There's code there on how to use it with Reanimated

[szheleshchenko]

@lodev09 Yep, I tried copy-pasting code from the example, but nativeEvent.value still stops changing as soon as I stop dragging the sheet.

On the other hand, that seems logical since the callback is called onDragChange, not onDragAndAfterReleaseChange, so the behavior on Android probably needs to be fixed instead. 😄

Anyway, this callback doesn't cover all potential needs. A reactive onSizeChange that fires on every size change – not just when the sheet reaches snap points – would be perfect.

[lodev09]

Anyway, this callback doesn't cover all potential needs. A reactive onSizeChange that fires on every size change – not just when the sheet reaches snap points – would be perfect.

I would've wanted this but unfortunately IOS has limitations. Would require some heavy hack which I'm not confident about. Though I'm open for suggestions :)

[lodev09]

v3 is ready for testing! I added onPositionChange and added first-class Reanimated support. See https://sheet.lodev09.com/guides/reanimated/