Chat Bubble in React Native

Question

I am currently making a chat bubble in react-native. Since I am new to react-native I first tried to make the chat bubble on a browser and then tried to replicate the same in re

Answer 1

Making the arrows appear was harder than I thought it would be, especially when you consider different screen sizes, different platforms (iOS and android). Yes, @Panagiotis Vrs is correct when he mentioned that it won't look 100% same on both platforms. Nevertheless, I tried to achieve the same using react-native-svg and react-native-size-matters.

I am sharing my code, maybe someone can improvise this and make this even better.

The HTML Part

        
          Hey! How are you?
          

           
        
        
      


      
        
          Hey! I am good. How are you?
          
           
        
        
      





       
        
          Check this Image out !!!
          
           
        
        
      


       
        

        
          
           
        
        
      


     
        
          Nice Picture
          

           
        
        
      

The CSS Part

 item: {
       marginVertical: moderateScale(7, 2),
       flexDirection: 'row'
    },
    itemIn: {
        marginLeft: 20
    },
    itemOut: {
       alignSelf: 'flex-end',
       marginRight: 20
    },
    balloon: {
       maxWidth: moderateScale(250, 2),
       paddingHorizontal: moderateScale(10, 2),
       paddingTop: moderateScale(5, 2),
       paddingBottom: moderateScale(7, 2),
       borderRadius: 20,
    },
    arrowContainer: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: -1,
        flex: 1
    },
    arrowLeftContainer: {
        justifyContent: 'flex-end',
        alignItems: 'flex-start'
    },

    arrowRightContainer: {
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
    },

    arrowLeft: {
        left: moderateScale(-6, 0.5),
    },

    arrowRight: {
        right:moderateScale(-6, 0.5),
    }

Now scaling it on different device screens was just trial and error for me. The output right now is good enough for me. Maybe when I have time I will try to improve on this current design.

This is how it looks on iOS:

iPhone 7:

iPhone X:

Now on android unfortunately I wasn't able to make the curve of the arrow appear. Maybe I am doing something wrong. This is how it looks in the end.

Pixel 2:

Nexus 6:

Maybe we can use flex to make the arrow curves look good on android.

In case someone has made a better version of this. Do share. :)