BottomSheet Component Fails to Function Correctly on Tab Switch or Route Navigation (using expo router)

[boutchaz]

Current Behavior

The BottomSheet component, implemented to handle modal interactions, fails to behave as expected when switching tabs or navigating between routes. It appears that the state or visibility of the component does not update correctly in response to these navigation changes. The issue occurs consistently across all navigation actions that involve tab switches or route transitions.

Expected Behavior

should maintain its state and functionality across different navigation contexts. Switching tabs or routes

Tamagui Version

React Native Version: 0.73.4
Tamagui Version: 1.95.1
Platform Tested: iOS, Android

Platform (Web, iOS, Android)

Platform Tested: iOS, Android

Reproduction

https://github.com/boutchaz/tamagui-sheet-reproduce

System Info

System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 45.86 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 8.19.4 - ~/Documents/swibeco/tamagui-expo/node_modules/.bin/npm
    pnpm: 8.15.5 - ~/.nvm/versions/node/v18.19.0/bin/pnpm
    bun: 1.0.22 - ~/.bun/bin/bun
    Watchman: 2024.04.01.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 124.0.6367.79
    Safari: 17.4.1
  npmPackages:
    @babel/core: ^7.19.3 => 7.24.4 
    @google/semantic-release-replace-plugin: 1.1.0 => 1.1.0 
    @manypkg/cli: ^0.20.0 => 0.20.0 
    @semantic-release/changelog: 6.0.1 => 6.0.1 
    @semantic-release/git: 10.0.1 => 10.0.1 
    @semantic-release/github: 8.0.6 => 8.0.6 
    @semantic-release/npm: 9.0.1 => 9.0.1 
    @semantic-release/release-notes-generator: 10.0.3 => 10.0.3 
    @tamagui/animations-react-native: ^1.95.1 => 1.95.1 
    @tamagui/babel-plugin: ^1.95.1 => 1.95.1 
    @tamagui/config: ^1.95.1 => 1.95.1 
    @tamagui/font-inter: ^1.95.1 => 1.95.1 
    @tamagui/lucide-icons: ^1.95.1 => 1.95.1 
    @tamagui/themes: ^1.95.1 => 1.95.1 
    @types/react: ~18.2.45 => 18.2.79 
    @typescript-eslint/eslint-plugin: ^5.49.0 => 5.62.0 
    @typescript-eslint/parser: ^5.49.0 => 5.62.0 
    babel-plugin-transform-inline-environment-variables: ^0.4.4 => 0.4.4 
    conventional-changelog-conventionalcommits: 5.0.0 => 5.0.0 
    eslint: ^8.21.0 => 8.57.0 
    eslint-config-prettier: ^8.6.0 => 8.10.0 
    eslint-plugin-prettier: ^4.2.1 => 4.2.1 
    eslint-plugin-react: ^7.32.1 => 7.34.1 
    eslint-plugin-simple-import-sort: ^10.0.0 => 10.0.0 
    expo: ^50.0.6 => 50.0.17 
    expo-constants: ~15.4.5 => 15.4.6 
    expo-font: ~11.10.2 => 11.10.3 
    expo-linear-gradient: ~12.7.1 => 12.7.2 
    expo-linking: ~6.2.2 => 6.2.2 
    expo-router: ~3.4.7 => 3.4.8 
    expo-splash-screen: ~0.26.4 => 0.26.4 
    expo-status-bar: ~1.11.1 => 1.11.1 
    prettier: ^2.8.3 => 2.8.8 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-native: 0.73.4 => 0.73.4 
    react-native-gesture-handler: ~2.14.0 => 2.14.1 
    react-native-reanimated: ~3.6.2 => 3.6.3 
    react-native-safe-area-context: 4.8.2 => 4.8.2 
    react-native-screens: ~3.29.0 => 3.29.0 
    react-native-svg: 14.1.0 => 14.1.0 
    semantic-release: 19.0.5 => 19.0.5 
    tamagui: ^1.95.1 => 1.95.1 
    typescript: ^5.3.3 => 5.4.5

[boutchaz]

Screen_Recording_20240425_115640_Expo.Go.mp4

[ehxxn]

when navigating between tabs, it unmounts the content of that tab, which means the sheet is also unmounted!

[boutchaz]

when starting switching tabs the bottom sheets doesn't open.
I added keys to tabs and content tabs to help with identifying elements to change based on what you mentiened regarding if content unmounts than sheet is also unmounted and this is how it looks :

Enregistrement.de.l.ecran.2024-04-25.a.14.50.49.mov

<Tabs
        defaultValue="tab1"
        orientation="horizontal"
        flexDirection="column"
        width="100%"
      >
        <Tabs.List>
          <Tabs.Tab value="tab1">
            <Text>SubTab 1</Text>
          </Tabs.Tab>
          <Tabs.Tab value="tab2">
            <Text>SubTab 2</Text>
          </Tabs.Tab>
          <Tabs.Tab value="tab3">
            <Text>SubTab 3</Text>
          </Tabs.Tab>
        </Tabs.List>

        <Tabs.Content
          value="tab1"
          padding={16}
          key="contact-1"
        >
          <H5 key="contact-1">
            <ContactSupport key="contact-1" />
          </H5>
        </Tabs.Content>
        <Tabs.Content
          value="tab2"
          padding={16}
          key="contact-2"
        >
          <H5 key="contact-2">
            <ContactSupport key="contact-2" />
          </H5>
        </Tabs.Content>
        <Tabs.Content
          value="tab3"
          padding={16}
          key="contact-3r"
        >
          <H5 key="contact-3">
            <ContactSupport key="contact-3" />
          </H5>
        </Tabs.Content>
      </Tabs> 

[bpingris]

dont know if it helps but this behaviour occurs only when the prop modal is set to true (in my case), when leaving it as undefined (or false) the sheet works as expected when navigating between tabs (but it is displayed in the parent element obviously)

also, one dirty fix I've found is to wrap the Sheet in a isOpen check, you lose the unmount animation though :(

const [isOpen, setIsOpen] = useState(false)

return <>
	<Button onClick={() => setIsOpen(true)}>open</Button>
	{isOpen && <Sheet open onOpenChange={setIsOpen}>...</Sheet>}
</>