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:
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.
|
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:
‘/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:
‘/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 :-
Also Read :
React Native set Padding dynamically on text component on button click
Embed YouTube Video in React Native Android iOS App Using WebView
React Native Scroll To Given FlatList JSON Item in ScrollView Example
React Native Create Custom JSON ListView with Multiple Items Tutorial
Run Test React Native apps in Real Android device using WiFi Network Windows
