sbycrosz / react-native-credit-card-input Goto Github PK

This repo looks amazing.

Not too familiar with React Native, how much work would it take to port this to React for the web?

Any info would be much appreciated.

It'd be great if the icons were exported in the package so that they can be used elsewhere.

For example, in our app, we want to show what (usually stored) payment method will be charged and we want to show a consistent icon. We can obviously use credit-card-type to discover the type of card, but we can't show the right icon without this being exported.

sonnylazuardi/react-native-credit-card#7

The Message:

Warning: 'keyboardShouldPersistTaps={true}' is deprecated. Use 'keyboardShouldPersistTaps="always"' instead

Hi,
Sorry I'm relatively new in the NodeJs world.
When I use browserify in my project I have this error since I use the 'react-native'credit-cart-input' module:

[00:35:17] Starting 'browserify'...
Error :
D:\dev\myproject\node_modules\react-native-credit-card-input\index.js:1
export * from "./src/";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

Here my gulp task for Browserify:

gulp.task('browserify', function(){
    return browserify({
        extensions: ['.js', '.jsx', '.es6', '.json'],
        entries: 'src/js/main.jsx',
    })
    .transform(babelify.configure({
        presets: ["es2015","react"],
    }))
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('main.js'))
    .pipe(gulp.dest(path.DIST_JS));
});

I see the project use eslint, may be something is missing about this in my dev environnement.

Can you help me ?

Hello!

Is there an option to show the postal code field before the cardholder's name field? Since there's no auto next focus for the name and the name field extends to the edge of the screen, the postal code box is effectively hidden.

Hi All,

I need to change the placeholder colour but it was not reflecting. It remains the default colour.
When i try to change other text colours they got changed.
Here is sample code.

<CreditCardInput
requiresName={true}
cardFontFamily={"Kabel Bk BT"}
placeholderColor={"white"}
inputContainerStyle={{
borderBottomWidth: 1, borderBottomColor:Constants.Colors.White
}}
onChange={this._onChange}
labelStyle={[styles.label,Constants.Fonts.content]}
inputStyle={[styles.input,Constants.Fonts.content]}
autoFocus={false}/>

I'd like to brand the color of the card from purple to blue in my case.

Card Holder field it's a important field, cards can't be processed without cardholder.

Attempt to measure layout but offset or dimensions were NaN

EDIT: On further investigation, only causes error if card or expiry is valid. Invalid values do not cause the error. This is probably caused by the fact that a valid value on either of these fields attempts to focus on the next value.

There's a breaking change on RN36 on flex properties. Both of the forms seem broken.

This may be the laziest request ever, but the font awesome CC icons are not named as nicely as the ones in this library. Stripe card brand strings can be

Visa, American Express, MasterCard, Discover, JCB, Diners Club, or Unknown.

I want to display a list of cards with only icons - not the full cardview (it wont fit nicely in a typical listview), and I dont want to write a switch statement for converting stripe brand to font awesome names.

Im going to submit a PR to export the icons. A lot of text for a very small, pointless change. Maybe there is another soul who can find use in this.

i got an error after i import the component
did anyone got same error??

https://imgur.com/05jKbXR

Unhandled JS Exception: Cannot read property 'string' of undefined
Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication)

Amex CVV is located in the front, ideally the card should not flip this UI is only expected in Visa and MasterCard cards

react: 16.0.0-beta.5
react-native: 0.49.2
react-native-credit-card-input: ^0.3.3

i followed this documentation : https://github.com/sbycrosz/react-native-credit-card-input

Error : _react2.proptypes.string undefined is not an object

Hi!
Thank you for the component.
The issue is not major, obviously.

Entering last digit of card, then switching to expiration and back using backspace allows entering 18 digits. Not sure, if this is a bug or feature.

Latest version

This happens when I put in an invalid value (text turns red) then delete values until its valid again.

Its the same error as #11, any idea how I can sort this? I'm using 0.3.0

Will need to rework the layout because the current implementation doesn't take those extra fields into account.

PRs are welcome!. Ideally it should look like this but with name field.

Is is possible to rename (translate) input fields through additionalInputProps?

Thank you :)

Hi, first off, nice work on this project!

I was hoping to use an onBlur event on the input like with a regular React Native TextInput component... could this be added?

Thanks!

Hello!
Thank you so much for creating this component, it has been very useful.

When I was integrating this component into my application it would run super fast and smooth during development in xcode. But when I deployed to production it is super slow and laggy.
Do you happen to know what I am doing wrong or is this a reoccurring issue.

Tested on multiple iPhones.

I am having trouble getting this component to show up. The input is not visible. I am on RN 0.36.0 and this is for iOS. Any help appreciated! Here is what it looks like:

Hi,
Missed flex: 1 in CreditCardInput.js row 18 .

container: { alignItems: "center", flex: 1 },

Regards

Hello, is it possible to set width to input fields passing it trough props?

Tables are not displayed on markdown files for Props section

Subtitles

• LiteCreditCardInput
• CreditCardInput

I'm writing this as documentations & pleas for help

Currently CCInput set focus to the previous field when a field become empty. e.g. when user changes expiry from "1" to "" with backspace button, CCInput will focus to number field. This will not allow user to removes expiry without triggering the set focus to the previous field logic.

The better logic is to move to previous field when user press backspace on an empty field (following stripe implementation).

The catch is onKeypress prop is not available for RN Android atm, so some workaround might be needed.

PRs are welcome! 🎉

It is suggesting to use KeyboardShouldPersistTaps="always". Can you change it please ?

Hi all,

While trying to enter account numbers like 5017670000005900 the card number using the phone keypad text input loses focus after entering only 12 numbers instead of 16 and focus moves to expiry. Couldn't find any props or options in documentation.

"react-native": "0.47.0",
"react-native-credit-card-input": "0.3.3"

Please Help.

An error ocurrs when someone deletes a wrong credit card number in CreditCardInput component

It seems to be a breaking change on react native view's transform property that's causing this issue. I opened this to remember to update the 'react-native-flip-card' dependency once they fix the following issue.

moschan/react-native-flip-card#26

I'm currently attempting to use this.refs.CCInput.setValues({ number: "4242" }); in my component to update the number value generated in the CreditCardInput component, but keep receiving, "undefined is not an object." Anyone have any thoughts on how to get this to work? I've pasted a snippet of code below:

<CreditCardInput 
        ... 
/>

<TextInput
	onChangeText={(value) => this.refs.CCInput.setValues({ number: value })}
        ...
/>

I am trying to automate some tests on Appium and I am able to create accessibilityLabel, accessibilityTraits, and accessible up to other Components, but when I try to do it using your open source library, it doesn't work. Have you guys experienced this issue before and how would you go about resolving it?

Thanks.

The warning is attached:

The app works fine, but this warning comes up. Can anyone help?
Thank you!

Hello!
I'm trying to set the card values manually but I can't seem to figure out how to do it (If even possible).

I tried adding

values={{expiry: "11/11"}}

prop to the CreditCardInput component but it seems like the values prop doesn't get set.

Is there a way to set the initial values yet?

Enabling horizontal scrolling would alleviate the issue of it being difficult to navigate left/right through input fields, however setting the prop does not work.

it would be cool if it does

Warning: 'keyboardShouldPersistTaps={true}' is deprecated. Use 'keyboardShouldPersistTaps="always"' instead

i think this is due to position absolute in the cardview but take a look of my view

i tried to change the style but it stays and stuck there, anyone know how to solve this?
i fix it by putting padding to the input, but i guess it will not be effective in all phone

Hello @sbycrosz, thanks for sharing this package. Got a question, please is there a way to reset the form data/values such as in a lifecycle event like componentWillUnmount or even after data is retrieved and form is submitted etc?

Thanks.

I recently noticed that focusing of CCInput components in LiteCreditCardInput is not working as expected only when my project's build configuration is set to Release.

• I was using react-native-credit-card-input v0.2.6, but am experiencing this same issue with v0.3.3.
• I've confirmed this issue with React Native versions 0.38, 0.39, and 0.40.
• Temporarily reverting to React Native 0.37 has allowed me to work around this for now.

I'd appreciate any insight or ideas about why this might be happening.

Thanks!

When mounting a simple card input:
<CreditCardInput onChange={this.handleCardChange} />;

a deprecation warning is thrown:
Warning: 'keyboardShouldPersistTaps={true}' is deprecated. Use 'keyboardShouldPersistTaps="always"' instead

Looking for a prop to change the color of the baseText, placeholder & focused text on the CardView Component.

I've changed the hardcoded values but everytime I "yarn upgrade" it overwrites the values.

Could you please add this.

Thanks,
Lewis

I am a using CreditCardInput with autoFocus and when the screen initially renders, the back of the card image is shown. As soon as I enter something, the front of the card image is shown. It doesn't flip to the front image, it just appears. As I type, when I get to CVV, it does flip to the back, as it should. It is just that when the screen is initially rendered, the back card image is shown, but it should be the front card image.

Here is the relevant code:

<CreditCardInput
  autoFocus
  inputStyle={styles.creditCardInput}
  onChange={this.onChange}
/>

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  creditCardInput: {
    color: textColor
  }
})

I am using react-native-credit-card-input 0.3.3 and react-native-flip-card 3.3.3

YellowBox Message: Using with children is deprecated and will be an error in the near future. Please reconsider the layout or use instead.

Postal Code field doesn't return true for valid US ZIP codes. It expects 6 digits to return true.

connectToState.js line 38

validatePostalCode: (postalCode = "") => {
return postalCode.match(/^\d{6}$/) ? "valid" : <--- this has to check for both 5 and 6 digits
postalCode.length > 6 ? "invalid" :
"incomplete";
},

I've attached the graphic I'm referring to