Patterns for scrolling without `ScrollView`

[nandorojo]

Describe the feature request

One of the most challenging pieces of handling UI across platforms is scrolling. I wrote a post about it in the Solito docs which covers some (though not all) of the challenges.

Namely:

• Window scrolling on web
• Window scrolling allowing mobile browsers to collapse the top & bottom of the screen
• ScrollView on native needed to scroll
• ScrollView on web needing a parent with a fixed height (or flexGrow: 1, flexBasis: 0)

I'm wondering how this all fits into react-strict-dom. What are patterns for handling scrolling? What have you done given that overflow isn't supported in RN yet and that native scrolling is so different?

Thanks!

[efoken]

I just used overflow: scroll for web and a ScrollView on the native side. Never really had to think about scrolling 😅

[nandorojo]

Got it, good to know. Using overflow on web has some downsides:

1. Mobile browsers don’t scroll properly, as the top and bottom of the browser don’t collapse
2. importantly, you opt out of the browser’s scroll restoration when you hit the back button

I’ve used overflow/ScrollView on web as well, but for many sites it’s a trade off.

[javascripter]

I find extracting main content / footer / header as components and using them in separate platform-specific screens/page files (without universal abstraction layers for ScrollViews etc) most practical in universal development. Screen/page files can serve as a compat layer and can be used to inject platform-specific dependencies and configure layouts.

It'd be great to have overflow style support in RN/RSD though.

// features/foo/index.tsx
export function Content() { /* ... */ }

export function Footer() { /* ... */ }

// web
import * as Foo from '@/features/foo'
<main>
  <Foo.Content />
  <Foo.Footer />
</main>

// native
import * as Foo from '@/features/foo'
<ScrollView>
  <Foo.Content />
  <Foo.Footer />
</ScrollView>