Different background and text colour for your own messages about stream-chat-react-native HOT 17 CLOSED

Hey @dariuscosden in v3 of the SDK, you can provide a prop - https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#mymessagetheme

from stream-chat-react-native.

@wmonecke if u still struggle with it here are the examples:

1. where to pass myMessageTheme (as @vishalnarkhede said): https://github.com/GetStream/react-native-samples/blob/main/projects/WhatsAppClone/src/utils/WhatsAppChannelWrapper.tsx#L69
2. and how to target my message styles: https://github.com/GetStream/react-native-samples/blob/main/projects/WhatsAppClone/src/theme.ts#L245

from stream-chat-react-native.

Also, changing anything in theme.messageInput.container doesn't seem to affect the MessageInput at all.

I have this in my theme:

'messageInput.container':
    'margin-left: 0; margin-right: 0; border-radius: 0; background-color: white;',

and nothing changed.

other theme stuff work like

'message.text': `background-color: white; padding: 20px 20px 12px 20px; box-shadow: 0px 2px 0px #000000;`

from stream-chat-react-native.

Hey @sregg

Correct use of custom styles is as following:

theme = {
  'messageInput.container': {
    css: 'margin-left: 0; margin-right: 0; border-radius: 0; background-color: white;'
  }
};

Let me know if that works for you :)

from stream-chat-react-native.

Thanks it worked great!
It's weird that message.text worked without css...

from stream-chat-react-native.

Hey @sregg ,

Ideally following should work as well
'message.text': 'background-color: white; padding: 20px 20px 12px 20px; box-shadow: 0px 2px 0px #000000;'. But there was some bug in our sdk because of which it didn't for you. But it has been fixed now as part of v0.3.2

So now, both of the following should work fine:

'message.text': 'background-color: white; padding: 20px 20px 12px 20px; box-shadow: 0px 2px 0px #000000;'

'message.text': {
    css: 'background-color: white; padding: 20px 20px 12px 20px; box-shadow: 0px 2px 0px #000000;'
}

Please let me know if that works for you and feel free to close the issue if everything is fine :)

from stream-chat-react-native.

Closing this issue!! Please reopen if you have some concern :)

from stream-chat-react-native.

I'd like to customize the MessageList component to look something like this:

The current user's message should have a dark background and white text.

I tried to use the theme functionality but didn't find a solution.

It'd be great if most of the colors where named in theme.colors like:

theme.message.text.ownBackgroundColor
theme.message.text.ownTextColor
theme.message.text.otherBackgroundColor
theme.message.text.otherTextColor

Could you please tell me how you managed to achieve this?

from stream-chat-react-native.

Ended up using Sendbird and Gifted Chat

from stream-chat-react-native.

Ended up using Sendbird and Gifted Chat

Wow okay! Thank you for letting me know. Really appreciate it. Is there a reason why you decided to make the switch?

from stream-chat-react-native.

@shravyaramesh because the original question has completely been ignored and still has not been answered to this day? Perhaps for future users and customer retention it would be a good idea to provide an answer? There is nothing in the documentation explaining this very common use case. This is also the top result from google.

There had been proper documentation for 2.x.x, but unfortunately that no longer applies in 3.x.x. The 3.0 cookbook doesn't even have a similar section.

So, how do you provide custom styles to an own message and another user's message? @vishalnarkhede

from stream-chat-react-native.

For any requests which haven't received attention on closed GH issues, please drop us an email at [email protected] to get our attention.

from stream-chat-react-native.

@vishalnarkhede thanks for the quick response. The provided solution does indeed work for v3!

from stream-chat-react-native.

Hey @dariuscosden in v3 of the SDK, you can provide a prop - https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#mymessagetheme

Is this also can be used not in ts?

from stream-chat-react-native.

@vishalnarkhede Sorry but it is becoming quite difficult for me to change the color of my message.

I thought this was gonna do it but it doesn't work. Any ideas?

export const chatTheme: DeepPartial<ChatTheme> = {
  messageSimple: {
    content: {
      messageUser: { color: 'red' },
    },
  },
};

from stream-chat-react-native.

@wmonecke please check this doc for theming markdown - https://getstream.io/chat/docs/sdk/reactnative/guides/message-customization/#message-bubble-with-custom-text-styles--fonts

To only style for my messages, please pass the theme as following prop to Channel component - https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#mymessagetheme

from stream-chat-react-native.

I have found a workaround to achieve this in angular. (hope it still helps)
I tried to find an internal class name that stream uses to differentiate between messages you send and receive and found the following workaround:

.str-chat__message--other .str-chat__message-text span {
    color: black !important;
}

.str-chat__message--me .str-chat__message-text span {
    color: white !important;
}

from stream-chat-react-native.