4
In the app I am building I intend to use in a form fields Input
styled design Floating label
I tested some libraries that have this type of field and considered better the Nativebase.io, however in this I found no way to put content mask, and in none of the other libraries also.
So, is there a way to put the content mask in this field? Or is there a library that allows me to create a Input
styled design Floating Label
and content mask?
What I would like is something like the use of data-mask
if it was html, but I didn’t find anything equivalent in React-Native.
I tried to use a library that allows the creation of inputs with mask and join to floatingLabel but it did not work
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',
},
});