Trouble style wrapper with ContextMenu for message in Bubble.
See original GitHub issueIssue 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:9
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@ArietNyshanbaev @fukemy solved the problem by wrapping the context view with its own view with its own styles.