search

sbycrosz / react-native-credit-card-input

Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!
MIT License
1.46k stars 699 forks source link

ViewPropsType deprecated error [fixed] #229

Closed zinlinphyo closed 2 months ago

zinlinphyo commented 1 year ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-credit-card-input@0.4.1 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-credit-card-input/src/CCInput.js b/node_modules/react-native-credit-card-input/src/CCInput.js
index dde3aec..62081b4 100644
--- a/node_modules/react-native-credit-card-input/src/CCInput.js
+++ b/node_modules/react-native-credit-card-input/src/CCInput.js
@@ -6,8 +6,8 @@ import {
   TextInput,
   TouchableOpacity,
   StyleSheet,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 const s = StyleSheet.create({
   baseInputStyle: {
@@ -26,8 +26,8 @@ export default class CCInput extends Component {
     status: PropTypes.oneOf(["valid", "invalid", "incomplete"]),

     containerStyle: ViewPropTypes.style,
-    inputStyle: Text.propTypes.style,
-    labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/CreditCardInput.js b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
index 44f43c8..db6e0d6 100644
--- a/node_modules/react-native-credit-card-input/src/CreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
@@ -8,8 +8,8 @@ import ReactNative, {
   ScrollView,
   Dimensions,
   TextInput,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 import CreditCard from "./CardView";
 import CCInput from "./CCInput";
@@ -48,8 +48,8 @@ export default class CreditCardInput extends Component {
     labels: PropTypes.object,
     placeholders: PropTypes.object,

-    labelStyle: Text.propTypes.style,
-    inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
     inputContainerStyle: ViewPropTypes.style,

     validColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
index a5f166b..fb4ad65 100644
--- a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
@@ -72,7 +72,7 @@ export default class LiteCreditCardInput extends Component {

     placeholders: PropTypes.object,

-    inputStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,

     validColor: PropTypes.string,
     invalidColor: PropTypes.string,

This issue body was partially generated by patch-package.

hayalpc commented 1 year ago

Hi, After update, it goes to old version when i use yarn or npm install. How can i keep new updated files?

ckOfor commented 1 year ago

Fix!

  1. Run yarn add patch-package postinstall-postinstall && yarn add deprecated-react-native-prop-types
  2. Add this script command to package.json "scripts": { "postinstall": "patch-package" }
  3. Open node_modules/react-native-credit-card-input/src/CCInput.js and remove ViewPropTypes, from line 9
  4. Add import ViewPropTypes from 'deprecated-react-native-prop-types' to line 10
  5. Comment out lines 29 and 30 respectively // labelStyle: Text.propTypes.style, // inputStyle: Text.propTypes.style,
  6. Open node_modules/react-native-credit-card-input/src/CreditCardInput.js and remove ViewPropTypes, from line 11
  7. Add import ViewPropTypes from 'deprecated-react-native-prop-types' to line 12
  8. Comment out lines 51 and 52 respectively // labelStyle: Text.propTypes.style, // inputStyle: Text.propTypes.style,
  9. Open node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js and comment out line 75 // inputStyle: Text.propTypes.style,
  10. Run yarn patch-package react-native-credit-card-input

You should have a folder /patches/react-native-credit-card-input+0.4.1.patch


index dde3aec..62081b4 100644
--- a/node_modules/react-native-credit-card-input/src/CCInput.js
+++ b/node_modules/react-native-credit-card-input/src/CCInput.js
@@ -6,8 +6,8 @@ import {
   TextInput,
   TouchableOpacity,
   StyleSheet,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 const s = StyleSheet.create({
   baseInputStyle: {
@@ -26,8 +26,8 @@ export default class CCInput extends Component {
     status: PropTypes.oneOf(["valid", "invalid", "incomplete"]),

     containerStyle: ViewPropTypes.style,
-    inputStyle: Text.propTypes.style,
-    labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/CreditCardInput.js b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
index 44f43c8..db6e0d6 100644
--- a/node_modules/react-native-credit-card-input/src/CreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
@@ -8,8 +8,8 @@ import ReactNative, {
   ScrollView,
   Dimensions,
   TextInput,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 import CreditCard from "./CardView";
 import CCInput from "./CCInput";
@@ -48,8 +48,8 @@ export default class CreditCardInput extends Component {
     labels: PropTypes.object,
     placeholders: PropTypes.object,

-    labelStyle: Text.propTypes.style,
-    inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
     inputContainerStyle: ViewPropTypes.style,

     validColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
index a5f166b..fb4ad65 100644
--- a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
@@ -72,7 +72,7 @@ export default class LiteCreditCardInput extends Component {

     placeholders: PropTypes.object,

-    inputStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,

     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
hayalpc commented 1 year ago

Thank you @ckOfor. I did it and solved my problem :)

ckOfor commented 1 year ago

@hayalpc very happy to help :)

ckOfor commented 1 year ago

For those who are using react-native-flip-card/lib/FlipCard.js please do the following steps steps after step 10 in my comment here

  1. Open node_modules/react-native-flip-card/lib/FlipCard.js and remove ViewPropTypes from line 9
  2. Import import ViewPropTypes from 'deprecated-react-native-prop-types' on line 13
  3. Run yarn patch-package react-native-flip-card

You should have another You should have a folder /patches/react-native-flip-card+3.5.6.patch


index c496da7..5e513a9 100644
--- a/node_modules/react-native-flip-card/lib/FlipCard.js
+++ b/node_modules/react-native-flip-card/lib/FlipCard.js
@@ -8,9 +8,10 @@ import {
   TouchableOpacity,
   Animated,
   Platform,
-  ViewPropTypes
 } from "react-native";

+import ViewPropTypes from 'deprecated-react-native-prop-types'
+
 import S from './Style.js'

 export default class FlipCard extends Component {
nathanael-anstett commented 1 year ago

Fix!

  1. Run yarn add patch-package postinstall-postinstall && yarn add deprecated-react-native-prop-types
  2. Add this script command to package.json "scripts": { "postinstall": "patch-package" }
  3. Open node_modules/react-native-credit-card-input/src/CCInput.js and remove ViewPropTypes, from line 9
  4. Add import ViewPropTypes from 'deprecated-react-native-prop-types' to line 10
  5. Comment out lines 29 and 30 respectively // labelStyle: Text.propTypes.style, // inputStyle: Text.propTypes.style,
  6. Open node_modules/react-native-credit-card-input/src/CreditCardInput.js and remove ViewPropTypes, from line 11
  7. Add import ViewPropTypes from 'deprecated-react-native-prop-types' to line 12
  8. Comment out lines 51 and 52 respectively // labelStyle: Text.propTypes.style, // inputStyle: Text.propTypes.style,
  9. Open node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js and comment out line 75 // inputStyle: Text.propTypes.style,
  10. Run yarn patch-package react-native-credit-card-input

You should have a folder /patches/react-native-credit-card-input+0.4.1.patch

index dde3aec..62081b4 100644
--- a/node_modules/react-native-credit-card-input/src/CCInput.js
+++ b/node_modules/react-native-credit-card-input/src/CCInput.js
@@ -6,8 +6,8 @@ import {
   TextInput,
   TouchableOpacity,
   StyleSheet,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 const s = StyleSheet.create({
   baseInputStyle: {
@@ -26,8 +26,8 @@ export default class CCInput extends Component {
     status: PropTypes.oneOf(["valid", "invalid", "incomplete"]),

     containerStyle: ViewPropTypes.style,
-    inputStyle: Text.propTypes.style,
-    labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/CreditCardInput.js b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
index 44f43c8..db6e0d6 100644
--- a/node_modules/react-native-credit-card-input/src/CreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
@@ -8,8 +8,8 @@ import ReactNative, {
   ScrollView,
   Dimensions,
   TextInput,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 import CreditCard from "./CardView";
 import CCInput from "./CCInput";
@@ -48,8 +48,8 @@ export default class CreditCardInput extends Component {
     labels: PropTypes.object,
     placeholders: PropTypes.object,

-    labelStyle: Text.propTypes.style,
-    inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
     inputContainerStyle: ViewPropTypes.style,

     validColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
index a5f166b..fb4ad65 100644
--- a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
@@ -72,7 +72,7 @@ export default class LiteCreditCardInput extends Component {

     placeholders: PropTypes.object,

-    inputStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,

     validColor: PropTypes.string,
     invalidColor: PropTypes.string,

Thank you so much !

AngelDev0329 commented 1 year ago

Fix!

  1. Run yarn add patch-package postinstall-postinstall && yarn add deprecated-react-native-prop-types
  2. Add this script command to package.json "scripts": { "postinstall": "patch-package" }
  3. Open node_modules/react-native-credit-card-input/src/CCInput.js and remove ViewPropTypes, from line 9
  4. Add import ViewPropTypes from 'deprecated-react-native-prop-types' to line 10
  5. Comment out lines 29 and 30 respectively // labelStyle: Text.propTypes.style, // inputStyle: Text.propTypes.style,
  6. Open node_modules/react-native-credit-card-input/src/CreditCardInput.js and remove ViewPropTypes, from line 11
  7. Add import ViewPropTypes from 'deprecated-react-native-prop-types' to line 12
  8. Comment out lines 51 and 52 respectively // labelStyle: Text.propTypes.style, // inputStyle: Text.propTypes.style,
  9. Open node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js and comment out line 75 // inputStyle: Text.propTypes.style,
  10. Run yarn patch-package react-native-credit-card-input

You should have a folder /patches/react-native-credit-card-input+0.4.1.patch

index dde3aec..62081b4 100644
--- a/node_modules/react-native-credit-card-input/src/CCInput.js
+++ b/node_modules/react-native-credit-card-input/src/CCInput.js
@@ -6,8 +6,8 @@ import {
   TextInput,
   TouchableOpacity,
   StyleSheet,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 const s = StyleSheet.create({
   baseInputStyle: {
@@ -26,8 +26,8 @@ export default class CCInput extends Component {
     status: PropTypes.oneOf(["valid", "invalid", "incomplete"]),

     containerStyle: ViewPropTypes.style,
-    inputStyle: Text.propTypes.style,
-    labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
     validColor: PropTypes.string,
     invalidColor: PropTypes.string,
     placeholderColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/CreditCardInput.js b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
index 44f43c8..db6e0d6 100644
--- a/node_modules/react-native-credit-card-input/src/CreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/CreditCardInput.js
@@ -8,8 +8,8 @@ import ReactNative, {
   ScrollView,
   Dimensions,
   TextInput,
-  ViewPropTypes,
 } from "react-native";
+import ViewPropTypes from 'deprecated-react-native-prop-types'

 import CreditCard from "./CardView";
 import CCInput from "./CCInput";
@@ -48,8 +48,8 @@ export default class CreditCardInput extends Component {
     labels: PropTypes.object,
     placeholders: PropTypes.object,

-    labelStyle: Text.propTypes.style,
-    inputStyle: Text.propTypes.style,
+    // labelStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,
     inputContainerStyle: ViewPropTypes.style,

     validColor: PropTypes.string,
diff --git a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
index a5f166b..fb4ad65 100644
--- a/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
+++ b/node_modules/react-native-credit-card-input/src/LiteCreditCardInput.js
@@ -72,7 +72,7 @@ export default class LiteCreditCardInput extends Component {

     placeholders: PropTypes.object,

-    inputStyle: Text.propTypes.style,
+    // inputStyle: Text.propTypes.style,

     validColor: PropTypes.string,
     invalidColor: PropTypes.string,

It's works for me. Thank you

sbycrosz commented 2 months ago

Should be fixed in the latest version. Sorry for the inconvenience 🙇