zeego: [iOS] Trigger children component disappears when navigating back on react-navigation stack

On iOS, when navigating from a screen that uses DropdownMenu to a new screen, and then going back to the previous screens, the components inside DropdownMenu.Trigger disappears forever. See below for example and repro:

Demo

https://user-images.githubusercontent.com/6837599/180454095-ef0fc707-8060-49dc-bac7-2d4790b45b4a.mov

Workaround

Set detachPreviousScreen: false on the next screen options which prevents the DropdownMenu from detaching in the first place, but may cause performance problems.

Repro

<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <ThemedChip
      key={availableOptions[0]}
      isSelected={!isDefault}
      label={capitalize(getChipLabel(chosenOption, type))}
      rightComponent={
        <ThemedIcon
          name="chevron-down"
          color={isDefault ? lightColors.primary : 'white'}
          size={16}
          style={tw('ml-1')}
        />
      }
    />
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    {availableOptions.map(availableOption => (
      <DropdownMenu.Item
        key={`${availableOptions[0]}-${availableOption}`}
        onSelect={() => {
          onToggleOption?.(availableOption, type)
        }}
      >
        <DropdownMenu.ItemTitle>
          {capitalize(availableOption.split('_').pop())}
        </DropdownMenu.ItemTitle>
        {availableOption === chosenOption && (
          <DropdownMenu.ItemIcon iosIconName="checkmark" />
        )}
      </DropdownMenu.Item>
    ))}
  </DropdownMenu.Content>
</DropdownMenu.Root>

Dependencies

"dependencies": {
  "@react-native-masked-view/masked-view": "0.2.7",
  "@react-navigation/bottom-tabs": "^6.3.2",
  "@react-navigation/devtools": "^6.0.8",
  "@react-navigation/material-top-tabs": "^6.2.2",
  "@react-navigation/native": "^6.0.11",
  "@react-navigation/native-stack": "^6.7.0",
  "@react-navigation/stack": "^6.2.2",
  "expo": "^46.0.0-beta.6",
  "react": "18.2.0",
  "react-native": "0.69.2",
  "react-native-reanimated": "^2.9.1",
  "react-native-safe-area-context": "4.3.1",
  "react-native-screens": "~3.15.0",
  "react-native-shared-element": "^0.8.4",
  "react-navigation-shared-element": "^3.1.3",
  "zeego": "^0.4.0"
  ...
}

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 21 (15 by maintainers)

Most upvoted comments

@nandorojo looks like its fixed with the latest version of react-native-ios-context-menu!

Ok so I’m getting a similar issue in my app of the trigger disappearing…it happens when i scroll far down a flatlist in my app. Will try to figure this out.