Auxiliary view becomes unpressable when adding a preview

[andreaslydemann]

When I use renderPreview to add a preview, my auxiliary view becomes unpressable. Buttons in the auxiliary view won't do anything besides closing down the context menu (as if I'm pressing the background directly).

I have created an example below to reproduce the issue. The issue with pressing the auxiliary view is fixed as soon as you remove the renderPreview prop.

<ContextMenuView
  renderAuxiliaryPreview={() => (
    <View style={{ backgroundColor: 'grey' }}>
      <TouchableOpacity onPress={() => console.log('test')}>
        <Text>Example Auxiliary</Text>
      </TouchableOpacity>
    </View>
  )}
  previewConfig={{
    previewType: 'CUSTOM',
  }}
  renderPreview={() => (
    <View style={{ backgroundColor: 'white' }}>
      <Text>Example Preview</Text>
    </View>
  )}
  menuConfig={{
    menuTitle: 'ExampleActions',
    menuItems: [
      {
        actionKey: 'key-01',
        actionTitle: 'Example Action #1',
      },
      {
        actionKey: 'key-02',
        actionTitle: 'Example Action #2',
      },
      {
        actionKey: 'key-03',
        actionTitle: 'Example Action #3',
      },
    ],
  }}
>
  <View style={{ backgroundColor: 'white' }}>
    <Text>Example Component</Text>
  </View>
</ContextMenuView>

I looked around in the library, and think it has something to do with the logic around detaching the preview and auxiliary view from its parent view or creation of the touch handlers. At least in the ContextMenuView on line 359 you can set shouldAutoDetachSubviews to false on the RNIWrapperView for the preview. Then there is only the auxiliary view as a detached view, and it's pressable again. Maybe one view is blocking the other. Not sure if that knowledge is helpful.

[Jonatthu]

@dominicstop I have the same problem, any help on this?

[morajabi]

Auxiliary view is completely un-pressable for me in v2.

[nandorojo]

Hey guys, we will look into this in the next week or so. We are working on a major rewrite so bear with us as we try to fix everything.

[nandorojo]

This should be fixed now. See the upgrade guide here: https://github.com/dominicstop/react-native-ios-context-menu/issues/77#issuecomment-1790890221

[andreaslydemann]

That's great, thanks @nandorojo and @dominicstop 👏

@nandorojo I'm using zeego, so I suppose that library needs a new release before this will work for me?

[nandorojo]

If you're using specific props on the auxiliary then yes. Otherwise you'll just need to upgrade this lib to v2.

I believe Zeego needs to upgrade for a few minor breaking changes. @dominicstop they're just changes on the auxiliary config right?

[dominicstop]

hi sorry for the late reply

i haven't made any changes yet to the props/types in v2 (almost everything has been on the native side)

the code for the aux. preview has been extracted and rewritten in a separate swift library called ContextMenuAuxiliaryPreview — most of the changes are internal, but i did change how the transitions are configured

this what the new aux. preview config looks like in swift (it's mostly the same, i just needed to rename/move things around)

https://github.com/dominicstop/react-native-ios-context-menu/assets/18517029/12c2ef1f-2057-4498-859c-27218004f791

https://github.com/dominicstop/react-native-ios-context-menu/assets/18517029/2aa1c63d-5bf2-4db9-803d-a6cfb01f198d

i'm planning on just making a function in the js-side that transforms the old config to the new one, so there won't be any breaking changes (hopefully haha)

and then combine the two configs together (e.g. type AuxiliaryPreviewConfig = AuxiliaryPreviewConfigDeprecated | AuxiliaryPreviewConfigNew — this way, the new config will be optional to use haha

however, replacing the native aux. preview logic with the new one will take a bit of refactoring though, and ContextMenuAuxiliaryPreview isn't complete yet (+ it hasn't gone through thorough testing, so it might be buggy)