react-native-credit-cards
Version:
A customizable credit card form component for React Native with card flip animation and validation
123 lines (122 loc) • 2.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.styles = void 0;
const react_native_1 = require("react-native");
exports.styles = react_native_1.StyleSheet.create({
container: {
height: 200,
width: '100%',
},
card: {
width: '100%',
height: '100%',
borderRadius: 16,
overflow: 'hidden',
},
gradient: {
flex: 1,
justifyContent: 'space-between',
},
topRow: {
margin: 16,
flexDirection: 'row',
justifyContent: 'space-between',
},
logo: {
height: 40,
maxWidth: 80,
marginTop: 16,
},
logo2: {
width: 60,
height: 30,
marginTop: 16,
},
chip: {
width: 60,
marginTop: 16,
height: 40,
},
number: {
marginHorizontal: 16,
width: react_native_1.Dimensions.get('window').width * .8,
textAlign: 'center',
fontSize: 18,
color: 'white',
letterSpacing: 2
},
bottomRow: {
margin: 24,
marginBottom: 24,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: "flex-end"
},
name: {
color: 'white',
fontSize: 12,
},
expiry: {
color: 'white',
textAlign: "right",
fontSize: 12,
},
expiryTitle: {
fontWeight: "300",
color: 'white',
fontSize: 10,
marginBottom: 4
},
strip: {
height: 40,
backgroundColor: '#000',
marginTop: 20,
borderRadius: 4,
},
cvcContainer: {
alignItems: 'flex-end',
left: -40,
top: -40,
},
cvcLabel: {
color: '#fff',
fontSize: 12,
marginBottom: 4,
},
cvcBox: {
backgroundColor: '#fff',
paddingHorizontal: 12,
marginTop: 4,
width: 60,
paddingVertical: 6,
borderRadius: 6,
},
char: {
fontSize: 20,
width: 14, // sabit genişlik
textAlign: 'center',
lineHeight: 20, // Line height eklendi
// color will be set dynamically
},
cardNumberContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
marginLeft: 24,
marginTop: 8,
alignItems: 'center',
minHeight: 24, // Minimum yükseklik
},
cvcText: {
textAlign: 'center',
fontSize: 16,
color: '#000',
},
slideOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
width: '200%', // Kartın 2 katı genişlik
},
});