Whatsapp chat Bubble

[Uttu316]

Issue Description

How can I create a message Bubble like a Whatsapp Bubble? Time must be at the same line for a single line message otherwise below it.
The bubble should have a minimum width and message text should be flex-start and time would be flex-end.

I tried to restyle the Bubble and Time component but nothing achieved so far.

Steps to Reproduce / Code Snippets

Expected Results

[Raphaelinyang]

how are you able to make foreign users chat appear on the left?

[Uttu316]

Check documentation.

[Raphaelinyang]

at where?

[Raphaelinyang]

<GiftedChat messages={messages} onSend={handleSend} user={{ id: user.uid, name: user.displayName, avatar: user.photoURL }} renderBubble={renderBubble} placeholder='Type your message here...' isTyping= {true} renderSend={renderSend} alwaysShowSend scrollToBottom scrollToBottomComponent={scrollToBottomComponent} renderSystemMessage={renderSystemMessage} />

function renderBubble(props) { return ( // Step 3: return the component <Bubble {...props} wrapperStyle={{ right: { // Here is the color change backgroundColor: 'grey' }, left: { backgroundColor: 'green' } }} textStyle={{ right: { color: '#fff' } }} /> ); }

please, where is the issue coming from?

[Raphaelinyang]

Check documentation.

i have checked the npm documentation

[hackrx]

Hey @Uttu316 can you please share the code for the text input UI you have made here,
also are you able to use onTextChanged property or onChangeText or onEndEditing (see #1874)

[kalyanijamunkar10]

@Uttu316 , any luck on this? Facing same issue.

[Uttu316]

Hey @Uttu316 can you please share the code for the text input UI you have made here,
also are you able to use onTextChanged property or onChangeText or onEndEditing (see #1874)

Use this prop
onInputTextChanged={e => {
if (e === '') {
setIsTyping(false);
} else {
setIsTyping(true);
}
}}
and this is how I did it. Hope it would help

[Uttu316]

@Uttu316 , any luck on this? Facing same issue.

@Uttu316 , any luck on this? Facing same issue.

No, Did you find anything? Please tell me something about it?

[Uttu316]

Check documentation.

i have checked the npm documentation

Pass messages array in messages prop. and give right side user id in user prop. Thats it!

[Raphaelinyang]

please, i will really appreciate it, if you can show me how you did yours, cos ive tried this method, and its not working

Check documentation.

i have checked the npm documentation

Pass messages array in messages prop. and give right side user id in user prop. Thats it!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.