No app que estou construindo pretendo utilizar em um formulário campos de Input
com design estilo Floating label
Testei algumas bibliotecas que possuem este tipo de campo e considerei melhor a do NativeBase.io, porém neste não encontrei maneira de colocar máscara de conteúdo, e em nenhuma das outra bibliotecas também.
Assim, existe uma maneira de colocar a máscara de conteúdo neste campo? Ou então, existe alguma biblioteca que me permita criar um Input
com design estilo Floating Label
e máscara de conteúdo?
O que eu gostaria é algo como a utilização do data-mask
caso fosse html, porém não achei nada equivalente em react-native.
Tentei usar uma biblioteca que possibilita a criação de inputs com máscara e unir ao floatingLabel porém não deu certo
import React, { Component } from 'react';
import {
StyleSheet,
View,
StatusBar,
Alert
} from 'react-native';
import {
Text,
Form,
Item,
Label,
Input
} from 'native-base';
import TextInputMask from 'react-native-text-input-mask';
export default class Example extends Component {
render() {
return (
<View style={styles.container}>
<Form style={{ width: 340 }}>
<Item floatingLabel>
<Label>Tel</Label>
<TextInputMask
refInput={ref => { this.input = ref }}
onChangeText={(formatted, extracted) => {
console.log(formatted) // +1 (123) 456-78-90
console.log(extracted) // 1234567890
}}
mask={"+1 ([000]) [000] [00] [00]"}
/>
</Item>
</Form>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
});