[BUG]: onDragChange behaves differently on iOS

[szheleshchenko]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• 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 :)