react-native-credit-cards
Version:
A customizable credit card form component for React Native with card flip animation and validation
118 lines (117 loc) • 2.52 kB
TypeScript
export declare const styles: {
container: {
height: number;
width: "100%";
};
card: {
width: "100%";
height: "100%";
borderRadius: number;
overflow: "hidden";
};
gradient: {
flex: number;
justifyContent: "space-between";
};
topRow: {
margin: number;
flexDirection: "row";
justifyContent: "space-between";
};
logo: {
height: number;
maxWidth: number;
marginTop: number;
};
logo2: {
width: number;
height: number;
marginTop: number;
};
chip: {
width: number;
marginTop: number;
height: number;
};
number: {
marginHorizontal: number;
width: number;
textAlign: "center";
fontSize: number;
color: string;
letterSpacing: number;
};
bottomRow: {
margin: number;
marginBottom: number;
flexDirection: "row";
justifyContent: "space-between";
alignItems: "flex-end";
};
name: {
color: string;
fontSize: number;
};
expiry: {
color: string;
textAlign: "right";
fontSize: number;
};
expiryTitle: {
fontWeight: "300";
color: string;
fontSize: number;
marginBottom: number;
};
strip: {
height: number;
backgroundColor: string;
marginTop: number;
borderRadius: number;
};
cvcContainer: {
alignItems: "flex-end";
left: number;
top: number;
};
cvcLabel: {
color: string;
fontSize: number;
marginBottom: number;
};
cvcBox: {
backgroundColor: string;
paddingHorizontal: number;
marginTop: number;
width: number;
paddingVertical: number;
borderRadius: number;
};
char: {
fontSize: number;
width: number;
textAlign: "center";
lineHeight: number;
};
cardNumberContainer: {
flexDirection: "row";
flexWrap: "wrap";
marginLeft: number;
marginTop: number;
alignItems: "center";
minHeight: number;
};
cvcText: {
textAlign: "center";
fontSize: number;
color: string;
};
slideOverlay: {
position: "absolute";
top: number;
left: number;
right: number;
bottom: number;
width: "200%";
};
};