Input field with floating label design and mask

3

In the app I'm building I want to use a form with Input style fields in a form Floating label

I tested some libraries that have this type of field and I considered the NativeBase.io better. , but in this I found no way to put mask content, and in none of the other libraries either.

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 with style design Floating Label and content mask?

What I would like is something like using data-mask if it was html, but I did not find anything equivalent in react-native.

I tried to use a library that allows the creation of inputs with mask and join floatingLabel but failed

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',
  },
});
    
asked by anonymous 02.10.2017 / 19:44

0 answers