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 :

npm install react-native-animatable --save

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

import React, { Component } from 'react';
import {
  Text,
  TouchableWithoutFeedback
} from 'react-native';
import * as Animatable from 'react-native-animatable';
export default class Animbutton extends Component {
  constructor(props) {
     super(props);
     this.state ={
       status: false
     }
   }
   _onPress(){
     this.props._onPress(!this.state.status)
     this.setState({ status: !this.state.status})
     switch (this.props.effect) {
       case 'bounce':
         this.refs.view.bounce(800)
         break;
       case 'flash':
         this.refs.view.flash(800)
         break;
       case 'jello':
         this.refs.view.jello(800)
         break;
       case 'pulse':
         this.refs.view.pulse(800)
         break;
       case 'rotate':
         this.refs.view.rotate(800)
         break;
       case 'rubberBand':
         this.refs.view.rubberBand(800)
         break;
       case 'shake':
         this.refs.view.shake(800)
         break;
       case 'swing':
         this.refs.view.swing(800)
         break;
       case 'tada':
         this.refs.view.tada(800)
         break;
       case 'wobble':
         this.refs.view.wobble(800)
         break;
     }

   }
  render() {
    return (
      <TouchableWithoutFeedback onPress={() => this._onPress()}>
        <Animatable.View ref="view" style={{ margin:10, paddingTop :10, paddingBottom: 10, paddingRight: 20, paddingLeft: 20, backgroundColor: this.state.status ? this.props.onColor : "#bdbdbd", borderRadius:20}}>
          <Text style={{color: this.state.status ? "white" : "#696969", fontWeight: "bold"}}>{this.props.text}</Text>
        </Animatable.View>
      </TouchableWithoutFeedback>
    );
  }
}

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 :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView
} from 'react-native';
import Animbutton from './app/components/animbutton'
export default class QuizApp extends Component {
  render() {
    return (
      <ScrollView>
      <View style={styles.container}>
        <Animbutton onColor={"blue"} effect={"bounce"} _onPress={(status) => {}} text="Bounce" />
        <Animbutton onColor={"green"} effect={"flash"} _onPress={(status) => {}} text="Flash" />
        <Animbutton onColor={"red"} effect={"jello"} _onPress={(status) => {}} text="Jello" />
        <Animbutton onColor={"orange"} effect={"pulse"} _onPress={(status) => {}} text="Pulse" />
        <Animbutton onColor={"purple"} effect={"rotate"} _onPress={(status) => {}} text="Rotate" />
        <Animbutton onColor={"brown"} effect={"rubberBand"} _onPress={(status) => {}} text="Rubberband" />
        <Animbutton onColor={"black"} effect={"shake"} _onPress={(status) => {}} text="Shake" />
        <Animbutton onColor={"blue"} effect={"swing"} _onPress={(status) => {}} text="Swing" />
        <Animbutton onColor={"red"} effect={"tada"} _onPress={(status) => {}} text="Tada" />
        <Animbutton onColor={"orange"} effect={"wobble"} _onPress={(status) => {}} text="Wobble" />
      </View></ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 20
  }
});

AppRegistry.registerComponent('QuizApp', () => QuizApp);

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 :