search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.16k stars 26.74k forks source link

RNW example doesn't allow the page to scroll #16956

Open oste opened 4 years ago

oste commented 4 years ago

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 https://github.com/vercel/next.js/pull/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

Screen Shot 2020-09-09 at 12 03 38 AM

System information

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 commented 4 years ago

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.

necolas commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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.

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.