I am trying to use a bottom tab bar on iOS and Android and a top nav bar on web. I have the following directory:

app
 |- (tabs)
     |- _layout.jsx
     |- browse.jsx
     |- search.jsx

And here is my code:

_layout.jsx

import { Feather } from '@expo/vector-icons'
import { Tabs } from 'expo-router'
import { Platform } from 'react-native'
import PrimaryWebNav from '../../components/PrimaryWebNav'

const TabsLayout = () => {
  const tabs = [
    {
      href: '/browse',
      text: 'Browse',
      name: 'browse',
      headerTitle: 'Browse',
      tabBarLabel: 'Browse',
      iconName: 'compass'
    },
    {
      href: '/search',
      text: 'Search',
      name: 'search',
      headerTitle: 'Search',
      tabBarLabel: 'Search',
      iconName: 'search'
    }
  ]

  if (Platform.OS === 'web') {
    return <PrimaryWebNav />
  }
  return (
    <Tabs>
      {tabs.map((tab) => {
        const { name, headerTitle, tabBarLabel, headerShown, iconName } = tab
        const tabBarIcon = ({ size, color }) => <Feather name={iconName} size={size} color={color} />

        return (
          <Tabs.Screen
            key={name}
            name={name}
            options={{
              headerTitle,
              tabBarLabel,
              headerShown,
              tabBarIcon,

              headerTitleAlign: 'left'
            }}
          />
        )
      })}
    </Tabs>
  )
}

export default TabsLayout

PrimaryWebNav.jsx

import { usePathname } from 'expo-router'
import { useState } from 'react'
import { Text } from 'react-native'
import WebModal from '../WebModal'
import SearchBox from './SearchBox'
import WebNavContainer from './WebNavContainer'
import WebNavIconContainer from './WebNavIconContainer'
import WebNavTextContainer from './WebNavTextContainer'
import WebNavTextLink from './WebNavTextLink'

const PrimaryWebNav = ({ children }) => {
  const pathName = usePathname()
  const [isModalVisible, setModalVisible] = useState(false)

  const toggleWebModal = () => {
    setModalVisible(!isModalVisible)
  }

  console.log('Rendering PrimaryWebNav with children:', children)

  return (
    <>
      <WebNavContainer>
        <WebNavTextContainer>
          <WebNavTextLink text="Browse" href="/browse" pathName={pathName} />
        </WebNavTextContainer>
        <WebNavIconContainer>
          <SearchBox />
        </WebNavIconContainer>
      </WebNavContainer>
      <WebModal isVisible={isModalVisible} toggleModal={toggleWebModal}>
        <Text>Modal Content</Text>
      </WebModal>
    </>
  )
}

export default PrimaryWebNav

browse.jsx

import { router, useNavigation } from 'expo-router'
import { useLayoutEffect } from 'react'
import { Platform } from 'react-native'
import { Content, Screen } from '../../components/containers'
import Filter from '../../components/MobileHeader/Filter'
import MobileMainHeaderTitle from '../../components/MobileHeader/Title'
import { TextButton } from '../../components/ui'
import WebPageHeader from '../../components/WebPageHeader'

const headerRight = () => <Filter />
const headerTitle = () => <MobileMainHeaderTitle action="Browse" item="Recommendations" />

const Browse = () => {
  const { setOptions } = useNavigation()

  useLayoutEffect(() => {
    setOptions({
      headerTitle,
      headerRight
    })
  }, [setOptions])

  return (
    <Screen>
      {Platform.OS === 'web' && <WebPageHeader title="Browse Recommendations" />}
      <Content>
        <TextButton text="Friend 123" onPress={() => router.push('/friends/123')} />
        <TextButton text="Movie 45" onPress={() => router.push('/movies/45')} />
        <TextButton text="Podcast Episode 81" onPress={() => router.push('/podcastEpisodes/81')} />
        <TextButton text="Podcast Series 99" onPress={() => router.push('/podcastSeries/99')} />
        <TextButton text="TV Series 111" onPress={() => router.push('/tvSeries/111')} />
      </Content>
    </Screen>
  )
}

export default Browse

None of the content in browse.jsx displays on web, but it does in iOS. And it shows up on web when I comment out in _layout.jsx:

if (Platform.OS === 'web') {
    return <PrimaryWebNav />
  }

Any idea what the problem is and/or how I can fix it?