React Native Lottie Animations — Building Facebook Messenger — Reactions
This is the second in a series of blog posts in which i try to build to native features in messenger using react-native
I started working on react-native-messenger as a hobby, I was able to mock the entire app navigation, UI/UX with animations (almost) of which I have detailed in my last story, if you guys haven’t checked it out
I’m right now working on integrating real time messaging using react-native-firebase. I will try to cover all the aspects of firebase like real-time database, cloud functions for server-less notifications and more in the upcoming posts…
In the mean time I got to play with Lottie animations in react-native.
Airbnb has done a great job porting Lottie native modules to react-native. The integration went butter-smooth in android & iOS (Need to manually integrate the libs still …). But the satisfaction you get without spending much effort is something you can’t imagine ..
You can start integrating lottie-react-native following these instructions. If you are not familiar building animations on your own (most of us are) you can search for different animations here at lottie-files, which can be used in the library just by importing the json. You can see the basic example below.
Animations in react-native is different. You need to used Animated, Animatable or Interact-able libs to write some beginner-medium level animations, But Lottie just took things to the next level. I was excited by the limitless possibilities i could try to make the app much better. So I decided to implement Facebook reactions in the app.
Starting with the basic reaction component, I was able to create a flatlist with a card container styles to match the expected output.
And as you can see the final result looks stunning. Animations were smooth since they are implemented at the native level using Lottie. I decided to spice things up using Animated along with Lottie for spring animations upon pressing each reaction.
Each Lottie Component got wrapped with a TouchableWithoutFeedback & Animated.View. Events were handled using onPressIn and onPressOut.
Animated worked fine with react-native , but here comes the issue. You can see the reactions getting cut off upon transform. Overflow issue most commonly found especially on Android (you can see a lot of issues regarding overflow bug on Android) and rarely on iOS. The parent view (FlatList) was clipping off the child view components. I was able to fix this issue on iOS by explicitly providing overflow visibility to FlatList.
Fixing the overflow issue we are back on track. Finishing touches were added by providing animated padding to each reaction, so that the user press will not block the reaction instead it will pop up..
NB: The overflow issue is still present in Android , tried to fix these in android with the help of react-native-view-overflow , but couldn’t figure it out .This is one of the solutions available that solves overflow issue at native level. check out the blog post : Solving View Overflow in Android (ReactNative) by Sibelius Seraphini
Apart from fixing overflow issues, we can see that the integration went smooth. We now have concrete proof that implementing Lottie animations in react-native isn’t time consuming. Its really easy & doesn't affect the app performance.
UPDATE :
Instead of using a list we could implement a PanResponder System that catches the swipe events and animates the reaction based on position.
Animation is an important part of user experience design. It serves as feedback on user actions, informs users of system status, and guides them on how to interact with the interface. Make use of them , Don’t overdo it!!!
Working on firebase integration with offline support along with the chat interface UI with more on the UI & Paper features. Expect it soon…
All these commits are available here
TL;DR : Source Code — React-Native-Messenger (WIP)
Sample APK Download (Updated : v1.2) here
First solve the problem , Then write the code!More articles from me
- Building Facebook Messenger Clone in React Native
- Super Cool Material UI components in React Native!
- Developing Multi-Slider-Switch in React Native
- React Native — A Deep Dive
