Android `formSheet` dismiss animation

[plneple]

Description

Dismiss animation is not performed after clicking on background on android.

Steps to reproduce

1. Open modal with presentation={"formSheet"}
2. Close modal by clicking on background

Snack or a link to a repository

This is reproduced in both example and FabricExample in this repo
https://github.com/software-mansion/react-native-screens

Screens version

4.6.0

React Native version

0.77

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

None

Build type

None

Device

None

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]

Hey! Thanks for the report, however I do not observe the issue in example apps in the repo. Please attach a valid reproduction, recording of the issue occurring + missing ticket information (react-native architecture in use).

Screen.Recording.2025-01-29.at.10.28.09.mov

I'll reopen the ticket in case the information is filled.

[plneple]

Hey, @kkafar. Thanks for taking a time to look into the issue.

In this repo, I do observe the same result as the one on your recording. However, I expected to see something more similar to this.
This is the result I get by just initializing a sample app and pasting in a bottom sheet example. I am not an expert in native android development, so please correct me if I am missing something here.
I have uploaded the code from my recording to https://github.com/plneple/react-native-screens-sample

Screen.Recording.2025-01-29.at.11.43.45.AM.mov

[kkafar]

Yeah, the slide part is missing. However I do not consider it a bug, it is rather intended.

I'm working actively on slide support here

• fix(Android): separate transitions of sheet and dimming view #2542

Above PR ☝ changes animation style to slide-only not slide-and-fade, however.

Once I'm done with sliding animation (animating single fragment with two different animations (slide for the sheet and fade for dimming view) is surprisingly hard on Android) I'll expose some options to select appropriate animation.

[plneple]

Okay, thank you so much, the slide-only animation sounds exactly like what I would expect.

Any idea on how long until this is expected to release ?

[kkafar]

I'm tackling currently some technical issues I've mentioned above. While the PR is already functional I've got some reports of potential crashes on Paper. If you're using Fabric - it should already work.

If you have capacity you can help the feature to land faster by testing it & providing feedback.

You can install screens directly from PR / branch:

• fix(Android): separate transitions of sheet and dimming view #2542
• @kkafar/separate-transition-for-sheet-and-dimming-view

Or by installing from tag: https://github.com/software-mansion/react-native-screens/releases/tag/separate-animations-5

I update this tag pretty often (once a day or two) recently.

[kkafar]

I expect it to land in beta version of next release (4.7.0). Currently I'm preparing release of 4.6.0

[plneple]

Hey, @kkafar.

Sorry for bothering you again, but I have a couple issues regarding the implementation of presentation={"formSheet"}.

I have no luck finding any issues in the repo regarding the problems I am facing, but they must be pretty common as far as I can tell, maybe I am missing something ?

What would be the best way for me to approach this ? Should I create separate issues for each problem, or will we talk about them in this thread ?

Examples of the issues I am facing:

1. Android + paper. Passing sheetAllowedDetents="fitToContents" causes the component to appear under the keyboard, when input is focused.
2. Android + paper / fabric. App crashes when opening from background, if modal is opened.
3. Android + paper / fabric. When using ScrollView (from react-native) it only scrolls down. Scrolling up is only possible, if you start by scrolling down first. Note: I was able to handle this by wrapping the ScrollView into a GestureDetector + Gesture.Native() from react-native-gesture-handler, but then modal dismiss gesture does not work over the bounds of ScrollView
4. Android / iOS + paper. Increasing (or decreasing) the height of the content of modal with sheetAllowedDetents="fitToContents" does not resize the modal itself.

I assume 1 and 4 are also reproducible on fabric, but I cannot confirm this, because inputs / buttons inside modal do not react to touches on my android device. I have tested every issue listed in this repo on the main branch. I can provide the code for each example, if needed.

I would be willing to work on this, but due to my limited native development experience, I would need your guidance to continue.

[kkafar]

Hey I think it would be best to open a separate issue for each problem.

I can answer point 3. straight away. It is most likely related to

• Fix ScrollView interactions with Android's CoordinatorLayout facebook/react-native#44099

And this won't be fixed otherwise. Unfortunately I have always something more pressing to do, but I'll get to it someday 😅

Regarding point no. 4:

This is a technical decision that we won't be able to change until react-native exposes API for synchronous ShadowTree state updates on UI thread. I think there might be some layout issues that we will be able to improve right now, but the Screen height will remain constant for some time now.
Thing we could possibly do, however is to expose sheet's top position, or its perceived height as reanimated shared value so that you would be able to animate based on that.

The point no. 1 seems like a valid issue. Please provide a reproduction & description in separate issue.

THe point no. 2 might refer to the same issue as #2627 does. Please see the ticket I linked before opening new one so we don't have duplicates.

[plneple]

1. Will create a separate issue
2. It is the same problem as far as I can tell. Will not create a separate issue.
3. Providing nestedScrollEnabled to react-native ScrollView does fix the gesture issue. I will not create an issue for this, because that solves my problem.

Regarding p.4, I do not think being able to control the sheet's top position would solve the issues I am having. I do not quite understand the way I am supposed to simulate height changes with this API. Even if there is a way, I would imagine it would cause numerous issues with styling and gesture recognition. Maybe it would be better to not react to layout changes automatically, but instead expose recalculateLayout / setHeight method through a ref ?

[kkafar]

1. Thanks

2. ✅

3. Great!

4. We did is as it is done right now due to this class of issues:

• Sheet / detent buggy jumping behavior on iOS #1722
• Strange flicker when you scroll up a modal with NativeStack in iOS #2112

Maybe if you describe your particular problem right now, I can came up with some general solution

[plneple]

I try to load the data in modal and then render it.

I know that the data will not fill most of the screen, so I don't want to use 1.0 detent. I initially render a loader, and then after the load finishes replace it with some content. I cannot know the height of the content in advance.

There are some solutions I can see working, but they result in worse UX imo:

1. Render the sheet with [0.5, 1.0] detents. This can be bad, because modal has buttons on the bottom, and they might not be in view, when the content loads.
2. Preload the content before opening the modal. This is impractical for me, because some of the modals contain complex loading logic, which I would have to duplicate. Also, we might want to show something more than a loader in the modal to show what exactly is loading.

If I could call sheetRef.recalculateLayout when the data is loaded, that would be perfect in my case. I am not very familiar with this codebase, but I cannot think of a way how it could lead to the issues you linked. I want to emphasize, that the imperative method on the screen ref is enough for me, I do not ask for the library to resize the sheet when the content height changes, I would "tell" you when size did change. I hope I explain it in a way that makes sense to you.