106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
|
|
import LottieView from 'lottie-react-native';
|
|
import Animated, { FadeInUp } from 'react-native-reanimated';
|
|
import colors from '../../../Constant/Color';
|
|
|
|
const EmdComplete = ({ onNext }: { onNext?: () => void }) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<LottieView
|
|
source={require('../../../lottie/confetti.json')}
|
|
autoPlay
|
|
loop={true}
|
|
style={styles.confetti}
|
|
/>
|
|
|
|
<LottieView
|
|
source={require('../../../lottie/Success.json')}
|
|
autoPlay
|
|
loop={true}
|
|
style={styles.success}
|
|
/>
|
|
|
|
<Animated.Text entering={FadeInUp.delay(400).duration(700)} style={styles.title}>
|
|
EMD Complete
|
|
</Animated.Text>
|
|
|
|
<Animated.Text entering={FadeInUp.delay(700).duration(700)} style={styles.subText} >
|
|
Your submission was successful
|
|
</Animated.Text>
|
|
|
|
<Animated.View entering={FadeInUp.delay(900).duration(700)} style={styles.nextWrapper} >
|
|
<TouchableOpacity activeOpacity={0.85} style={styles.nextBtn} onPress={onNext} >
|
|
<Text style={styles.nextText}>Next</Text>
|
|
</TouchableOpacity>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default EmdComplete;
|
|
|
|
/* ---------------- Styles ---------------- */
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#F8FAFC',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
confetti: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
|
|
success: {
|
|
width: 220,
|
|
height: 220,
|
|
marginTop: -100
|
|
},
|
|
|
|
title: {
|
|
marginTop: 16,
|
|
fontSize: 24,
|
|
fontWeight: '900',
|
|
color: '#0F172A',
|
|
letterSpacing: 0.5,
|
|
},
|
|
|
|
subText: {
|
|
marginTop: 8,
|
|
fontSize: 14,
|
|
color: '#475569',
|
|
},
|
|
|
|
/* ---------- Floating Next Button ---------- */
|
|
nextWrapper: {
|
|
position: 'absolute',
|
|
right: 20,
|
|
bottom: 30,
|
|
},
|
|
|
|
nextBtn: {
|
|
backgroundColor: colors.primary,
|
|
paddingHorizontal: 26,
|
|
paddingVertical: 14,
|
|
borderRadius: 28,
|
|
|
|
shadowColor: colors.primary,
|
|
shadowOffset: { width: 0, height: 8 },
|
|
shadowOpacity: 0.35,
|
|
shadowRadius: 14,
|
|
elevation: 6,
|
|
},
|
|
|
|
nextText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 15,
|
|
fontWeight: '800',
|
|
letterSpacing: 0.4,
|
|
},
|
|
});
|