Trouble style wrapper with ContextMenu for message in Bubble.

[BLOCKMATERIAL]

Issue Description

Iam developing a chat room using the React-Native library,Gifted-Chat,I needed to make a context menu when I click on a message and I have a problem

I have component and it has its own size, which is larger than the wrapper of the message, I can not wrap the wrapper itself only (maybe).

Bubble.js

`import React from 'react';
import {Bubble, MessageText} from 'react-native-gifted-chat';
import ContextMenu from 'react-native-context-menu-view';
export const renderBubble = props => {
  return (
    <ContextMenu
      actions={[
        {title: 'Pin', systemIcon: 'pin'},
        {title: 'Edit', systemIcon: 'pencil'},
        {
          title: 'Delete',
          destructive: true,
          inlineChildren: true,
          systemIcon: 'trash',
        },
      ]}
      onPress={e => {}}
      // previewBackgroundColor={'transparent'}
      previewWidth={'white'}>
      <Bubble
        {...props}
        textStyle={{
          left: {
            color: props?.name === 'dark' ? '#FFFFFF' : '#0F172A',
          },
          right: {
            color: '#FFFFFF',
          },
        }}
        wrapperStyle={{
          left: {
            backgroundColor: props?.name === 'dark' ? '#1F2937' : '#FFFFFF',
            display: 'flex',
            flexDirection: 'row',
            borderBottomLeftRadius: 0,
          },
          right: {
            backgroundColor: '#1D4ED8',
            left: 0,
            marginBottom: 15,
            borderBottomRightRadius: 0,
          },
        }}
        tickStyle={{color: '#FFFFFF'}}
        timeTextStyle={{
          left: {color: '#94A3B8'},
          right: {color: '#E2E8F0'},
        }}
      />
    </ContextMenu>
  );
};`

Additional Information

• react-native-gifted-chat version: 0.16.3
• Platform(s) (iOS, Android, or both?): both

[stale[bot]]

Sorry, but this issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. BTW Thank you for your contributions 😀 !!!

[fukemy]

hi, did u solved this? same problem here

[fukemy]

[ArietNyshanbaev]

Hi community, Any update in this?

[BLOCKMATERIAL]

@ArietNyshanbaev @fukemy solved the problem by wrapping the context view with its own view with its own styles.

[fukemy]

Hi, can u share some pieces of example codes? Thank so much

[ArietNyshanbaev]

@BLOCKMATERIAL Can you provide us with some sort of code sample please, would highly appreciate it.

[BLOCKMATERIAL]

@BLOCKMATERIAL Can you provide us with some sort of code sample please, would highly appreciate it. I have tried to show how I solved this problem in the gist file. https://gist.github.com/BLOCKMATERIAL/3a24351f890de2f1ee411239c809320b

[haxuanvu870]

@BLOCKMATERIALBạn có thể cung cấp cho chúng tôi một số loại mã mẫu, xin vui lòng đánh giá cao nó. Tôi đã cố gắng trình bày cách tôi giải quyết vấn đề này trong tệp gist. https://gist.github.com/BLOCKMATERIAL/3a24351f890de2f1ee411239c809320b Can I have the sample code for you? I don't know your code on git