zips-react-native-sdk-test
Version:
Lightweight ZIPS Payment Gateway SDK for React Native - Complete payment solution with card payments, wallet payments (AfrMoney & ZApp), netbanking, and native UI design
122 lines (121 loc) • 4.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef } from 'react';
import { View, StyleSheet, Animated, Dimensions } from 'react-native';
const { width: screenWidth } = Dimensions.get('window');
const ShimmerLoader = ({ width = 100, height = 20, borderRadius = 4, style, }) => {
const shimmerAnimation = useRef(new Animated.Value(0)).current;
useEffect(() => {
const startShimmerAnimation = () => {
Animated.loop(Animated.sequence([
Animated.timing(shimmerAnimation, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}),
Animated.timing(shimmerAnimation, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}),
])).start();
};
startShimmerAnimation();
}, [shimmerAnimation]);
const opacity = shimmerAnimation.interpolate({
inputRange: [0, 1],
outputRange: [0.3, 0.8],
});
return (_jsx(View, { style: [styles.container, { width, height, borderRadius }, style], children: _jsx(Animated.View, { style: [
styles.shimmer,
{
opacity,
borderRadius,
},
] }) }));
};
export const BankShimmer = ({ count = 6 }) => {
return (_jsx(View, { style: styles.bankGridContainer, children: Array.from({ length: count }).map((_, index) => (_jsxs(View, { style: styles.bankShimmerItem, children: [_jsx(ShimmerLoader, { width: 60, height: 40, borderRadius: 8, style: styles.logoShimmer }), _jsx(ShimmerLoader, { width: 80, height: 12, borderRadius: 4, style: styles.nameShimmer }), _jsx(ShimmerLoader, { width: 60, height: 10, borderRadius: 4, style: styles.locationShimmer })] }, index))) }));
};
export const PaymentMethodShimmer = ({ count = 4, }) => {
return (_jsx(View, { style: styles.paymentMethodGridContainer, children: Array.from({ length: count }).map((_, index) => (_jsxs(View, { style: styles.paymentMethodShimmerItem, children: [_jsx(ShimmerLoader, { width: 56, height: 56, borderRadius: 16, style: styles.iconShimmer }), _jsx(ShimmerLoader, { width: 100, height: 16, borderRadius: 4, style: styles.titleShimmer }), _jsx(ShimmerLoader, { width: 80, height: 12, borderRadius: 4, style: styles.subtitleShimmer })] }, index))) }));
};
const styles = StyleSheet.create({
container: {
backgroundColor: '#F3F4F6',
overflow: 'hidden',
},
shimmer: {
flex: 1,
backgroundColor: '#E5E7EB',
},
// Bank Shimmer Styles
bankGridContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 0, // Remove padding to match NetBanking
},
bankShimmerItem: {
width: (screenWidth - 112) / 3, // Match NetBanking calculation exactly
alignItems: 'center',
padding: 12,
marginBottom: 12,
borderRadius: 16,
backgroundColor: '#FFFFFF',
borderWidth: 2,
borderColor: '#E5E7EB',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 3,
minHeight: 120,
justifyContent: 'center',
},
logoShimmer: {
marginBottom: 8,
},
nameShimmer: {
marginBottom: 4,
},
locationShimmer: {},
// Payment Method Shimmer Styles
paymentMethodGridContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 24,
gap: 12,
},
paymentMethodShimmerItem: {
width: (screenWidth - 64) / 2,
minHeight: 160,
marginBottom: 16,
padding: 18,
borderRadius: 20,
backgroundColor: '#FFFFFF',
borderWidth: 2,
borderColor: '#E5E7EB',
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 4,
},
shadowOpacity: 0.08,
shadowRadius: 12,
elevation: 5,
},
iconShimmer: {
marginBottom: 12,
},
titleShimmer: {
marginBottom: 4,
},
subtitleShimmer: {},
});
export default ShimmerLoader;