react-native-document-mask
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    react-native-document-mask

    Document Mask for React Native on iOS and Android.

    Based on

    react-native-text-input-mask

    Como usar:

    Setup

     
    npm i react-native-document-mask
     
    yarn add react-native-document-mask
     
    import DocumentMask from "react-native-document-mask";

    Installation

    For RN >= 0.61

    iOS

    1. Add following lines to your target in Podfile
    use_frameworks!
    pod 'RNInputMask', :path => '../node_modules/react-native-document-mask/ios/InputMask'
    
    1. Run following command
    npx pod-install

    Android

    No need to do anything.

    For RN = 0.60.*

    iOS

    1. In XCode, in the project navigator, right click your [your project's name] folder, choose ➜ Add Files to [your project's name]

    Create Swift File

    1. Select Swift FileNext

    Create Swift File

    1. Specify name for example Dummy.swiftCreate

    Create Swift File

    1. Now a pop up is shown select Create Bridging Header

    Create Swift File

    1. Add following line to your target in Podfile
    pod 'RNInputMask', :path => '../node_modules/react-native-document-mask/ios/InputMask'
    
    1. Run following command
    cd ios && pod install

    Android

    No need to do anything.

    For RN < 0.60

    Auto Linking

    react-native link react-native-document-mask

    iOS only: you have to drag and drop InputMask.framework to Embedded Binaries in General tab of Target

    Manual installation

    iOS

    1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
    2. Go to node_modulesreact-native-document-mask and add RNTextInputMask.xcodeproj
    3. In XCode, in the project navigator, select your project. Add libRNTextInputMask.a to your project's Build PhasesLink Binary With Libraries
    4. Run your project (Cmd+R)

    Android

    1. Open up android/app/src/main/java/[...]/MainActivity.java
    • Add import com.RNDocumentMask.RNDocumentMaskPackage; to the imports at the top of the file
    • Add new RNDocumentMaskPackage() to the list returned by the getPackages() method
    1. Append the following lines to android/settings.gradle:
      include ':react-native-document-mask'
      project(':react-native-document-mask').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-document-mask/android')
      
    2. Insert the following lines inside the dependencies block in android/app/build.gradle:
        compile project(':react-native-document-mask')
      
    • DocumentMask: Essa mascara é para cpf e cnpj. Você pode optar por usar apenas um tipo de mascara ou as duas ao mesmo tempo no input, mas a ideia é usar as duas ao mesmo tempo para flexibilizar o trabalho do desenvolvedor e o do usuário.

    Exemplo de uso para os dois tipos documentos ao mesmo tempo:

            <MaskCpfCnpj
                setData={setDataExample}
                submit={() => secondTextInputRef.current.focus()}
                containerStyle={{ width: "100%" }}
                keyboardTypeSubmit="next"
                cpf
                cnpj
                placeholderTextColor="#48626f"
                inputStyle={{
                    color: "#48626f",
                    borderBottomColor: "#48626f",
                }}
            />

    Exemplo de uso somente para CPF:

     
    import { MaskCpfCnpj } from 'react-native-mask-cpf-cnpj';
     
            <MaskCpfCnpj
                placeholder="CPF"
                setData={setDataExample}
                submit={() => secondTextInputRef.current.focus()}
                containerStyle={{ width: "100%" }}
                keyboardTypeSubmit="next"
                cpf
                placeholderTextColor="#48626f"
                inputStyle={{
                    color: "#48626f",
                    borderBottomColor: "#48626f",
                }}
            />

    Exemplo de uso somente para CNPJ:

     
    import { MaskCpfCnpj } from 'react-native-mask-cpf-cnpj';
     
            <MaskCpfCnpj
                placeholder="CNPJ"
                setData={setDataExample}
                submit={() => secondTextInputRef.current.focus()}
                containerStyle={{ width: "100%" }}
                keyboardTypeSubmit="next"
                cnpj
                placeholderTextColor="#48626f"
                inputStyle={{
                    color: "#48626f",
                    borderBottomColor: "#48626f",
                }}
            />

    Exemplo de uso somente para RG:

     
    import { MaskRg } from 'react-native-mask-cpf-cnpj';
     
            <MaskRg
                placeholder="RG"
                setData={setDataExample}
                submit={() => secondTextInputRef.current.focus()}
                containerStyle={{ width: "100%" }}
                keyboardTypeSubmit="next"
                placeholderTextColor="#48626f"
                inputStyle={{
                    color: "#48626f",
                    borderBottomColor: "#48626f",
                }}
            />

    Exemplo de uso somente para CEP:

     
    import { MaskCep } from 'react-native-mask-cpf-cnpj';
     
            <MaskCep
                placeholder="CEP"
                setData={setDataExample}
                submit={() => secondTextInputRef.current.focus()}
                containerStyle={{ width: "100%" }}
                keyboardTypeSubmit="next"
                placeholderTextColor="#48626f"
                inputStyle={{
                    color: "#48626f",
                    borderBottomColor: "#48626f",
                }}
            />

    Install

    npm i react-native-document-mask

    DownloadsWeekly Downloads

    8

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    770 kB

    Total Files

    99

    Last publish

    Collaborators

    • allysonfield