Quiero crear un componente de entrada de React Native para la fecha de vencimiento de una tarjeta de crédito.
Creo que la máscara de entrada debe estar en el formato MM/AA. No estoy seguro acerca de autocompletar con autoCompleteType="cc-exp" y textContentType="creditCardNumber" .
¿Cómo se puede hacer esto sin una biblioteca y solo javascript/mecanografiado?
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} /> );Resolví este problema usando una biblioteca "react-native-masked-text"
importar {TextInputMask} desde '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" />