Context menu flickering(may be it re-render) after modify message data

[fukemy]

Hi, i just found this problem. it's REALLY HARD TO KNOW.

you can see the video here, as I just add a reaction to view:

Screen.Recording.2022-06-17.at.16.39.49.mov

Here is the main layout for view:

<ContextMenuView>
   <Bubble/>
  <ReactionView/>
</ContextMenuView>

Inside onPressMenuItem, i just update message:

const message = props.currentMessage
                            const reactions = message.reactions
                            reactions.push({
                                'id': '1',
                                'type': 200,
                                'date': new Date().getTime(),
                                'by': currentUser.id
                            })
                            message.reactions = reactions
                            handleChoosenMessageReaction(message)

const handleChoosenMessageReaction = React.useCallback((message) => {
        const newMessages = [...messages]
        const index = newMessages.findIndex(mes => mes._id === message._id)
        console.log('index', index)
        if(index > -1){
            newMessages[index].reactions = [...message.reactions]
            console.log('handleChoosenMessageReaction', message.reactions)
            setMessage(newMessages)
        }
    })

I tried to use https://github.com/mpiannucci/react-native-context-menu-view but it's does not make problem, But I want to use your lib because it's better

Please helppp

[fukemy]

@dominicstop plz help bro

[fukemy]

I have tested with assets image, text bubble, it's still flickering

I tried to update message inside Image touch(without show context menu), it's work, The flick only show when context menu action

[dominicstop]

Let me take a look

but i need to know a few things first so i can reproduce the bug:

• react-native version
• library version
• iOS version
• Running on: Debug or Production
• Running on: Simulator or Device

[fukemy]

Hi, I just change update message function inside onMenuDidHide:

onMenuDidHide={() => {
                            console.log('onMenuDidHide')
                            const message = props.currentMessage
                            const reactions = message.reactions
                            reactions.push({
                                'id': '1',
                                'type': 200,
                                'date': new Date().getTime(),
                                'by': currentUser.id
                            })
                            message.reactions = reactions
                            handleChoosenMessageReaction(message)
                        }}

Then it's work without any problem, you can see the video here:

Screen.Recording.2022-06-17.at.16.52.25.mov

THanks god, I can reproduce case of bug, may be I tried to update state when the time animation running

react-native version: "^0.68.0",
library version: "^1.8.0"
iOS version : 15.5
Running on: Production // i change build mode to production
Running on: Simulator

Please help

[fukemy]

I think it's better to update message state inside onPressMenuItem, not onMenuDidHide

[dominicstop]

@fukemy Hey, I've added Test02Screen to reproduce your bug.

Screen.Recording.2022-06-17.at.7.47.06.PM.mov

As a temp. solution, I'm going to update onPressMenuItem so that it fires after the context menu is hidden first

Once i finish releasing the patch, I'll close this issue 😌

[fukemy]

yeah, love u bro

[fukemy]

sorry i will let u close this issue :3

[dominicstop]

Hey, this has been fixed in version 1.8.1 ✨

I also added shouldWaitForMenuToHideBeforeFiringOnPressMenuItem prop to ContextMenuView if you want onPressMenu to fire ASAP.

Here's an excerpt from the docs:

🔤 shouldWaitForMenuToHideBeforeFiringOnPressMenuItem
⚛️ boolean
✳️ Default: true


If set to true, the onPressMenuItem event will be triggered after the context menu has been hidden (i.e. after onMenuDidHide event is triggered).


Set this to false if you want onPressMenuItem to trigger as soon as an item has been pressed in the context menu.


📝 Note: Layout updates while the context menu is transitioning from it's open to hidden state might cause layout bugs (e.g. #43).

Thanks for filing an issue 😌