I want to create a React Native input component for a credit card expiration date.
I believe I should input mask should be in the format for MM/YY. I'm not sure about autofill with autoCompleteType="cc-exp" and textContentType="creditCardNumber".
How can this be done without a library and only javascript/typescript?
InputCreditCardExpirationDate.tsx
// React Hooks: State
const [value, setValue] = useState<string>('');
const formatMMY = (string: string): string => {
// HOW?
};
// On Change
const onChange = (text: string): void => {
// MM/YY
text = formatMMY(text);
if (text.length >= 1) {
// Set State
setValue(text);
// Props: On Change Text
onChangeText(text);
}
};
return (
<Input
value={value}
placeholder={placeholder || 'Expires'}
label={label ? label : 'Expires'}
keyboardType="numeric"
onChangeText={onChange}
autoCompleteType="cc-exp" // Android Only
textContentType="creditCardNumber" // iOS Only
maxLength={7}
darkMode={darkMode || false}
/>
);
I solved this issue by using a library "react-native-masked-text"
import { TextInputMask } from 'react-native-masked-text'
...
<TextInputMask
placeholder="mm / yy"
style={styles.inputLine}
placeholderTextColor="#4D4D4D"
refInput={ref =>{setExDateRef(ref)}}
includeRawValueInChangeText={true}
onChangeText={(maskedText) => { setCardExpiry(maskedText); }}
value={cardExpiry}
type={'custom'}
options={{mask: '99/99'}}
keyboardType={'numeric'}
onSubmitEditing={() => {cvvRef.focus() }}
returnKeyType="next"
/>