How do I constrain an Expo Web or React Native Web App to Browser Window Size?

Question

since there's no concept of page-level scrolling on iOS and Android React Native apps things work out fine. However, on React Native Web my app components expand beyond the bounds of views and cause the page itself to expand. For example, in the screenshot below I have two FlatLists that expand beyond the viewport and page the page scrollable instead of themselves remaining smaller scrollable views.

How do I constrain the entire app so Views work like they do on other React Native platforms?

Thanks.

Answer 1

Two solutions that came to mind is; setting the dimension of the outer-most component to the size of the screen.

Either by;

1. defining the dimensions yourself in css styling, like height:800

2. keeping it more general with height:"100%"

This will limit a <FlatList> to stay within its parent's dimensions. So, if you set the parent component to be the dimension you want, the child components will be limited within those dimensions.

Here's a simple example: https://snack.expo.dev/ajO0MxcZE

As you can see, the <FlatList> will not exceed the boundaries you've set for the parent component.