react-native-screens icon indicating copy to clipboard operation
react-native-screens copied to clipboard
verified publisher icon software-mansion

feat: Add sheet translation Y (position) with Reanimated hook

Open lodev09 opened this issue 7 months ago • 4 comments

Description

This PR introduces new Event for tracking the translation Y value of the sheet when being dragged or presented. This is particularly useful on some use-cases where we want to animate separate views based on the sheet's position e.g. Apple Maps app.

Also added support for Footer on IOS.

Changes

  • Added support for translation Y (position) value event. Includes Reanimated hook.
  • Implement Footer on IOS.
  • Added sheetDismissible prop -- or can we reuse gestureEnabled?

TODO:

  • [ ] New Arc (IOS): fix footer visual glitches :/
  • [ ] New Arc (Android): fix correct translation Y value.

Test code and steps to reproduce

WIP

IOS

https://github.com/user-attachments/assets/2464f3db-61d6-4292-855a-3336cc15a645

Android

https://github.com/user-attachments/assets/ff8e1cc8-662c-462e-8835-eb3e75b3842a

Checklist

  • [ ] Included code example that can be used to test this change
  • [ ] Updated TS types
  • [ ] Updated documentation:
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
    • [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
  • [ ] Ensured that CI passes

lodev09 avatar May 05 '25 17:05 lodev09

Thanks, I'll look into it by the end of the week

kkafar avatar May 07 '25 16:05 kkafar

Will this work without Reanimated (with the vanilla Animated API)?

SimpleCreations avatar May 07 '25 17:05 SimpleCreations

Will this work without Reanimated (with the vanilla Animated API)?

@SimpleCreations haven't tried but it should -- it's the same logic as the transition animation.

lodev09 avatar May 07 '25 22:05 lodev09

Thanks, I'll look into it by the end of the week

Thank you!

Also, let me know if I should remove the footer implementation on IOS -- you guys might have better solution for it. Or feel free to modify/improve.

lodev09 avatar May 07 '25 22:05 lodev09

@kkafar any interest in getting this merged?

erickreutz avatar Jul 22 '25 16:07 erickreutz

@kkafar any interest in getting this merged?

erickreutz avatar Sep 25 '25 23:09 erickreutz

@kkafar what do you think?

erickreutz avatar Oct 25 '25 10:10 erickreutz

Hey @kkafar, could you take a look at this PR please? Here's how it wokrs:

IOS Android

lodev09 avatar Nov 11 '25 20:11 lodev09

Just rewrote TrueSheet fabric instead https://github.com/lodev09/react-native-true-sheet/pull/211 closing. thanks!

lodev09 avatar Nov 23 '25 07:11 lodev09