Animation on message display

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.

[Stefan28BU]

Any updates? This kind of animation is the gold standart for all popular apps with chats (Instagram, Tinder, etc.)

RPReplay_Final1611869692.mov

Pasted my code here for your reference ` const CustomMessage = React.memo((props: any) => {

  const messageHeight = useSharedValue<undefined | number>(undefined);

  const [heightState, setHeightState] = useState(0);

  const [done, setDone] = useState(false);

  const themeColors: ThemeColorTypes = useSelector(
      (state: RootState) => state.setThemeColorsReducer
  );

  const transitionStyle = useAnimatedStyle(() => {
      return {
          height: messageHeight.value,
      };
  }, []);

  const onLayout = (e: LayoutChangeEvent) => {
      const tempHeight = e.nativeEvent.layout.height;

      if (!done) {
          messageHeight.value = 0;

          setHeightState(tempHeight);
      }
  };

  useEffect(() => {
      if (heightState !== 0) {
          setDone(true);
          messageHeight.value = withSpring(heightState, springConfig);
      }
  }, [heightState]);

  return (
      <Reanimated.View
          onLayout={onLayout}
          style={[
              {
                  position: heightState !== 0 ? undefined : 'absolute',
                  overflow: 'hidden',
              },
              transitionStyle,
          ]}
      >
          <Message {...props} />
      </Reanimated.View>
  );

});

`