Sheet / detent buggy jumping behavior on iOS

[ferrannp]

Description

Not sure if you seen my answer here #1649 (comment), but trying the new formSheet with detent has a buggy behavior. You can see the content from the bottom when you slide. I think this bug is in modal too but it is not so visible. See the video:

bottomJump.mov

---

By the way, are you planning to implement this also on Android? Would love testing it or even helping. I think a native sheet really makes a difference.

Steps to reproduce

In your Example app, go to StackPresentation.tsx, and change this example:

    <Stack.Screen
      name="FormSheet"
      component={FormScreen}
      options={{ stackPresentation: 'formSheet', sheetAllowedDetents: 'all' }}
    />

Can be any combo of sheetAllowedDetents.

Snack or a link to a repository

https://github.com/software-mansion/react-native-screens/blob/main/Example/src/screens/StackPresentation.tsx#L187

Screens version

Latest master of your Example

React Native version

Latest master of your Example

Platforms

iOS

JavaScript runtime

None

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[kkafar]

Thank you for reporting, I'll try to handle it.

I've spent some time on Android implementation, but it is not so straightforward with current react-native-screens architecture - the very short story: we wrap every view inside custom Fragment subclass & to display modal view (I'm talking material components here) the view needs to be presented inside special ModalFragment (or sth close) & we can't inherit from multiple classes. If Android only had used composition over inheritance there would be no issue here, but it is like it is :D However I'm not abandoning the idea, will surely give it a second try.

[ferrannp]

Thanks for answering @kkafar ! Hopefully we can make it work in Android.

By the way, any ideas about the iOS bug reported in here?

[kkafar]

I believe #2045 fixed this issue at a cost of impaired flexbox model support in sheet.