Building feedback UI
React Native UI Challenge #1
I discovered the above gif while browsing Dribbble. You can interact with the component by either tapping on a feeling or by dragging the colored emoji horizontally. The facial expression animates as well as the caption below an emoji.
This component was mainly built using the Animated API and PanResponder. After finishing the interactions, the last thing missing was the animation of the face. However, I had no idea how to realize that. The video on the left shows the point, where I had no clue, how to go on.
In the end I decided to go with an alternative animation: Instead of animating the eyes and the mouth, I’m animating the whole face by fading from one state to the other. I know, it’s not as sexy as the original one, but it’s something.
Check out the video below, to see it in action:
You can find all the code on Github and do whatever you want with this!
Also, thanks to Brent Vatne, you can go to Exponent and try it out yourself.
Hey! My name is Yousef and I’m doing UI challenges in React Native. The idea is to recreate UI designs from Dribbble screenshots and popular apps using React Native. If you like it, please hit the ❤️ button and follow me for more challenges!
