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

The _focus() method in the CreditCardInput is using the NativeModules FFI to call UIManager.measureLayoutRelativeToParent(), which is being deprecated in a future version of React-Native. A big warning is being displayed in the app in development mode.

See: facebook/react-native@e42009b

Hi!!

How can I add style to form fields, example margin?

Regards

Getting this warning in console:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: CCInput, LiteCreditCardInput

I'm using
"react-native-credit-card-input": "0.4.8",
"react-native": "0.61.1",

I could create a PR to suppress the warning, but I'm not sure if it's a good approach.
I would do, as it recommends, move code to componentDidUpdate, won't it break the component?

What do you think?

Hi,

I'm using your library for an app I'm developing and I noticed that if I tap on the autofill option shown below the field (see screenshot below), the page starts freaking out after Google asks me to enter the CVC.

The app basically starts opening and closing the keyboard and quickly moves the focus between the credit card fields and I'm forced to change screen.

My code that handles the credit card input is pretty simple, and I haven't specified many props:

class ChargeStripe extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			// ...
		};
		// stuff
	}

	// methods

	render() {
		if (!this.props.show) {
			return null;
		}
		return (
			<React.Fragment>
				<View
					style={{
						backgroundColor: White,
						shadowColor: Black,
						shadowOffset: {
							width: 0,
							height: 1
						},
						shadowOpacity: 0.22,
						shadowRadius: 2.22,
						elevation: 1,
						borderRadius: heightPercentageToDP(1),
						padding: heightPercentageToDP(1)
					}}
				>
					<LiteCreditCardInput onChange={this.fieldChanged} validColor={Teal600} invalidColor={Red800} />
				</View>
				<PayBtn
					styles={this.props.styles}
					processing={this.props.processing}
					submit={() => this.props.submit(this.generateToken)}
					error={this.props.error}
					disabled={!this.state.valid}
				/>
			</React.Fragment>
		);
	}
}

I noticed that if I change LiteCreditCardInput with CreditCardInput nothing changes and the problem is still there.

Can you help me solve this problem?
Thanks a lot in advance!

The label's width doesn't seem to adapt to the word length, causing different heights between the inputs. Example:

Currently, if you use code like this

return (<CreditCardInput
    labels={{
        number: "Numéro de Carte de Crédit"
    }} />
);

the other labels (for cvc, expiry, etc) will be blank/missing instead of filled in with their default values. It might be nice to fallback to their defaults.

Alternatively, if you'd prefer for some sort of form like this

return (<CreditCardInput
    labels={{
        number: "Numéro de Carte de Crédit",
        cvc: CreditCardInput.defaultValues.labels.cvc,
        expiry: CreditCardInput.defaultValues.labels.expiry,
        ...
    }} />
);

then it would be appreciated if the defaultValues object was exposed via the index.d.ts for Typescript users as well.

Should apply resizeMode: "contain"

When user entered wrong input values i.e. incomplete data there was no visual indication to the user to complete the data entry for example
Entering card no : 4245784754857878 user wont taken to next input box nor red color , user will be in confusion state.

Please help me how to solve this

Hi,

How to disable keyboard when fill all fields with valid value?

I did a function, but when CVV finishes it retraces to focus name again

` const onChange = formData => {
console.log(formData)
state= {
cartãoValido: false
}

  // Check if card items is valid
  var name = formData.status.name;
  var number = formData.status.number;
  var expiry = formData.status.expiry;
  var cvc = formData.status.cvc;

  // Enable save button and dmiss keyboard
  if (name && number && expiry && cvc == 'valid') {
    Keyboard.dismiss()
    this.setState({cartãoValido: true})
  }

}`

When using CardView and filling thebrand key if you use the string "mastercard" it works correctly, but if you use "master-card" (with a dash) it does NOT work anymore. Obviosly the correct string to use if you want to see the brand image of the card seems to be "mastercard" because this is what is returned from the <CreditCardInput> component.

However, my issue is that the naming feels inconsistent, because some of the brands with two words are separated using a dash (such as "american-express"), but then others are separated with an underscore such as "cvc_amex", and other I would expect either dash or an underscore but is all together ("mastercard"). It does not affect the behaviour or use of this library, but when trying to use CardView and use strings, you need to match exactly the formatting the library needs for each brand.

I would propose to include two versions of the strings for the icons that come with this library, one version as the way it is currently now, and another version with a specific formatting (such as dash separated). This is useful when using CardView to display card information and the brand string comes from your server, you can simply format the string in a single way and expect all brand icon images will match a single formatting.

What do you guys think?

Olá Yuri,

Tudo bem?

Vi que comitou algo relacionado a ter o form na Vertical, essa feature já está funcionando?

Se sim, como implementar?

Hey! I am trying to put the inputs form in vertical but I cannot not do it. Is it possible? How should I do it?

since version 5.0.0 of card-validator there is a breaking change where Mastercard enum changed from master-card to mastercard. Since this package is using version 6.2.0 it should be changed in default icons so it doesn't break the defaults

How can i automatically activate postal code when a card number that requires it is added?