🚀 Release 0.4.6

-Fix deprecated props
-Update validator card
-Fix postal code US
-Improve style container and input

.eslintrc.json

@@ -1,8 +1,6 @@
 {
   "extends": "airbnb",
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "parser": "babel-eslint",
   "globals": {
     "it": false,
@@ -25,8 +23,11 @@
     "no-console": 0,
     "react/self-closing-comp": 0,
     "no-unused-expressions": 0,
-    "max-len": [2, 150, 4, {"ignoreUrls": true}],
-    "new-cap": [2, { "capIsNewExceptions": ["Map", "List", "Stack", "Record"]}],
+    "max-len": [2, 150, 4, { "ignoreUrls": true }],
+    "new-cap": [
+      2,
+      { "capIsNewExceptions": ["Map", "List", "Stack", "Record"] }
+    ],
     "func-names": 0,
     "quotes": [2, "double"],
     "react/jsx-indent-props": [2, 2],
@@ -35,6 +36,7 @@
     "react/prefer-stateless-function": 0,
     "arrow-body-style": 0,
     "no-nested-ternary": 0,
+    "react/jsx-no-bind": 0,
     "react/prop-types": 2
   }
 }

example/.gitignore

@@ -1,17 +1,14 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# expo
+node_modules/
 .expo/
-
-# dependencies
-/node_modules
-
-# misc
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

example/App.js

@@ -1,8 +1,12 @@
-import React, { Component } from "react";
+import React, { useState } from "react";
 import { StyleSheet, View, Switch } from "react-native";
-import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input";
 
-const s = StyleSheet.create({
+import {
+  CreditCardInput,
+  LiteCreditCardInput,
+} from "react-native-credit-card-input-plus";
+
+const Sty = StyleSheet.create({
   switch: {
     alignSelf: "center",
     marginTop: 20,
@@ -22,53 +26,54 @@ const s = StyleSheet.create({
   },
 });
 
+const ExampleApp = () => {
+  const [liteView, setLiteView] = useState(false);
 
-export default class Example extends Component {
-  state = { useLiteCreditCardInput: false };
-
-  _onChange = (formData) => console.log(JSON.stringify(formData, null, " "));
-  _onFocus = (field) => console.log("focusing", field);
-  _setUseLiteCreditCardInput = (useLiteCreditCardInput) => this.setState({ useLiteCreditCardInput });
-
-  render() {
-    return (
-      <View style={s.container}>
-        <Switch
-          style={s.switch}
-          onValueChange={this._setUseLiteCreditCardInput}
-          value={this.state.useLiteCreditCardInput} />
-
-        { this.state.useLiteCreditCardInput ?
-          (
-            <LiteCreditCardInput
-              autoFocus
-              inputStyle={s.input}
-
-              validColor={"black"}
-              invalidColor={"red"}
-              placeholderColor={"darkgray"}
+  const onChange = (formData) => {
+    console.log(JSON.stringify(formData, null, " "));
+  };
 
-              onFocus={this._onFocus}
-              onChange={this._onChange} />
-          ) : (
-            <CreditCardInput
-              autoFocus
+  const onFocus = (field) => {
+    console.log("focusing", field);
+  };
 
-              requiresName
-              requiresCVC
-              requiresPostalCode
+  return (
+    <View style={Sty.container}>
+      <Switch
+        style={Sty.switch}
+        onValueChange={() => setLiteView((prev) => !prev)}
+        value={liteView}
+      />
 
-              labelStyle={s.label}
-              inputStyle={s.input}
-              validColor={"black"}
-              invalidColor={"red"}
-              placeholderColor={"darkgray"}
+      {liteView ? (
+        <LiteCreditCardInput
+          autoFocus
+          inputStyle={Sty.input}
+          validColor={"black"}
+          invalidColor={"red"}
+          placeholderColor={"darkgray"}
+          onFocus={onFocus}
+          onChange={onChange}
+        />
+      ) : (
+        <CreditCardInput
+          autoFocus
+          requiresName
+          requiresCVC
+          // horizontalScroll={false}
+          requiresPostalCode
+          labelStyle={Sty.label}
+          inputStyle={Sty.input}
+          validColor={"black"}
+          invalidColor={"red"}
+          style
+          placeholderColor={"darkgray"}
+          onFocus={onFocus}
+          onChange={onChange}
+        />
+      )}
+    </View>
+  );
+};
 
-              onFocus={this._onFocus}
-              onChange={this._onChange} />
-          )
-        }
-      </View>
-    );
-  }
-}
+export default ExampleApp;