Tipsi-stripe: Android: PaymentCardTextField has no propType for nativeProp CreditCardForm.accessibilityLabel

[darrenfurr]

Ran into this exception on Android 6.0.0, API 23
PaymentCardTextField has no propType for nativeProp CreditCardForm.accessibilityLabel of native type String

RN 0.42.3
tipsi: 3.7.1

Any help would be greatly appreciated.

[isnifer]

@darrenfurr please, explain your use case.

[darrenfurr]

@isnifer, Everything is working great on iOS. I just took the same project & ran react-native run-android with my Genymotion simulator of a Pixel C on 6.0.0. As soon as the app launches it throws the error above.

I'm not even using PaymentCardTextField. I use paymentRequestWithAndroidPay & paymentRequestWithCardForm.

Thanks for the help.
-Darren

[isnifer]

@darrenfurr looks like, we don't need export PaymentCardTextField and suggest our users import it from tipsi-stripe/components/PaymentCardTextField. It's a simple solution

[darrenfurr]

I commented the export //export { PaymentCardTextField } out of the index.js, but I'm still getting the error.

[darrenfurr]

I stand corrected, commenting both the import & export out - then having RN monitor the folder in node_modules fixed it.

import Stripe from './Stripe'
//import {PaymentCardTextField} from './components/PaymentCardTextField'

export default Stripe
//export { PaymentCardTextField }

[isnifer]

@darrenfurr yeah, the second one is correct. It's ok as a workaround. But we need to fix it.

[isnifer]

@darrenfurr Hi there, is there any changes?

[temitope]

ran into the same issue will try to follow the workaround

[fr1n63]

Also hitting this issue, tipsi: 4.5.2, rn: 0.42.3 - workaround does work, but it's less than ideal.

[darrenfurr]

@isnifer - Sorry, I used the workaround & haven't updated to the latest version to test.

[temitope]

yes, confirming the workout wworks for me on RN 0.41 but as @fr1n63 mentions it is not ideal as you must remember to modify these files in the node_module folder if you ever do a clean build which happens frequently enough to be not stellar

[fr1n63]

Just to add - I'm having issues with the popups in android, so have tried using PaymentCardTextField directly and the OP issue appears to be a valid one, so any sign of an update? Now on tipsi 4.6.1.

[jordanmkoncz]

I'm actually trying to use PaymentCardTextField in my app and I'm getting this same error. Any suggestions for how to get this working on Android?

Here's the full error output:

`PaymentCardTextField` has no propType for native prop `CreditCardForm.accessibilityLabel` of native type `String`
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
verifyPropTypes
    verifyPropTypes.js:58
requireNativeComponent
    requireNativeComponent.js:94
<unknown>
    PaymentCardTextField.android.js:143
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    index.js:2
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    memberRegisterActions.js:5
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    appActions.js:7
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    RootScreen.js:8
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    Router.js:2
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    App.js:7
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:123
_require
    require.js:107
<unknown>
    index.android.js:4
loadModuleImplementation
    require.js:171
guardedLoadModule
    require.js:116
_require
    require.js:107
global code
    require-1487.js:1

[jordanmkoncz]

I've found a solution. I edited the file /node_modules/tipsi-stripe/src/components/PaymentCardTextField.android.js, replacing the const NativePaymentCardTextField ... section with the following:

const NativePaymentCardTextField = requireNativeComponent('CreditCardForm', PaymentCardTextField, {
  nativeOnly: {
    borderColor: true,
    borderWidth: true,
    cornerRadius: true,
    textColor: true,
    fontFamily: true,
    fontWeight: true,
    fontStyle: true,
    fontSize: true,
    enabled: true,
    onChange: true,

    // Fix "PaymentCardTextField has no propType for native prop" errors.
    pointerEvents: true,
    accessible: true,
    accessibilityLabel: true,
    accessibilityComponentType: true,
    accessibilityLiveRegion: true,
    accessibilityTraits: true,
    importantForAccessibility: true,
    testID: true,
    renderToHardwareTextureAndroid: true,
    shouldRasterizeIOS: true,
    onLayout: true,
    onAccessibilityTap: true,
    onMagicTap: true,
    collapsable: true,
    needsOffscreenAlphaCompositing: true,
  },
})

This was based on the comment https://github.com/facebook/react-native/issues/3685#issuecomment-151210803. I copy/pasted the actual fields from the ReactNativeViewAttributes.UIView section of the file /node_modules/react-native/Libraries/Components/View/ReactNativeViewAttributes.js. It's possible that some of the fields I've included are not necessary, not sure if that would have any unwanted side effects.

If you're applying this solution locally, don't forget to close the React Native packager and then restart it using react-native start --reset-cache, otherwise the changes to these files in node_modules won't be picked up.

[jordanmkoncz]

Any update on this? Seems like it's a pretty easy fix, would be good to get a new release out that resolves this issue.

[isnifer]

@jordanmkoncz please, check 5.3.0. Sure, there is no problem anymore