Expo Router V2 Web - ScrollView in nested navigation is not showing up

[Dennis Möller]

Which package manager are you using? (Yarn is recommended)

npm

Summary

Hello, when I add a ScrollView in a nested Stack navigation it renders correctly in iOS and Android, but not in web. The component gets rendered but you can't see the UI elements. If you replace the ScrollView with a View everything works fine. This only happens in a nested navigation.

The example code underneath is a Stack.Screen nested in a Tabs.Screen and it doesn't show up in the browser but the you can see the console log in the web console. It seems like there is a css issue.

export default function Page() { console.log("RENDERED") return ( <ScrollView><Text>Screens</Text></ScrollView> ) }

With a View (working):

With a ScrollView (not working):

Minimal reproducible example

See example Github

[Senghuot Lay]

Working fine for me, could just be you havent' wrapped it in SafeAreaProvider

[Dennis Möller]

@dalley8626 Did you try my GitHub example or an example of your own?

[Senghuot Lay]

it is related to this. I dont think the convention you're going is correct. please follow this https://docs.expo.dev/routing/layouts/

import { Tabs } from "expo-router/tabs";
import { Platform } from "react-native";
import { Slot } from "expo-router";
export default function AppLayout() {
  // if (Platform.OS === 'web') {
  //     return (
  //         <div style={{ flex: 1 }}>
  //             <header>
  //                 <div>
  //                     <a href="/">Home</a>
  //                     <span>|</span>
  //                     <a href="/screens">Screens</a>
  //                 </div>
  //             </header>
  //             <Slot />
  //         </div>
  //     );
  // }
  return (
    <Tabs>
      <Tabs.Screen
        name="(home)/index"
        options={{
          title: "Home",
          href: "/",
        }}
      />
      <Tabs.Screen
        name="screens"
        options={{
          title: "Screens",
          href: "/screens",
        }}
      />
    </Tabs>
  );
}

[Dennis Möller]

@dalley8626 I don't want to render the tabs component in web. Commentin out the part that might trigger the issue is a solution but not the one why I openend this issue.

[Mark Lawlor]

This appears to be an issue with your CSS & React Native Web, not with Expo Router

- <div style={{ flex: 1 }}>
+ <div style={{ flex: 1, display: 'flex', flexDirection: 'column', maxHeight: '100%' }}>
    <header>
        <div>
            <a href="/">Home</a>
            <span>|</span>
            <a href="/screens">Screens</a>
        </div>
    </header>
    <Slot />
</div>

On web, the default display is block, so your flex styles had no effect. A tip I always recommend for developers using RNW is use the Chrome Dev Tools Inspector. It will put a small ! next to invalid flex rules, e.g when I inspect your repo it told me the parent div needed to be changed to display: flex. Its a great time saver in solving flexbox differences between platforms.