Only render iOS preview component when opening the action menu

[Nico0302]

Would it be possible to only render the preview component, when the user opens the action menu (the component becomes visible)?

I'm currently developing a notes like app, where I have a FlatList of ContextMenu items for each note item. When the user opens the context menu, he can view a preview of the note. This preview component is pretty expensive to render (richt text support, Latex, etc.).
Currently, all preview components get rendered simultaneously to the children of the ContextMenu.
A delayed render of the preview item would greatly improve performance for such a use case. An alternative would be to provide a callback prop which is called when the preview item gets rendered (e.g. onPreviewWillShow: (event) => void or onMenuWillShow).
Maybe there is also a workaround which would make it possible to check if the component is visible from inside the preview component, but I could not find a solution.

[mpiannucci]

can you show a screenshot or screen recording?

[peterjskaltsis]

Running into the same thing as well.

can you show a screenshot or screen recording?

@mpiannucci this is a breakdown of what I'm seeing:

TLDR: Putting a console.log inside the dropdown preview component shows console many console logs when rendering a ContextMenu as a list item.

Let's say we have a component TransactionView we want as the preview:

const TransactionView = () => {
   console.log("testing if this is rendered yet")
   return ....
}

We put it as the preview like so for TransactionListItem:

export const TransactionListItem = () => {
   return (
      <ContextMenu
         preview={
              <View style={{ height: 350 }}>
                <TransactionView id={transaction.id} />
              </View>
            }
        ....
      />
   )
}

Now when we use the TransactionListItem in eg a FlatList:

const Screen = () => {
   return (
      <FlatList renderItem={TransactionView} data=[...] />  
    )
}

We see the TransactionView rendered many times without actually opening the preview, like this:

 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
 LOG  testing if this is rendered yet
...

This will cause quite a lot of lag if the TransactionView is a heavy component.

Perhaps there's some way to lazy load the preview only on long press etc?

[peterjskaltsis]

A potential solution for this might be some sort of internal state management that listens for whether the menu is opened or not.

This could also enable other things like allowing users to change the appearance of the trigger when the menu is open.

Twitter/X UI has something like this which I don't believe this lib currently supports?

Closed	Open