Scrollview not working properly in v4 formSheet #2424

peterjskaltsis · 2024-10-21T09:38:46Z

Description

Not sure if I should be posting this here or in react-navigation, nor if its too early since things are still in beta!

But I was requested to post this via: react-navigation/react-navigation#12196 (comment)

Scrolling inside a scrollview inside a formSheet modal does not seem to work on new rc/beta react-navigation & react-native-screens.

See video demo here:

repro-recording.mov

Steps to reproduce

Open a modal type formSheet on native stack with ScrollView in it
Try to scroll, bounces back to top
If you pull up on the modal towards status bar & then try to scroll, it works

Snack or a link to a repository

https://github.com/peterjskaltsis/rn-screens-repro

Screens version

4.0.0-beta.11

React Native version

0.74.5

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 16 Pro

Acknowledgements

Yes

The text was updated successfully, but these errors were encountered:

kkafar · 2024-10-21T09:44:08Z

Hey!

Love your font
Every feedback is great
I'll be looking into it in couple of minutes

Thank you!

kkafar · 2024-10-21T16:36:28Z

I have the guilty one - view flattening and this is bad.

Despite the fact we define hierarchy in form of Screen -> ContentWrapper -> View -> ScrollView the resulting one is Screen -> ContentWrapper -> View, ScrollView. See:

And this is bad, because we look for the scrollview in the direct line (full DFS on whole subtree is rather no-no for performance reasons). If the view flattening is applied at any level higher in the HostTree this algorithm won't work...

@peterjskaltsis Right now the best solution is to just disable the view flattening by setting collapsable={false} on the view wrapping the scroll view:

  return (
    <View style={{backgroundColor: 'crimson' }} collapsable={false} >
      <ScrollView>
        {Array.from({ length: 90 }).map((_, index) => (<Text key={index}>I'm a long scrollview</Text>))}
        <View style={{ width: '100%', height: 50, backgroundColor: 'seagreen' }} />
      </ScrollView>
    </View>
  )

peterjskaltsis · 2024-10-21T20:30:01Z

Thank you for the quickly reply & explanation @kkafar. That makes sense 👍 would this be a blocker for the v4 full release?

In terms of solution, I am unable to get it working by adding collapsable={false} the parent view.
Once I do this, even dragging the header up before scrolling (as seen in my original recording) is no longer working.

Were you able to get it working with that change locally?

kkafar · 2024-10-22T09:53:42Z

@peterjskaltsis Yes, setting collapsable={false} did make it work for me.

I want to clarify one aspect: in the issue report you specified that you're using old architecture (Paper), is that accurate? Could you confirm it?

peterjskaltsis · 2024-10-22T10:12:14Z

Hmm interesting, yes I am using Paper at the moment

kkafar · 2024-10-22T10:39:01Z

Yeah... I was testing on Fabric. On paper I do not have the problem at all, as I believe view flattening does not exist on Paper & iOS combination .

kkafar · 2024-10-22T11:08:14Z

@peterjskaltsis I'm using exactly the code you provided now on Paper & it seems that everything is in order.

Screen.Recording.2024-10-22.at.13.06.34.mov

One thing that differs in our approaches is usage of Expo Go, but that not really in our scope to fix.

Important

Please note, that I'm using latest beta of react-native-screens 4.0.0-beta.13 and current main of react-navigation (you can use @react-navigation/[email protected])

I do not know what version of libraries are shipped with Expo Go. It might be reasonable to wait for beta release of sdk 52, which contains up-to-date pacakage versions.

peterjskaltsis · 2024-10-22T11:21:52Z

Thank you very much for digging into this one!

Confirmed it works on Paper in my repro repo if I adde the sheetAllowedDetents.

I think it has something to do with the top of the screen.

Notice when I change it to default sheetDetents it does not scroll properly. But if I drag the modal towards the status bar and then try to scroll, it works? (video attached)

Screen.Recording.2024-10-22.at.10.19.25.pm.mov

BTW I confirmed this does not occur on Fabric 👍 Also I am not using Expo Go, I am using managed expo via running expo prebuild && expo run:ios

kkafar · 2024-10-22T11:25:46Z

Okay! I confirm the issue. If sheetAllowedDetents is not set or if the sheetAllowedDetents is set to a single value - the bug occurs.

Thanks!

I'll look into this later today!

kkafar · 2024-11-04T11:38:52Z

I just wanted to update here, that the issue turned out to be more complex than I've thought initially & I've moved to doing other things, because most likely we'll need ability of synchronous React Native's layout on UI thread do resolve this issue, which is not available on Paper (and not yet sure how to do it on Fabric). Will be back to handling this after we release v4 (should be days from now).

kot-ezhva · 2024-11-14T17:53:55Z

I'm also have some trouble with v4

1.-.01.mp4

a-eid · 2024-11-14T19:27:49Z

I have a siliar issue with formsheet on ios where it addes additional padding to the bottom, notice the difference between android & ios.

form-sheet-RNSv4.mp4

however this is not scrollview related.

kot-ezhva · 2024-11-14T19:58:34Z

however this is not scrollview related.

I tried to put inside just <View style={{flex:1, backgroundColor: 'red'}} /> I expected see full-height view, but seen nothing :)

a-eid · 2024-11-14T21:21:59Z

I see that this was filed as a paper issue, however I am using the new arch.

however this is not scrollview related.

I tried to put inside just <View style={{flex:1, backgroundColor: 'red'}} /> I expected see full-height view, but seen nothing :)

this also happens on the new arch.

a-eid · 2024-11-14T21:55:48Z

  return (
    <View style={{ flex: 1, backgroundColor: "red", marginBottom: 70 }}>
      {/*  */}
      {/*  */}
    </View>
  )

Simulator.Screen.Recording.-.iPhone.15.-.2024-11-14.at.23.55.00.mp4

FYI this is on the new arch.

kot-ezhva · 2024-11-14T22:36:05Z

  return (
    <View style={{ flex: 1, backgroundColor: "red", marginBottom: 70 }}>
      {/*  */}
      {/*  */}
    </View>
  )

Simulator.Screen.Recording.-.iPhone.15.-.2024-11-14.at.23.55.00.mp4

exactly strange behaviour

a-eid · 2024-11-15T01:27:24Z

somehow this is related to react-native-reanimated, I have this simple Component that when commented out the bug is no longer reproducible.

the component is on the parent screen.

I know it doesn't make sense ¯_(ツ)_/¯.

kot-ezhva · 2024-11-16T11:43:29Z

Problem not resolved. Any solution about worked ScrollView inside 'formSheet' screen?
Simple temporary solution for me it replace formSheet to modal. For iOS it looks similar (in my case it's ok)

screencast.2024-11-16.14-40-18.-.01.-.01.mp4

rainerllera · 2024-11-28T10:54:41Z

Any updates on this? I see your PR from October @kkafar, any luck with that? For context, in my case (Expo 52, Fabric) ScrollView inside modal screens (not formSheet) is behaving weirdly and I think it may be related with this issue.

The ScrollView's height seems to be miscalculated, and "jumps" on touch events. Sometimes it shows correctly when opening a modal, and some other times it's just wrong (same modal, same screen). Seems a bit random.

Because of the height variation, a component I have as a "footer" of these screens (sibling to the scrollview, with margin top auto) is sometimes pushed outside of the modal screen, without the possibility to scroll to it.

I've managed to make things work again by just placing my footer component inside the scrollview itself, with a fixed margin top, which makes it look kinda bad, but at least it is functional.

This started happening after I upgraded from Expo 51 to 52 (which included the react-navigation upgrade to v7, and screens to v4.1.0) and enabled new arch.

fedpre · 2024-12-06T08:14:19Z

Any update? I am using formSheet and if I nest a ScrollView inside the screen there is a scrolling conflict on Android. If I keep pressing the scroll I can go up and down, but if I scroll down, leave, and try to go back up on the list, it actually closes the formSheet instead of correctly scrolling to the top of the list AND THEN closing the formSheet.
This behaviour is correct on iOS.

Screen.Recording.2024-12-06.at.9.13.12.AM.mov

danieljvdm · 2025-01-01T16:36:00Z

Bumping on this again... as far as I can tell flex: 1 doesn't work on any components within a formSheet presentation. I'm trying to do something like Instagram's comment formSheet where there are two detents, one half, one full, and the content expands to fit the size of the sheet.

mnelabs-kevin · 2025-01-08T15:34:25Z

Bumping on this again... as far as I can tell flex: 1 doesn't work on any components within a formSheet presentation. I'm trying to do something like Instagram's comment formSheet where there are two detents, one half, one full, and the content expands to fit the size of the sheet.

Also seeing this (RN 0.76.5), commenting to follow along.

chanphiromsok · 2025-01-16T07:36:07Z

flex style not apply on formSheet ,The flex style apply on the Screen with config options formSheet

options={{
      presentation: "formSheet",
      animation: "slide_from_bottom",
     gestureEnabled: true,
     gestureDirection: "vertical",
     headerShown: true,
    sheetGrabberVisible: true,
     sheetInitialDetentIndex: 0,
     sheetAllowedDetents: [0.9, 1.0],
    sheetCornerRadius: 100,
}}

Updated

The release already include in caution that limit support flex 1 https://github.com/software-mansion/react-native-screens/releases/tag/4.0.0

RohovDmytro · 2025-01-16T10:52:19Z

I just wanted to update here, that the issue turned out to be more complex than I've thought initially & I've moved to doing other things, because most likely we'll need ability of synchronous React Native's layout on UI thread do resolve this issue, which is not available on Paper (and not yet sure how to do it on Fabric). Will be back to handling this after we release v4 (should be days from now).

@kkafar Thanks for taking a look and digging in. Is there any updates on the matter?

peterjskaltsis · 2025-02-01T08:56:17Z

I just wanted to update here, that the issue turned out to be more complex than I've thought initially & I've moved to doing other things, because most likely we'll need ability of synchronous React Native's layout on UI thread do resolve this issue, which is not available on Paper (and not yet sure how to do it on Fabric). Will be back to handling this after we release v4 (should be days from now).

Congrats on the recent big releases @kkafar! Unfortunately since I raised this issue I'm still blocked from trying out all the new versions of this package in our app. I just wanted to check if it was still on your radar after v4? 🚀

kkafar · 2025-02-01T12:34:47Z

Hey, sorry this isn't fixed yet. There are plenty of tickets on the radar just haven't had opportunity to dig into this one yet. I'll try to handle this one in upcoming 1-2 weeks. Thanks for the remainder.

a-eid · 2025-02-05T23:20:13Z

@kkafar thank you for the great work overall including this feature,

I would like to note that, formsheet screens don't behave unexpectedly with just the scrollview. I've noticed some other issues with normal views as well.

if the screen is wrapped with a View, it doesn't behave properly with a flex: 1.
it's children also can't have a flex: 1.

they have to be given an explicit height, which I am not sure if that the desired behavior.

a-eid · 2025-02-05T23:45:28Z

there also seem to be an issue with insets on android. ( I have edge to edge active ).

Screen.Recording.2025-02-06.at.1.44.15.AM.mov

a-eid · 2025-02-06T00:06:38Z

there also seem to be an issue with insets on android. ( I have edge to edge active ).

Screen.Recording.2025-02-06.at.1.44.15.AM.mov

apparently this issue doesn't always happen. sometime I am able to repro but not always.

github-actions bot added Platform: iOS This issue is specific to iOS Repro provided A reproduction with a snack or repo is provided labels Oct 21, 2024

peterjskaltsis mentioned this issue Oct 21, 2024

fix(Android): formSheet flex 1 support react-navigation/react-navigation#12196

Closed

kkafar self-assigned this Oct 21, 2024

kkafar linked a pull request Oct 23, 2024 that will close this issue

fix(iOS,Paper): incorrect size of scrollview viewport with formSheet presentation #2436

Draft

8 tasks

radko93 mentioned this issue Dec 13, 2024

KeyboardAwareScrollView compatibility issue with react-navigation@7+ presentation 'formSheet' kirillzyusko/react-native-keyboard-controller#726

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scrollview not working properly in v4 formSheet #2424

Scrollview not working properly in v4 formSheet #2424

peterjskaltsis commented Oct 21, 2024

kkafar commented Oct 21, 2024

kkafar commented Oct 21, 2024 •

edited

Loading

peterjskaltsis commented Oct 21, 2024 •

edited

Loading

kkafar commented Oct 22, 2024

peterjskaltsis commented Oct 22, 2024

kkafar commented Oct 22, 2024

kkafar commented Oct 22, 2024 •

edited

Loading

peterjskaltsis commented Oct 22, 2024 •

edited

Loading

kkafar commented Oct 22, 2024

kkafar commented Nov 4, 2024

kot-ezhva commented Nov 14, 2024

a-eid commented Nov 14, 2024

kot-ezhva commented Nov 14, 2024 •

edited

Loading

a-eid commented Nov 14, 2024

a-eid commented Nov 14, 2024 •

edited

Loading

kot-ezhva commented Nov 14, 2024

a-eid commented Nov 15, 2024 •

edited

Loading

kot-ezhva commented Nov 16, 2024

rainerllera commented Nov 28, 2024

fedpre commented Dec 6, 2024

danieljvdm commented Jan 1, 2025

mnelabs-kevin commented Jan 8, 2025

chanphiromsok commented Jan 16, 2025 •

edited

Loading

RohovDmytro commented Jan 16, 2025 •

edited

Loading

peterjskaltsis commented Feb 1, 2025

kkafar commented Feb 1, 2025

a-eid commented Feb 5, 2025

a-eid commented Feb 5, 2025

a-eid commented Feb 6, 2025

Scrollview not working properly in v4 formSheet #2424

Scrollview not working properly in v4 formSheet #2424

Comments

peterjskaltsis commented Oct 21, 2024

Description

Steps to reproduce

Snack or a link to a repository

Screens version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

kkafar commented Oct 21, 2024

kkafar commented Oct 21, 2024 • edited Loading

peterjskaltsis commented Oct 21, 2024 • edited Loading

kkafar commented Oct 22, 2024

peterjskaltsis commented Oct 22, 2024

kkafar commented Oct 22, 2024

kkafar commented Oct 22, 2024 • edited Loading

peterjskaltsis commented Oct 22, 2024 • edited Loading

kkafar commented Oct 22, 2024

kkafar commented Nov 4, 2024

kot-ezhva commented Nov 14, 2024

a-eid commented Nov 14, 2024

kot-ezhva commented Nov 14, 2024 • edited Loading

a-eid commented Nov 14, 2024

a-eid commented Nov 14, 2024 • edited Loading

kot-ezhva commented Nov 14, 2024

a-eid commented Nov 15, 2024 • edited Loading

kot-ezhva commented Nov 16, 2024

rainerllera commented Nov 28, 2024

fedpre commented Dec 6, 2024

danieljvdm commented Jan 1, 2025

mnelabs-kevin commented Jan 8, 2025

chanphiromsok commented Jan 16, 2025 • edited Loading

Updated

RohovDmytro commented Jan 16, 2025 • edited Loading

peterjskaltsis commented Feb 1, 2025

kkafar commented Feb 1, 2025

a-eid commented Feb 5, 2025

a-eid commented Feb 5, 2025

a-eid commented Feb 6, 2025

kkafar commented Oct 21, 2024 •

edited

Loading

peterjskaltsis commented Oct 21, 2024 •

edited

Loading

kkafar commented Oct 22, 2024 •

edited

Loading

peterjskaltsis commented Oct 22, 2024 •

edited

Loading

kot-ezhva commented Nov 14, 2024 •

edited

Loading

a-eid commented Nov 14, 2024 •

edited

Loading

a-eid commented Nov 15, 2024 •

edited

Loading

chanphiromsok commented Jan 16, 2025 •

edited

Loading

RohovDmytro commented Jan 16, 2025 •

edited

Loading