@react-native-ohos/react-native-credit-card-input 1.0.1-rc.1

package/package.json

@@ -0,0 +1,145 @@
+{
+  "name": "@react-native-ohos/react-native-credit-card-input",
+  "version": "1.0.1-rc.1",
+  "description": "React native credit card input component",
+  "source": "./src/index.tsx",
+  "main": "./lib/commonjs/index.js",
+  "module": "./lib/module/index.js",
+  "types": "./lib/typescript/commonjs/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/commonjs/src/index.d.ts",
+      "import": "./lib/module/index.js",
+      "require": "./lib/commonjs/index.js"
+    }
+  },
+  "harmony": {
+    "alias": "react-native-credit-card-input"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del lib",
+    "build": "bob build"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "card-validator": "^10.0.0",
+    "react-native-credit-card-input": "^1.0.0",
+    "react-native-flip-card": "^3.5.7"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^18.5.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.73.1",
+    "@testing-library/react-native": "^12.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.44",
+    "@types/react-native-flip-card": "^3.5.7",
+    "commitlint": "^18.5.0",
+    "del-cli": "^5.1.0",
+    "eslint": "^8.51.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "jest": "^29.7.0",
+    "prettier": "3.3.2",
+    "react": "18.3.1",
+    "react-native": "0.77.1",
+    "react-native-builder-bob": "^0.40.0",
+    "react-test-renderer": "^18.3.1",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": ">= 18.2.0",
+    "react-native": "*"
+  },
+  "resolutions": {
+    "@types/react": "^18.2.44"
+  },
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ],
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "rules": {
+      "react/react-in-jsx-scope": "off",
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false,
+          "singleAttributePerLine": true
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "commonjs",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/CreditCardInput.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useRef } from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import {
+  useCreditCardForm,
+  type CreditCardFormData,
+  type CreditCardFormField,
+} from './useCreditCardForm';
+
+interface Props {
+  autoFocus?: boolean;
+  style?: ViewStyle;
+  labelStyle?: TextStyle;
+  inputStyle?: TextStyle;
+  placeholderColor?: string;
+  labels?: {
+    number: string;
+    expiry: string;
+    cvc: string;
+  };
+  placeholders?: {
+    number: string;
+    expiry: string;
+    cvc: string;
+  };
+  onChange: (formData: CreditCardFormData) => void;
+  onFocusField?: (field: CreditCardFormField) => void;
+  testID?: string;
+}
+
+const s = StyleSheet.create({
+  container: {
+    paddingVertical: 15,
+    paddingHorizontal: 15,
+  },
+  icon: {
+    width: 48,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  numberInput: {},
+  extraContainer: {
+    flexDirection: 'row',
+    marginTop: 15,
+  },
+  expiryInputContainer: {
+    flex: 1,
+    marginRight: 5,
+  },
+  cvcInputContainer: {
+    flex: 1,
+    marginLeft: 5,
+  },
+  input: {
+    height: 40,
+    fontSize: 16,
+    borderBottomColor: 'darkgray',
+    borderBottomWidth: 1,
+    // // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
+    outlineWidth: 0,
+  },
+  inputLabel: {
+    fontSize: 14,
+    fontWeight: 600,
+  },
+});
+
+const CreditCardInput = (props: Props) => {
+  const {
+    autoFocus,
+    style,
+    labelStyle,
+    inputStyle,
+    placeholderColor = 'darkgray',
+    labels = {
+      number: 'CARD NUMBER',
+      expiry: 'EXPIRY',
+      cvc: 'CVC/CVV',
+    },
+    placeholders = {
+      number: '1234 5678 1234 5678',
+      expiry: 'MM/YY',
+      cvc: 'CVC',
+    },
+    onChange = () => {},
+    onFocusField = () => {},
+    testID,
+  } = props;
+
+  const { values, onChangeValue } = useCreditCardForm(onChange);
+
+  const numberInput = useRef<TextInput>(null);
+
+  useEffect(() => {
+    if (autoFocus) numberInput.current?.focus();
+  }, [autoFocus]);
+
+  return (
+    <View
+      style={[s.container, style]}
+      testID={testID}
+    >
+      <View style={[s.numberInput]}>
+        <Text style={[s.inputLabel, labelStyle]}>{labels.number}</Text>
+        <TextInput
+          ref={numberInput}
+          keyboardType="default"
+          style={[s.input, inputStyle]}
+          placeholderTextColor={placeholderColor}
+          placeholder={placeholders.number}
+          value={values.number}
+          onChangeText={(v) => onChangeValue('number', v)}
+          onFocus={() => onFocusField('number')}
+          autoCorrect={false}
+          underlineColorAndroid={'transparent'}
+          testID="CC_NUMBER"
+        />
+      </View>
+
+      <View style={[s.extraContainer]}>
+        <View style={s.expiryInputContainer}>
+          <Text style={[s.inputLabel, labelStyle]}>{labels.expiry}</Text>
+          <TextInput
+            keyboardType="default"
+            style={[s.input, inputStyle]}
+            placeholderTextColor={placeholderColor}
+            placeholder={placeholders.expiry}
+            value={values.expiry}
+            onChangeText={(v) => onChangeValue('expiry', v)}
+            onFocus={() => onFocusField('expiry')}
+            autoCorrect={false}
+            underlineColorAndroid={'transparent'}
+            testID="CC_EXPIRY"
+          />
+        </View>
+
+        <View style={s.cvcInputContainer}>
+          <Text style={[s.inputLabel, labelStyle]}>{labels.cvc}</Text>
+          <TextInput
+            keyboardType="default"
+            style={[s.input, inputStyle]}
+            placeholderTextColor={placeholderColor}
+            placeholder={placeholders.cvc}
+            value={values.cvc}
+            onChangeText={(v) => onChangeValue('cvc', v)}
+            onFocus={() => onFocusField('cvc')}
+            autoCorrect={false}
+            underlineColorAndroid={'transparent'}
+            testID="CC_CVC"
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default CreditCardInput;

package/src/CreditCardView.tsx

@@ -0,0 +1,248 @@
+import {
+  Image,
+  ImageBackground,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+  type ImageSourcePropType,
+  type ViewStyle,
+} from 'react-native';
+import FlipCard from 'react-native-flip-card';
+import Icons from './Icons';
+import { useMemo } from 'react';
+import type { CreditCardIssuer } from './useCreditCardForm';
+
+const CARD_SIZE = { width: 300, height: 190 };
+
+const s = StyleSheet.create({
+  cardContainer: {},
+  cardFace: {
+    backgroundColor: '#444',
+    borderRadius: 10,
+  },
+  cardMagneticStripe: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 30,
+    height: 40,
+    backgroundColor: '#000',
+  },
+  icon: {
+    position: 'absolute',
+    top: 15,
+    right: 15,
+    width: 60,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  baseText: {
+    color: 'rgba(255, 255, 255, 0.5)',
+    backgroundColor: 'transparent',
+  },
+  placeholder: {
+    color: 'rgba(255, 255, 255, 0.5)',
+  },
+  focusedField: {
+    fontWeight: 'bold',
+    color: 'rgba(255, 255, 255, 1)',
+  },
+  number: {
+    fontSize: 21,
+    position: 'absolute',
+    top: 95,
+    left: 28,
+  },
+  name: {
+    fontSize: 16,
+    position: 'absolute',
+    bottom: 20,
+    left: 25,
+    right: 100,
+  },
+  expiryLabel: {
+    fontSize: 9,
+    position: 'absolute',
+    bottom: 40,
+    left: 218,
+  },
+  expiry: {
+    fontSize: 16,
+    position: 'absolute',
+    bottom: 20,
+    left: 220,
+  },
+  amexCVC: {
+    fontSize: 16,
+    position: 'absolute',
+    top: 73,
+    right: 30,
+  },
+  cvc: {
+    fontSize: 16,
+    position: 'absolute',
+    top: 80,
+    right: 30,
+  },
+});
+
+interface Props {
+  focusedField?: 'name' | 'number' | 'expiry' | 'cvc';
+  type?: CreditCardIssuer;
+  name?: string;
+  number?: string;
+  expiry?: string;
+  cvc?: string;
+
+  placeholders?: {
+    number: string;
+    expiry: string;
+    cvc: string;
+    name: string;
+  };
+  style?: ViewStyle;
+
+  fontFamily?: string;
+  imageFront?: ImageSourcePropType;
+  imageBack?: ImageSourcePropType;
+}
+
+const CreditCardView = (props: Props) => {
+  const {
+    focusedField,
+    type,
+    name,
+    number,
+    expiry,
+    cvc,
+    placeholders = {
+      number: '•••• •••• •••• ••••',
+      name: '',
+      expiry: '••/••',
+      cvc: '•••',
+    },
+    imageFront,
+    imageBack,
+    fontFamily = Platform.select({
+      ios: 'Courier',
+      android: 'monospace',
+      web: 'monospace',
+    }),
+    style,
+  } = props;
+
+  const isAmex = type === 'american-express';
+  const shouldShowCardBack = !isAmex && focusedField === 'cvc';
+
+  const cardIcon = useMemo(() => {
+    if (type && Icons[type]) return Icons[type];
+    return null;
+  }, [type]);
+
+  return (
+    <View style={[s.cardContainer, CARD_SIZE, style]}>
+      <FlipCard
+        flipHorizontal
+        flipVertical={false}
+        friction={10}
+        perspective={2000}
+        clickable={false}
+        flip={shouldShowCardBack}
+      >
+        <ImageBackground
+          style={[CARD_SIZE, s.cardFace]}
+          source={imageFront}
+        >
+          {!!cardIcon && (
+            <Image
+              style={[s.icon]}
+              source={{ uri: cardIcon }}
+            />
+          )}
+
+          <Text
+            style={[
+              s.baseText,
+              { fontFamily },
+              s.number,
+              !number && s.placeholder,
+              focusedField === 'number' && s.focusedField,
+            ]}
+          >
+            {!number ? placeholders.number : number}
+          </Text>
+
+          <Text
+            style={[
+              s.baseText,
+              { fontFamily },
+              s.name,
+              !name && s.placeholder,
+              focusedField === 'name' && s.focusedField,
+            ]}
+            numberOfLines={1}
+          >
+            {!name ? placeholders.name : name.toUpperCase()}
+          </Text>
+
+          <Text
+            style={[
+              s.baseText,
+              { fontFamily },
+              s.expiryLabel,
+              s.placeholder,
+              focusedField === 'expiry' && s.focusedField,
+            ]}
+          >
+            MONTH/YEAR
+          </Text>
+          <Text
+            style={[
+              s.baseText,
+              { fontFamily },
+              s.expiry,
+              !expiry && s.placeholder,
+              focusedField === 'expiry' && s.focusedField,
+            ]}
+          >
+            {!expiry ? placeholders.expiry : expiry}
+          </Text>
+
+          {isAmex && (
+            <Text
+              style={[
+                s.baseText,
+                { fontFamily },
+                s.amexCVC,
+                !cvc && s.placeholder,
+                focusedField === 'cvc' && s.focusedField,
+              ]}
+            >
+              {!cvc ? placeholders.cvc : cvc}
+            </Text>
+          )}
+        </ImageBackground>
+
+        <ImageBackground
+          style={[CARD_SIZE, s.cardFace]}
+          source={imageBack}
+        >
+          <View style={s.cardMagneticStripe} />
+          <Text
+            style={[
+              s.baseText,
+              s.cvc,
+              !cvc && s.placeholder,
+              focusedField === 'cvc' && s.focusedField,
+            ]}
+          >
+            {!cvc ? placeholders.cvc : cvc}
+          </Text>
+        </ImageBackground>
+      </FlipCard>
+    </View>
+  );
+};
+
+export default CreditCardView;