Building React Native Animated Feedback UI

Recently, while working on a project for my client, I created a feedback UI component. So, here I am sharing how I created that component. Even though its a simple component, the same concept can be used to create similar other interesting components.

Below is the code for small feedback component :

In the above code an Image component is used to render a smiley image with eyes but without mouth. We are creating mouth using  react-native-svg component, so that we can animate it on different user feedback.  Slider component is used to take user feedback input. So when user moves the slider, mouth of the smiley changes from sad to happy with smooth animation (morphing). Also to interpolate the change in value between animation of mouth and movement of slider d3-scale component is used. So  we can keep the feedback range as per our requirement i.e. 1 to 5, 1 to 10, 1 to 100, etc.

Similar to the above component, I created a bigger feedback component with bigger face. Below is the code for the same :

Also while doing some research  I came across another feedback UI. It is much more interesting and I will try to build this and publish on my blog. Here is how that UI looks :

Video Tutorial

2 thoughts on “Building React Native Animated Feedback UI”

Leave a Reply

Your email address will not be published. Required fields are marked *