Building feedback UI

React Native UI Challenge #1

Image for post
Image for post
Credits to Bill Labus

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:

Emojis designed by Freepik

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!

Written by

Developer living in Berlin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store