Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disable the Message background visibility #2506

Open
Jankaz2 opened this issue Jul 9, 2024 · 0 comments
Open

Disable the Message background visibility #2506

Jankaz2 opened this issue Jul 9, 2024 · 0 comments

Comments

@Jankaz2
Copy link

Jankaz2 commented Jul 9, 2024

Issue Description

I want the blue background from the following screen to have a width equal to the bubble. It comes from the <Message> component, but I have no idea how I can disable this. This is annoying because when I use the context menu on the bubble component, this background is visible because it is a different color than the actual bubble. Also, I cannot use the message action just to the right of the bubble because of this wide background.

Of course, there is a width prop but I do not want to hardcode this.

image

Steps to Reproduce / Code Snippets

[FILL THIS OUT]

    const renderMessageBox = useCallback((props: MessageProps<AmigoIMessage>) =>
                <Message {...props} containerStyle={
                    {
                        left: {
                            backgroundColor: 'blue',
                        }
                    }
                }/>
        , []
    )

Because of that, when I want to display message actions next to each bubble, I got this result

image

        <View style={[styles.bubbleWrapper, bubbleProps.position === 'left' && styles.leftBubbleWrapper]}>
            <Bubble
                {...bubbleProps}
                wrapperStyle={{
                    left: styles.leftBubble,
                    right: styles.rightBubble,
                }}
            />
            {bubbleProps.position === 'left' && <View style={styles.dots}>
                <View style={styles.dot} />
                <View style={styles.dot} />
                <View style={styles.dot} />
            </View>}
        </View>

const styles = StyleSheet.create({
    bubbleWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    leftBubbleWrapper: {
        justifyContent: 'flex-start',
    },
    dots: {
        flexDirection: 'column',
        justifyContent: 'center',
        marginLeft: 5,
    },
    dot: {
        width: 4,
        height: 4,
        backgroundColor: '#000',
        borderRadius: 2,
        marginVertical: 2,
    },
    leftBubble: {
        backgroundColor: '#f0f0f0',
        borderRadius: 15,
        padding: 2,
    },
    rightBubble: {
        backgroundColor: '#0078FF',
        borderRadius: 15,
        padding: 2,
    },
});

Additional Information

  • react-native-gifted-chat version: 2.4.0
  • Platform(s) (iOS, Android, or both?): both
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant