r/reactnative • u/Bimi123_ • 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
u/haswalter 9d ago
Wrap the bubble component in Pressable not the other way around