Input field with floating label design and mask

Question

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) // [phone]
                console.log(extracted) // 1234567890
              }}
              mask={"+1 ([000]) [000] [00] [00]"}
            />
          </Item>
        </Form>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
});

Answer 1

I believe you can replace Textinput with your Textinputmask

import React, { Component } from 'react';
import { View, StatusBar, TextInput, Text } from 'react-native';

class FloatingLabelInput extends Component {
  state = {
    isFocused: false,
  };

  handleFocus = () => this.setState({ isFocused: true });
  handleBlur = () => this.setState({ isFocused: false });

  render() {
    const { label, ...props } = this.props;

    const { isFocused } = this.state;
    const labelStyle = {
      position: 'absolute',
      left: 0,
      top: !isFocused ? 18 : 0,
      fontSize: !isFocused ? 20 : 14,
      color: !isFocused ? '#aaa' : '#000',
    };
    return (
      <View style={{ paddingTop: 18 }}>
        <Text style={labelStyle}>
          {label}
        </Text>
        <TextInput
          {...props}
          style={{ height: 26, fontSize: 20, color: '#000', borderBottomWidth: 1, borderBottomColor: '#555' }}
          onFocus={this.handleFocus}
          onBlur={this.handleBlur}
          blurOnSubmit
        />
      </View>
    );
  }
}


export default class App extends Component {
  state = {
    value: '',
  };

  handleTextChange = (newText) => this.setState({ value: newText });

  render() {
    return (
      <View style={{ flex: 1, padding: 30, backgroundColor: '#f5fcff' }}>
        <StatusBar hidden />
        <FloatingLabelInput
          label="Email"
          value={this.state.value}
          onChangeText={this.handleTextChange}
        />
      </View>
    );
  }
}