Create react native animated toggle button component

This is first part of series of tutorial for creating Quiz App using React Native. In this part we will create a animated button component and we will use this component in our Quiz App.  We will be using react-native-animatable package for making animation effect. So, let’s get going.

First, we will install the package to out app using following command :

Next we will create animated toggle button component . Below is the code for the component :

In the above code we are setting button state as true or false. Whenever the button is tapped it will toggle to true or false with a animation effect and change in color.

We are supplying four props to the component which will determine its behaviour. Prop ‘onColor’ determine the color of button when its value is true. The ‘effect’ prop determines the animating effect that will be produced by the button on tapping. The ‘text’ prop will set the text of the button. The prop ‘_onPress’ will get the current status of the button i.e. true or false.

Below is how to use the button in the app with different color and animation effects :

In the next part we will use this button component to create a Quiz App. So, stay tuned by subscribing to the news letter for great react native tutorials coming soon.

Below is the video explanation and demo of above tutorial :