Feature Request: OnPress to Context Menu

[ChristopherGabba]

Right now, if you want the context menu to appear, you have to use a longPress to get it to pop up. This ultimately results in you needing to add a "Pressable" or "TouchableOpacity" inside the context menu to get a normal "onPress" function for whatever the context is supporting.

Would be great to have just a normal "onPress" to capture normal press events.

Thanks,
Chris

[mpiannucci]

You can show the menu by using it in menu mode, but the preview won't show.

iOS as a platform doesn't support anything other than long press to trigger context previews

[ChristopherGabba]

@mpiannucci I am not talking about triggering the context view. I'm talking about just adding a basic onPress function for other utilities. Right now, let's say you have an image that you want to add a context menu to. You wrap it in the context menu and now longPress triggers the context menu.

What if you want another function to navigate to a FullImageScreen to show the image just if it's tapped quickly.

Right now you have to wrap the image with Touchable then wrap that with a ContextMenu just so you can get an onPress function. Would be great to not need the Touchable at all and just have a basic onPress function.

Here is a code example:

export const CustomContextMenuWithQuickPress = (props: Props) => {
  const { children, onQuickPress } = props

  const navigation = useAppNavigation()

  const Icons = Platform.select({
    ios: {
      share: "square.and.arrow.up",
      shareOriginal: "arrowshape.turn.up.forward",
      delete: "trash",
    },
    android: {
      share: "baseline_share",
      delete: "baseline_delete",
    },
  })

  function onButtonOnePressed(l) {
    console.log("pressed button one")
  }

  async function onButtonTwoPressed() {
     console.log("pressed button two")
  }

  return (
    <ContextMenu
      style={{ backgroundColor: colors.transparent }}
      actions={[
        { title: "Export", systemIcon: Icons?.share, disabled: !reelFeel.isExportable },
        {
          title: "Share original",
          systemIcon: Icons?.shareOriginal,
          disabled: !reelFeel.sharedMedia.isReshareable,
        },
        { title: "Delete", systemIcon: Icons?.delete, destructive: true },
        { title: "Cancel" },
      ]}
      previewBackgroundColor={colors.transparent}
      onPress={(e) => { // Possibly change the name of this to be onContextItemPress
        switch (e.nativeEvent.index) {
          case 0:
            onButtonOnePressed()
            break
          case 1:
            onButtonTwoPressed()
            break
          case 2:
            onButtonThreePressed()
            break
        }
        // console.warn(`Pressed ${e.nativeEvent.name} at index ${e.nativeEvent.index}`)
      }}
      {...props}
    >Ï
      <TouchableOpacity 
          onPress={onQuickPress} // This does not open the context menu but adds an extra onPress button for the children
          onLongPress={() => {}}  // Do this to resolve open issue #60 
          activeOpacity={1.0}>
        {children}
      </TouchableOpacity>
    </ContextMenu>
  )
}

Essentially you could have three different onPress events:

1. onPreviewPressed which is only available on iOS right now
2. onLongPress which doesn't exist as an available prop but this is what actually opens the context menu
3. onContextItemPressed which is where you have individual actions for each context
4. onPress or onQuickPress (the feature request) that will allow us to add one more function.

Right now there are quite a few issues (#24, #60) open due to the conflicts between embedding a Touchable inside or outside the context menu component and how the press events start acting weird. This may resolve all of that.

[mpiannucci]

Yes this API would be great, but I haven't found a way to trigger the context menu view programmatically and the iOS system handles the long press behavior automatically. I'm open to PRs tho.

BTW, if you are just looking to show the menu on press (not on long press) then just set dropdownMenuMode={true} on ContextMenu

[ChristopherGabba]

@mpiannucci Thanks, I didn't see that property, although it is still not quite what I'm looking for. Throw aside opening the context menu, I'm just looking for an extra onPress function for all the children that I could use for other things.

[indapublic]

+1, I have TouchableOpacity under ContextMenu and it will lead onPress fire when I want to open context menu