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.
|
1 |
npm install react-native-confetti-cannon --save |
Screenshot of CMD:
2. Now open your project’s main App.js file and import useState, Image, SafeAreaView, StyleSheet, Text, View, and TouchableOpacity component.
|
1 2 3 |
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.
|
1 |
import ConfettiCannon from 'react-native-confetti-cannon'; |
4. Creating our main export default function component named as App.
|
1 2 3 4 5 |
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.
|
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.
|
1 |
const [clickEvent, SetClickEvent] = useState(false); |
7. Creating a function named as startAnimation(). Using this function we would Fire the animation on button click.
|
1 2 3 4 5 6 7 8 9 10 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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> ); |
9. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 ( <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' } }); |
Screenshots :-
