React Native Confetti Cannon Gift Screen Android iOS Example

Hello developers, So I have been posting this tutorial after few days. In today’s tutorial we would learn about a new react native gift card screen library named as React Native Confetti Cannon. As we all know gift card screen or reward screen is where we would get exiting offers like cashback and discount coupons in the e-commerce mobile applications. Friends in this package we would simulate fireworks like animation which by the way look cools. So let’s get started 🙂 .

Contents in this project React Native Confetti Cannon Gift Screen Android iOS Example:-

1. Before started coding for application we have to manually install the react-native-confetti-cannon in our react native project. So open your react native project root directory in CMD in windows and Terminal in MAC and execute below command.

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

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

Screenshot of CMD:

Screenshot after done installing:

2. Now open your project’s main App.js file and import useState, Image, SafeAreaView, StyleSheet, Text, View, and TouchableOpacity component.

import React, { useState } from 'react';

import { Image, SafeAreaView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import React, { useState } from 'react';

import { Image, SafeAreaView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

3. Import ConfettiCannon from ‘react-native-confetti-cannon’ NPM package.

import ConfettiCannon from 'react-native-confetti-cannon';

1	import ConfettiCannon from 'react-native-confetti-cannon';

4. Creating our main export default function component named as App.

export default function App() {



}

export default function App() {

}

5. Creating State named as animate with state value change function named as SetAnimate. Using this State we would Show and Hide the ConfettiCannon animation component.

  const [animate, SetAnimate] = useState(false);

1	const [animate, SetAnimate] = useState(false);

6. Creating another State named as clickEvent with state change function named as SetClickEvent. Using this state we would change the background color of Touchable opacity button and Text after use clicks on the button. Using this we will give the feel disable button after one click so use can know that the award has been collected message.

  const [clickEvent, SetClickEvent] = useState(false);

1	const [clickEvent, SetClickEvent] = useState(false);

7. Creating a function named as startAnimation(). Using this function we would Fire the animation on button click.

  const startAnimation =()=> {

      SetAnimate(true);
      SetClickEvent(true)

      setTimeout(() => {
        SetAnimate(false);
      }, 5000);

    };

const startAnimation =()=> {

SetAnimate(true);

SetClickEvent(true)

setTimeout(() => {

SetAnimate(false);

}, 5000);

};

8. Creating return() block. Now here we would design our complete Gift card view with firework animation.

return (
    <SafeAreaView style={styles.MainContainer}>
      <View style={styles.MainContainer}>

        <View style={styles.cardView}>

          <Text style={styles.cardHeadingText}> Congrates !! </Text>

          <View style={styles.divider} />

          <Text style={styles.cardSubText}> You got Amazing Cashback... </Text>

          <Image
            style={styles.logoStyle}
            source={{
              uri:
                'https://reactnativecode.com/wp-content/uploads/2021/05/gift_box.jpg',
            }} />

          <Text style={styles.rateText}> $50.00 </Text>

          <TouchableOpacity style={{ backgroundColor: clickEvent ? '#607D8B' : '#0091EA', 
              width: '100%', 
              textAlign: 'center' }} 
            onPress={startAnimation}
            disabled={clickEvent} >

            <Text style={styles.buttonText}> {clickEvent ? 'Reward Claimed Already' : 'Claim Reward'} </Text>
          
          </TouchableOpacity>
        
        </View>
        
        {animate ? 
          <ConfettiCannon
            count={200}
            origin={{x: -10, y: 0}}
          /> 
          : null
        }
      
      </View>
    </SafeAreaView>
  );

return (

<Text style={styles.cardHeadingText}> Congrates !! </Text>

<Text style={styles.cardSubText}> You got Amazing Cashback... </Text>

<Image

style={styles.logoStyle}

source={{

uri:

'https://reactnativecode.com/wp-content/uploads/2021/05/gift_box.jpg',

}} />

<TouchableOpacity style={{ backgroundColor: clickEvent ? '#607D8B' : '#0091EA',

width: '100%',

textAlign: 'center' }}

onPress={startAnimation}

disabled={clickEvent} >

<Text style={styles.buttonText}> {clickEvent ? 'Reward Claimed Already' : 'Claim Reward'} </Text>

</TouchableOpacity>

</View>

{animate ?

<ConfettiCannon

count={200}

origin={{x: -10, y: 0}}

: null

}

</View>

</SafeAreaView>

);

9. Creating Style.

const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#ECEFF1'
  },

  cardView: {
    padding: 24,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff'
  },

  cardHeadingText: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#0091EA',
    marginBottom: 10
  },

  divider: {
    backgroundColor: 'grey',
    width: '100%',
    height: 1,
  },

  cardSubText: {
    margin: 15,
    fontSize: 19,
    textAlign: 'center',
  },

  rateText: {
    margin: 15,
    fontSize: 40,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#0091EA',
  },

  logoStyle: {
    height: 150,
    width: 150,
  },

  buttonText:{
    color: '#fff', 
    fontSize: 18, 
    padding: 10, 
    textAlign: 'center' 
  }
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

padding: 10,

backgroundColor: '#ECEFF1'

cardView: {

padding: 24,

alignItems: 'center',

justifyContent: 'center',

backgroundColor: '#fff'

cardHeadingText: {

fontSize: 22,

fontWeight: 'bold',

textAlign: 'center',

color: '#0091EA',

marginBottom: 10

divider: {

backgroundColor: 'grey',

width: '100%',

height: 1,

cardSubText: {

margin: 15,

fontSize: 19,

textAlign: 'center',

rateText: {

margin: 15,

fontSize: 40,

fontWeight: 'bold',

textAlign: 'center',

color: '#0091EA',

logoStyle: {

height: 150,

width: 150,

buttonText:{

color: '#fff',

fontSize: 18,

padding: 10,

textAlign: 'center'

}

});

10. Complete Source Code for App.js file:

import React, { useState } from 'react';

import { Image, SafeAreaView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import ConfettiCannon from 'react-native-confetti-cannon';

export default function App() {
  
  const [animate, SetAnimate] = useState(false);

  const [clickEvent, SetClickEvent] = useState(false);

  const startAnimation =()=> {

      SetAnimate(true);
      SetClickEvent(true)

      setTimeout(() => {
        SetAnimate(false);
      }, 5000);

    };

  return (
    <SafeAreaView style={styles.MainContainer}>
      <View style={styles.MainContainer}>

        <View style={styles.cardView}>

          <Text style={styles.cardHeadingText}> Congrates !! </Text>

          <View style={styles.divider} />

          <Text style={styles.cardSubText}> You got Amazing Cashback... </Text>

          <Image
            style={styles.logoStyle}
            source={{
              uri:
                'https://reactnativecode.com/wp-content/uploads/2021/05/gift_box.jpg',
            }} />

          <Text style={styles.rateText}> $50.00 </Text>

          <TouchableOpacity style={{ backgroundColor: clickEvent ? '#607D8B' : '#0091EA', 
              width: '100%', 
              textAlign: 'center' }} 
            onPress={startAnimation}
            disabled={clickEvent} >

            <Text style={styles.buttonText}> {clickEvent ? 'Reward Claimed Already' : 'Claim Reward'} </Text>
          
          </TouchableOpacity>
        
        </View>
        
        {animate ? 
          <ConfettiCannon
            count={200}
            origin={{x: -10, y: 0}}
          /> 
          : null
        }
      
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({

  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#ECEFF1'
  },

  cardView: {
    padding: 24,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff'
  },

  cardHeadingText: {
    fontSize: 22,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#0091EA',
    marginBottom: 10
  },

  divider: {
    backgroundColor: 'grey',
    width: '100%',
    height: 1,
  },

  cardSubText: {
    margin: 15,
    fontSize: 19,
    textAlign: 'center',
  },

  rateText: {
    margin: 15,
    fontSize: 40,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#0091EA',
  },

  logoStyle: {
    height: 150,
    width: 150,
  },

  buttonText:{
    color: '#fff', 
    fontSize: 18, 
    padding: 10, 
    textAlign: 'center' 
  }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

import React, { useState } from 'react';

import { Image, SafeAreaView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

import ConfettiCannon from 'react-native-confetti-cannon';

export default function App() {

const [animate, SetAnimate] = useState(false);

const [clickEvent, SetClickEvent] = useState(false);

const startAnimation =()=> {

SetAnimate(true);

SetClickEvent(true)

setTimeout(() => {

SetAnimate(false);

}, 5000);

};

return (

<Text style={styles.cardHeadingText}> Congrates !! </Text>

<Text style={styles.cardSubText}> You got Amazing Cashback... </Text>

<Image

style={styles.logoStyle}

source={{

uri:

'https://reactnativecode.com/wp-content/uploads/2021/05/gift_box.jpg',

}} />

<TouchableOpacity style={{ backgroundColor: clickEvent ? '#607D8B' : '#0091EA',

width: '100%',

textAlign: 'center' }}

onPress={startAnimation}

disabled={clickEvent} >

<Text style={styles.buttonText}> {clickEvent ? 'Reward Claimed Already' : 'Claim Reward'} </Text>

</TouchableOpacity>

</View>

{animate ?

<ConfettiCannon

count={200}

origin={{x: -10, y: 0}}

: null

}

</View>

</SafeAreaView>

);

};

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

padding: 10,

backgroundColor: '#ECEFF1'

cardView: {

padding: 24,

alignItems: 'center',

justifyContent: 'center',

backgroundColor: '#fff'

cardHeadingText: {

fontSize: 22,

fontWeight: 'bold',

textAlign: 'center',

color: '#0091EA',

marginBottom: 10

divider: {

backgroundColor: 'grey',

width: '100%',

height: 1,

cardSubText: {

margin: 15,

fontSize: 19,

textAlign: 'center',

rateText: {

margin: 15,

fontSize: 40,

fontWeight: 'bold',

textAlign: 'center',

color: '#0091EA',

logoStyle: {

height: 150,

width: 150,

buttonText:{

color: '#fff',

fontSize: 18,

padding: 10,

textAlign: 'center'

}

});

Screenshots :-

React Native Confetti Cannon Gift Screen Android iOS Example

Contents in this project React Native Confetti Cannon Gift Screen Android iOS Example:-

Also Read :

Leave a Reply Cancel reply

Search Here