RNW example doesn't allow the page to scroll

[oste]

Describe the bug

When running with-react-native-web example I am noticing that the default styling does not allow the page to scroll. See this pull request to see the change in question #4787.

To Reproduce

1. yarn create next-app --example with-react-native-web with-react-native-web-app
2. install deps and switch to directory. Then run yarn dev
3. Update the alternate.js page to include text that would normally need to scroll
4. Notice the page does not allow scrolling.

Expected behavior

The page can scroll.

Screenshots

System information

• OS: OS
• Browser: Chrome
• Version of Next.js: 9.3
• Version of Node.js: 14.7

Additional context

Before submitting a pull request I wanted to get @dcalhoun to give an opinion on the issue. I might be missing something with react native web that requires the body element to contain overflow:hidden to make reusing code across native and web possible.

[dcalhoun]

Using the body as the root scroll view is not reliably supported.

@oste for the longest time, RNW did not support using Touchables with the body as the scrolling element. You were required to use a ScrollView for web (also, you are required to use a ScrollView for native, so attempting to use the body may make your code less portable to native). This is why body scrolling was disabled in the example.

@necolas had intentions of addressing this issue. I am uncertain if that work has been finished or if it requires using Pressable rather than Touchable. You could read up on the following issues and attempt to use Pressable with body scrolling enabled to see if the relevant issues have been addressed. If they have, then updating the example within this repo is likely worthwhile.

• Touchable: use within body scroller / outside of ScrollView necolas/react-native-web#829
• Touchable issues necolas/react-native-web#1219
• The future of React Native for Web necolas/react-native-web#1538

[necolas]

There's no issue with react-native-web. All the touchables work within a body scroller, but scrolling the body is a web-only thing.

[oste]

@dcalhoun @necolas is there a recommended way to bootstrap a RNW project? Mostly just looking for a good way to style the HTML and body elements. Are you suggesting that they shouldn't be set to 100% height and body set to overflow hidden? If so I will update this example accordingly. Thanks.

[dcalhoun]

@oste there isn't really a consistent directive from Nicolas on what is the "recommended way." I would imagine that is because it is dependent upon what you are trying to accomplish. If you want the best UX for web users, then body scroll may be ideal (e.g. iOS' tap status bar to scroll to top). If you want code the runs exactly the same on web and native, purely relying upon ScrollView may be necessary.

I'd recommend reviewing the guides and starter kits provided in the react-native-web documentation. Hopefully you can find the path best suited for your needs.

• Quick start
• Client-side rendering
• Server-side rendering
• Libraries and integrations

If you are merely looking for the answer to the question "what do most people do?", I'd likely say review what Expo is doing as it's heavily promoted by React Native proper.

[vercel-release-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.