ScrollView in React Native seemingly not working specifically for web view

Question

For more context, ScrollView does work on a single page website. But whenever I start importing different pages, I get a very curious bug that prevents the ScrollView component from working. I also discovered that whenever I resize the window, the scrollbar is very briefly visible before disappearing.

When trying this on a mobile device (both iOS and Android), however, the ScrollView appears to work fine.

I've created a React Native Snack to showcase the issue, linked below, but I've also included the code beneath it in case people don't like clicking random links and might want to reproduce it themselves. https://snack.expo.dev/@elliotw/scrollview-problem

As far as I've seen, this issue hasn't been documented online and I'm wondering if I just missed a step. If anyone could either provide a solution or a working alternative for a web-view based scroll system for react native I'd be extremely grateful.

App.js

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { ScrollView, Text, StyleSheet, View, Button } from 'react-native';
import Example from './example';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  const longText = `
    put a lot of text here
  `;

  return (
    <View style={styles.container}>
    <Button
        title="Go to Example"
        onPress={() => navigation.navigate('Example')}
      />
      <ScrollView contentContainerStyle={styles.scrollView}>
        <Text style={styles.text}>{longText}</Text>
      </ScrollView>
      
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Example" component={Example} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 16,
    textAlign: 'justify',
  },
});

export default App;

example.js

import React from 'react';
import { ScrollView, Text, StyleSheet, View } from 'react-native';

const Example = () => {
  const longText = `
    put a lot of text here
  `;

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollView}>
        <Text style={styles.text}>{longText}</Text>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  scrollView: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 16,
    textAlign: 'justify',
  },
});

export default Example;