fix: fix scrolling on ExampleList screen (web)

Author: BogiKay

example/src/RootNavigator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import type { DrawerNavigationProp } from '@react-navigation/drawer';
 import { getHeaderTitle } from '@react-navigation/elements';
@@ -19,55 +19,68 @@ export default function Root() {
       ? CardStyleInterpolators.forFadeFromBottomAndroid
       : CardStyleInterpolators.forHorizontalIOS;
   return (
-    <Stack.Navigator
-      screenOptions={({ navigation }) => {
-        return {
-          detachPreviousScreen: !navigation.isFocused(),
-          cardStyleInterpolator,
-          header: ({ navigation, route, options, back }) => {
-            const title = getHeaderTitle(options, route.name);
-            return (
-              <Appbar.Header elevated>
-                {back ? (
-                  <Appbar.BackAction onPress={() => navigation.goBack()} />
-                ) : (navigation as any).openDrawer ? (
-                  <Appbar.Action
-                    icon="menu"
-                    isLeading
-                    onPress={() =>
-                      (
-                        navigation as any as DrawerNavigationProp<{}>
-                      ).openDrawer()
-                    }
-                  />
-                ) : null}
-                <Appbar.Content title={title} />
-              </Appbar.Header>
-            );
-          },
-        };
-      }}
-    >
-      <Stack.Screen
-        name="ExampleList"
-        component={ExampleList}
-        options={{
-          title: 'Examples',
+    <View style={styles.stackWrapper}>
+      <Stack.Navigator
+        screenOptions={({ navigation }) => {
+          return {
+            detachPreviousScreen: !navigation.isFocused(),
+            cardStyleInterpolator,
+            header: ({ navigation, route, options, back }) => {
+              const title = getHeaderTitle(options, route.name);
+              return (
+                <Appbar.Header elevated>
+                  {back ? (
+                    <Appbar.BackAction onPress={() => navigation.goBack()} />
+                  ) : (navigation as any).openDrawer ? (
+                    <Appbar.Action
+                      icon="menu"
+                      isLeading
+                      onPress={() =>
+                        (
+                          navigation as any as DrawerNavigationProp<{}>
+                        ).openDrawer()
+                      }
+                    />
+                  ) : null}
+                  <Appbar.Content title={title} />
+                </Appbar.Header>
+              );
+            },
+          };
         }}
-      />
-      {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
-        return (
-          <Stack.Screen
-            key={id}
-            name={id}
-            component={examples[id]}
-            options={{
-              title: examples[id].title,
-              headerShown: id !== 'themingWithReactNavigation',
-            }}
-          />
-        );
-      })}
-    </Stack.Navigator>
+      >
+        <Stack.Screen
+          name="ExampleList"
+          component={ExampleList}
+          options={{
+            title: 'Examples',
+          }}
+        />
+        {(Object.keys(examples) as Array<keyof typeof examples>).map((id) => {
+          return (
+            <Stack.Screen
+              key={id}
+              name={id}
+              component={examples[id]}
+              options={{
+                title: examples[id].title,
+                headerShown: id !== 'themingWithReactNavigation',
+              }}
+            />
+          );
+        })}
+      </Stack.Navigator>
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  stackWrapper: {
+    flex: 1,
+    ...Platform.select({
+      web: {
+        overflow: 'scroll',
+      },
+    }),
+  },
+});