Chat bubble styling issue - react-native-gifted-chat

Question

I am using react-native-gifted-chat in my react-native application. Chat Bubble style is not same on all bubble. I have used borderRadius: 30, For first message bubble shape is properly shown, from second message bubble shape of bubble is getting differed. I have added the following code:

 <Bubble
                {...props}
                wrapperStyle={{
                    right: {
                        backgroundColor: colors.chatPurple,
                        borderRadius: 30,
                        borderBottomRightRadius: 30,
                        marginBottom: 10,
                        padding: 5,
                        right: 15,
                        justifyContent: "flex-end",
                        alignSelf: 'stretch',
                        marginLeft: 0,
                        alignSelf: "center"
                    },
                    left: {
                        backgroundColor: colors.lightGreen,
                        borderRadius: 30,
                        marginBottom: 20,
                        padding: 5,
                        left: -30
                    }
                }}/>

I would like to get the Bubble shape as same on all Bubbles.

getting same issue, have you got the solution? – kalyani_jamunkar Jul 25 '20 at 07:16 — kalyani_jamunkar, Jul 25 '20 at 07:16

score 1 · Answer 1 · answered Jul 29 '20 at 18:11

Setting the borderRadius for each corner separately (e.g. borderBottomRightRadius) works for me. Simply setting borderRadius won't work because the borderBottomRightRadius, borderTopRightRadius etc. in the react-native-gifted-chat code overrides it, since the more exact style (separate for each corner) always overrides the more general style (same for every corner).

Paras Daryanani · Answer 2 · 2020-10-08T21:02:36.760

I faced a similar issue where I wanted a radius on 3 out of 4 corners, but it only worked for the first bubble:

After setting the BorderRadius properties on the containerToPreviousStyle, containerToNextStyle and containerStyle props, I got it to work as expected:

The code is as follows:

const renderBubble = props => {
    return (
      <Bubble
        {...props}

        {/* copy what you have in wrapperStyle */}

        wrapperStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}

        {/* and paste it into the follow 3 */}

        containerToPreviousStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}
        containerToNextStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}
        containerStyle={{
          right: { borderTopRightRadius: 15 },
          left: { borderTopLeftRadius: 15 },
        }}
      />
    );
  };

score 0 · Answer 3 · answered Apr 02 '21 at 06:43

0

add this bubble with a BordeRadius or just add container style

<Bubble
     {...props}
     wrapperStyle={{
     right: 
     {
        height: 200,
        backgroundColor: 'blue',
     },
}}
/>

answered Apr 02 '21 at 06:43

Pushpendra Chouhan

44
4

score 0 · Answer 4 · answered Sep 01 '21 at 02:14

Use this code

  <Bubble
      {...props}          
         wrapperStyle={{
            right: {
              backgroundColor: '#EFE5D9',
              borderBottomRightRadius: 0,
              borderBottomLeftRadius: 15,
              borderTopRightRadius: 15,
              borderTopLeftRadius: 15,

            },
            left: {
              backgroundColor: '#F9F5F0',
              borderBottomRightRadius: 15,
              borderBottomLeftRadius: 15,
              borderTopRightRadius: 15,
              borderTopLeftRadius: 0,
            }
          }}
     />

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. — Community, Sep 01 '21 at 09:52

Chat bubble styling issue - react-native-gifted-chat

4 Answers4