question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trouble style wrapper with ContextMenu for message in Bubble.

See original GitHub issue

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). image

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

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
BLOCKMATERIALcommented, Aug 24, 2022

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

0reactions
haxuanvu870commented, Oct 23, 2022

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Soon we are getting more mini/bubble style context-menu ...
my guess is that more of these bubble/popup style menus will show up soon. the next place is probably going to be Immersive...
Read more >
Popup: Overlays | JavaScript UI - w2ui
The plugin will display an overlay under (or above) the element. If element is by the edge of the screen, the overlay will...
Read more >
Styles and Appearances in Angular ContextMenu component
Checkout and learn about Styles and Appearances in Angular ContextMenu component of ... .e-contextmenu-wrapper, To customize the context menu wrapper.
Read more >
Context menus - Components - Human Interface Guidelines
For example, the context menu for a Mail message in the inbox includes ... people won't know where they can use the feature...
Read more >
Untitled
... https://www.telerik.com/kendo-vue-ui/components/wrappers-troubleshooting/ ... -vue-ui/components/scheduler/editing/custom-validation-messages/ daily 0.7 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found