Gift Card Screen using react-native-confetti-cannon

This tutorial explains how to make a Gift Card Screen using react-native-confetti-cannon for Android and IOS devices in react native application. In this example we are going to discuss step by step and that makes you easier to understand. You can create any types of screens using react-native-confetti-cannon. You have seen this type of animations whenever you got a gift vouchers or any cash back amount.

        Download Now     Demo                             

Installation of Dependency

To use gift card like screen animation in react native we need to use react-native-confetti-cannon in our project directory first.

npm install react-native-confetti-cannon --save

Code Snippet to use in layout view :

<ConfettiCannon  count={200}  origin={{ x: -10, y: 0 }} />

React Native confetti explosion and fall Example :

Lets see the complete source code that helps to create Gift Card Screen using react-native-confetti-cannon for Android and IOS devices in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open your react native project folder in CMD or Terminal and execute the below command to install the react-native-confetti-cannon library.

npm install react-native-confetti-cannon --save

Step 3: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 4: Through react , react-native, react-native-confetti-cannon  packages import all required components.

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button,Image } from 'react-native';
import ConfettiCannon from 'react-native-confetti-cannon';

Step 5: Lets create constructor block inside your App component. In the constructor block we have created state variables named as shoot.

constructor() {
    super();
    this.state = {
      //defalt false and if true cannon will be fired
      shoot: false,
    };
  }

Step 6: Lets create componentDidMount lifecycle method/function inside your App component, that helps to shoot cannon in device screen initially.

componentDidMount() {
    //Time out to fire the cannon
    setTimeout(() => {
      this.setState({ shoot: true });
    }, 1000);
  }

Step 7: Lets create _handlePress  method/function inside your App component, that helps to shoot cannon in device, when user clicks on button.

 _handlePress() {
    //To fire the cannon again. You can make your own logic here
    this.setState({ shoot: false });
    setTimeout(() => {
      this.setState({ shoot: true });
    }, 1000);
  }

Step 8: Implement render method inside the App class and wrapped the below layout design inside the root View component.  

render() {
    return (
      <View style={styles.Container}>

        <View style={styles.cardLayoutView}>
          <Text style={styles.paragraphHeading}>Congratulation!!</Text>
          <Text style={styles.paragraph}>You have recieved 500 Rs Cashback</Text>
          <Image style={styles.logo} source={{ uri: 'asset:/images/gift.png' }} />
          <Button
            onPress={() => this._handlePress()}
            title="Claim Now"
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          />
        </View>
        
        {this.state.shoot ? (
          <ConfettiCannon count={200} explosionSpeed={350} origin={{ x: -10, y: 10 }} />
        ) : null}

      </View>
    );
  }

Step 9 : Apply the below style sheet design.

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardLayoutView: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#fff9c4',
  }, 
  paragraphHeading: {
    margin: 24,
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'green',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  logo: {
    height: 130,
    width: 130,
    marginBottom: 20,
  },

Complete Source Code for App.js 

Lets see the complete source code that helps to create Gift Card Screen using react-native-confetti-cannon for Android and IOS devices in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button,Image } from 'react-native';
import ConfettiCannon from 'react-native-confetti-cannon';


export default class App extends Component {

  constructor() {
    super();
    this.state = {
      //defalt false and if true cannon will be fired
      shoot: false,
    };
  }

  componentDidMount() {
    //Time out to fire the cannon
    setTimeout(() => {
      this.setState({ shoot: true });
    }, 1000);
  }
  
  _handlePress() {
    //To fire the cannon again. You can make your own logic here
    this.setState({ shoot: false });
    setTimeout(() => {
      this.setState({ shoot: true });
    }, 1000);
  }


  render() {
    return (
      <View style={styles.Container}>

        <View style={styles.cardLayoutView}>
          <Text style={styles.paragraphHeading}>Congratulation!!</Text>
          <Text style={styles.paragraph}>You have recieved 500 Rs Cashback</Text>
          <Image style={styles.logo} source={{ uri: 'asset:/images/gift.png' }} />
          <Button
            onPress={() => this._handlePress()}
            title="Claim Now"
            color="#841584"
            accessibilityLabel="Learn more about this purple button"
          />
        </View>
        
        {this.state.shoot ? (
          <ConfettiCannon count={200} explosionSpeed={350} origin={{ x: -10, y: 10 }} />
        ) : null}

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardLayoutView: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 24,
    backgroundColor: '#fff9c4',
  }, 
  paragraphHeading: {
    margin: 24,
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    color: 'green',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    textAlign: 'center',
  },
  logo: {
    height: 130,
    width: 130,
    marginBottom: 20,
  },
});

Screenshot : 

This is all about Gift Card Screen using react-native-confetti-cannon. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.