react-native-document-mask/src/Cep.js

Document Mask for React Native on iOS and Android.

import React, { Component } from "react";

import { View, Text } from "react-native";
import PropTypes from "prop-types";
import styles from "./styles";
import Aux from "./settings";

export default class MaskCep extends Component{
    static propTypes = {
            ...Text.propTypes,
            submit: PropTypes.func,
            setData: PropTypes.func.isRequired,
            keyboardTypeSubmit: PropTypes.oneOf(['next', 'done', 'send', 'none']),
            placeholder: PropTypes.string,
            inputStyle: PropTypes.any,
            containerStyle: PropTypes.any,
            placeholderTextColor: PropTypes.string,
            autoFocus: PropTypes.func,
            onFocus: PropTypes.func,
            onEndEditing: PropTypes.func,
    }

    static defaultProps = {
        placeholder: "Digite o número do documento"
    }
    constructor(props){
        super(props)
        this.state = {
            formatted: null,
            masker: "[00000]-[000]"
        }
    }
    


      setNativeProps(nativeProps) {
        this.input.setNativeProps(nativeProps);
      }

    

    set(txt, txtOut) {
        this.setState({ formatted: txt })
        this.props.setData && this.props.setData(txtOut);
    }

    focus() {
        this.input.focus();
      }

      blur() {
        this.input.blur();
      }

      clear() {
        this.input.clear();
      }

      isFocused() {
        return this.input.isFocused();
      }

    _renderCep(){
       const {
            submit,
            keyboardTypeSubmit,
            placeholder,
            inputStyle,
            placeholderTextColor,
            autoFocus,
            onFocus,
            onEndEditing,
        } = this.props;
        return (
            <Aux
            onEndEditing={onEndEditing}
            onFocus={onFocus}
            autoFocus={autoFocus}
            placeholder={placeholder}
            placeholderTextColor={placeholderTextColor}
            value={this.state.formatted}
            onSubmitEditing={() =>
              submit && submit()
            }
            ref={ref => {
                this.input = ref;
              }}
            onChangeText={(formatted, extracted) => {
              console.log(formatted); // +1 (123) 456-78-90
              console.log(extracted); // 1234567890


              this.set(formatted, extracted);
            }}
            mask={this.state.masker}
            keyboardType={"numeric"}
            returnKeyType={keyboardTypeSubmit}
            style={[ styles.input, inputStyle ]}
          />
        );
    }

  render(){
      const { containerStyle } = this.props;
    return (
        <View style={[ styles.container, containerStyle ]}>
           {this._renderCep()}
        </View>

      );
  }


};