React-native-gifted-chat: Animation on message display

[redwind]

Sorry, this is not a bug report

Any one has using telegram or whatsapp chat, we can see animation on message display, it's smoothly. So i would like to consult any idea for this animation.

As we know, gifted-chat force render from bottom by use
transform: [ { scaleY: -1 }, ]
this is nice trick, but using this, message has been displayed immediately when data prop change. I tried to run animation to change message's height from 0 to fixed height at message's componentDidMount but it doesn't work as expected; cause ListView still render a blank row for new message.
Another test, i remove all transform trick, then using:
scrollToEnd({animation:true})
to run animation scroll on message income, it's smoothly. But we have to scroll to bottom when access to list chat, it's a bad ux.

So, any one has any idea to help me ?

Thanks all !!!

[vgorte]

Hello @redwind,
I don't know if I understood your problem. So you want to animate new messages right?
Why don't you just animate the bubble component in renderBubble() instead of the messages ?

I use a framework called animatable to animate my messages but you can create your own animations just as easy.
In my case it could look something like this:

  renderBubble(props) {
    return (
      <Animatable.View animation={bounceInLeft} duration={400}>
        <Bubble {...props}
              wrapperStyle={{
                 left: {
                 backgroundColor: '#f0f0f0',
             }
        />
      </Animatable.View>
    );
}

So every bubble component gets created and is encapsulated in a view that slides in from left to right, so the whole component will be animated that way.

I hope this was helpful. If not, please correct my misunderstanding of your question.

[brunocascio]

Hi!

As mentioned @vgorte,

Using Animatable library and renderBubble function, you can set your custom animations.

[redwind]

@vgorte , @brunocascio
Thanks for your reply, you're right.
But before animation start, listview render blank row, will cause animation seem ugly.
another case, wrap bubble by Animatable will cause apply animation for all message when listview's data initialised.
As you can see in whatsapp or Tele, when new messages's comming, it smooth show from bottom.