How do I stop the whole page from scrolling on web?

[giacomocerquone]

Hey there, I wonder why this example gives different results between native and web:

https://snack.expo.dev/@giacomocerquone/crabby-apple

    <View style={[styles.container]}>
      <View>
        <Text>Always there</Text>
      </View>

      <ScrollView>
        {new Array(1000).fill(1).map((el) => (
          <Text>asdasdasd</Text>
        ))}
      </ScrollView>
    </View>

TLDR: To create a fixed positioned View on ios or android you just need to put the element outside of a scrollview. This is not enough on web though where the entire page scrolls.
Developing Modals or any other "overlayed" component, can get tricky if you don't know this. Is this reported somewhere in the documentation? What's your take on this?

/cc @necolas

[giacomocerquone]

Anyone?

Another way in which I could put the matter is that each converted View by react-native-web should have overflow: 'hidden' by default in order to reproduce the same behavior we have on native

[uladkasach]

To ensure parity between rn.web and rn.* i've been wrapping my screens with the following component

export const LayoutEncompassViewport = ({
  children,
}: {
  children: ReactNode;
}) => {
  const { height: windowHeight, width: windowWidth } = useWindowDimensions(); 

  return (
    <View
      style={{
        // and set size based on window
        height: windowHeight ?? '100vh', 
        width: windowWidth ?? '100vw',

        // ensure parity between rn.web and rn.native regarding requiring a scrollview in order to have scrolling
        overflow: 'hidden',
      }}
    >
      {children}
    </View>
  );
};

Like OP noted, this reproduces the same behavior we have on native in the web, by hiding any overflow.

This also makes it easy for you to add scroll views which fill this container, since it has an explicit height.

[giacomocerquone]

Hey, thank you for answering. Yours seems a nice approach, thank you for the contribution. I'm happy to know I'm not alone in this since up until now I've been completely ignored by every contributor and/or maintainer sadly.