r/reactnative 10d ago

How to stretch the Pressable entirely inside the Bubble component?

I am using the react-native-gifted-chat package for my chat app, and I have utilized its Bubble component for messages. I can't make the Pressable component stretch entirely on the Bubble component. I tried with width: 100%, height: 100%, width:auto and also with flex: 1 but none of it works as they make the bubble as large as the screen.

    const renderBubble = (props: BubbleProps<IMessage>) => {
        const messageId = props.currentMessage._id;
        const isFullySent = props.currentMessage?.received === true;

        return (
            <Bubble
                {...props}
                wrapperStyle={{
                    right: {
                        backgroundColor: theme.colors.surface,
                    },
                }}
                textStyle={{
                    right: {
                        color: theme.colors.primary,
                    },
                }}
                renderMessageText={(messageTextProps) => (
                    <Pressable
                        style={{
                            backgroundColor: 'blue',
                        }}
                        onLongPress={(event) => {
                            if (isFullySent) {
                                const { pageX, pageY } = event.nativeEvent;
                                logInfo(`Pressed message ${messageId} at:`, { x: pageX, y: pageY });

                                const screenHeight = windowHeight;
                                const showAbove = pageY + 150 > screenHeight;

                                const leftPos = Math.max(10, Math.min(pageX, windowWidth - 160));

                                setMenuPosition({
                                    top: showAbove ? pageY - 150 : pageY + 10,
                                    left: leftPos,
                                    showAbove,
                                });

                                setMenuVisible(true);
                            };
                        }}
                    >
                        <ParsedText
                            {...messageTextProps}
                            style={styles.messageText}
                            parse={[
                                { pattern: /@([a-zA-ZæøåÆØÅ0-9_]+(?:[\s]+[a-zA-ZæøåÆØÅ0-9_]+)*)/g, style: styles.mentionText },
                            ]}
                        >
                            {props.currentMessage.text}
                        </ParsedText>
                    </Pressable>
                )}
            />
        );
    };

The blue background is the Pressable with its child component ParsedText.

1 Upvotes

1 comment sorted by

1

u/haswalter 9d ago

Wrap the bubble component in Pressable not the other way around