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.

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.

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

4. Creating our main export default function component named as 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.

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.

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

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

9. Creating Style.

10. Complete Source Code for App.js file:

Screenshots :-

React Native Confetti Cannon Gift Screen Android iOS Example React Native Confetti Cannon Gift Screen Android iOS Example

Leave a Reply

Your email address will not be published. Required fields are marked *