3D Flip Credit Card Component For React Native

Description:

A React Native to create customizable, 3D flipping credit cards.

How to use it:

1. Installation.
# Yarn
$ yarn add react-native-3d-card react-native-linear-gradient
# NPM
$ npm i react-native-3d-card react-native-linear-gradient

2. Example usage.

import React, {FunctionComponent, useRef, useState} from 'react';
import {TouchableOpacity, ScrollView, Text, TextInput} from 'react-native';
import {CreditCard3D} from 'react-native-3d-card';
const Example: FunctionComponent = () => {
  const [name, setName] = useState('');
  const [number, setNumber] = useState('');
  const [valid, setValid] = useState('');
  const [cvv, setCVV] = useState('');
  const cardRef = useRef<any>(null);
  function rotateBackward() {
    cardRef?.current?.rotateBackward();
  }
  function rotateForward() {
    cardRef?.current?.rotateForward();
  }
  return (
    <ScrollView
      contentContainerStyle={{paddingHorizontal: 16, paddingVertical: 16}}>
      <CreditCard3D
        numberValue={number}
        nameValue={name}
        cvvValue={cvv}
        expiracyValue={valid}
        ref={cardRef}
      />
      <TextInput
        placeholder="Número do cartão"
        maxLength={number.includes(' ') ? 19 : 16}
        style={{
          marginTop: 16,
          borderColor: '#c1c2c3',
          padding: 8,
          borderRadius: 8,
          borderWidth: 1,
          marginBottom: 10,
        }}
        value={number}
        onChangeText={value => setNumber(value)}
      />
      <TextInput
        placeholder="Nome"
        style={{
          textTransform: 'capitalize',
          borderColor: '#c1c2c3',
          padding: 8,
          borderRadius: 8,
          borderWidth: 1,
          marginBottom: 10,
        }}
        value={name}
        onChangeText={value => {
          setName(value);
        }}
      />
      <TextInput
        placeholder="Valid thru"
        style={{
          textTransform: 'capitalize',
          borderColor: '#c1c2c3',
          padding: 8,
          borderRadius: 8,
          borderWidth: 1,
          marginBottom: 10,
        }}
        value={valid}
        onChangeText={value => {
          setValid(value);
        }}
      />
      <TextInput
        onFocus={() => {
          rotateBackward();
        }}
        onBlur={() => {
          rotateForward();
        }}
        maxLength={4}
        placeholder="CVV"
        style={{
          borderColor: '#c1c2c3',
          padding: 8,
          borderRadius: 8,
          borderWidth: 1,
        }}
        value={cvv}
        onChangeText={value => setCVV(value)}
      />
      <TouchableOpacity
        style={{
          backgroundColor: '#c1ccff',
          elevation: 2,
          alignSelf: 'center',
          borderRadius: 8,
          width: 130,
          height: 40,
          marginTop: 16,
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onPress={() => rotateBackward()}>
        <Text style={{color: '#333345'}}>Rotate Backward</Text>
      </TouchableOpacity>
      <TouchableOpacity
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#c1ccff',
          elevation: 2,
          alignSelf: 'center',
          borderRadius: 8,
          width: 130,
          marginTop: 16,
          height: 40,
        }}
        onPress={() => rotateForward()}>
        <Text style={{color: '#333345'}}>Rotate Forward</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};
export default Example;

3. Available component props.

interface Props {
  /** Distance between card number groupings */
  distanceBetweenCardNumberGroups?: number;
  /** Styles to card number container */
  cardNumberContainerStyle?: ViewStyle;
  /** Styles to front card container */
  frontCardBottomContainerStyle?: ViewStyle;
  /** Styles to card whole container */
  containerStyle?: ViewStyle;
  /** Styles to card number value */
  numberValueStyle?: TextStyle;
  /** Styles to card number placeholder. */
  numberPlaceholderStyle?: ViewStyle;
  /** Card number value */
  numberValue: string;
  /** Card name placeholder. Default = "FULL NAME" */
  namePlaceholder?: string;
  /** Styles to card name value */
  nameValueStyle?: TextStyle;
  /** Card name value */
  nameValue: string;
  /** Styles to expiracy text */
  expiracyTextStyle?: TextStyle;
  /** Styles to expiracy value */
  expiracyValueStyle?: TextStyle;
  /** Card expiracy placeholder. Default = "MM/YY" */
  expiracyPlaceholder?: string;
  /** Card expiracy text. Default = "Valid thru" */
  expiracyText?: string;
  /** Card expiracy value */
  expiracyValue: string;
  /** Styles to front card side container */
  frontSideCardStyle?: ViewStyle;
  /** Styles to back card side container */
  backSideCardStyle?: ViewStyle;
  /** Card safety code text. Default = "Safety code" */
  cvvText?: string;
  /** Card safety code value */
  cvvValue: string;
  /** Styles to safety code value */
  cvvValueStyle?: TextStyle;
  /** Safety code placeholder. Default = "" */
  cvvPlaceholder?: string;
  /** Styles to card safety code text */
  cvvTextStyle?: TextStyle;
  /** Animation duration in miliseconds. Default = 800 */
  animationDuration?: number;
  /** Card height */
  cardHeight?: number | string;
  /** Array of hexstring for gradient color to front side */
  frontSideCardGradientColors?: string[];
  /** Array of hexstring for gradient color to back side */
  backSideCardGradientColors?: string[];
  /** Card number length */
  cardNumberLength?: number;
  /** Card number divide at specified group number */
  dividerNumber?: number;
}