1.2.2 • Published 5 years ago

react-native-mix v1.2.2

Weekly downloads
5
License
ISC
Repository
github
Last release
5 years ago

react-native-mix

Document Mask for React Native on iOS and Android.

Based on

react-native-text-input-mask

Como usar:

Setup

npm i react-native-mix

yarn add react-native-mix

Installation

iOS

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

Android

No need to do anything.

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-mix/ios/InputMask'
  1. Run following command
cd ios && pod install

Android

No need to do anything.

Auto Linking

react-native link react-native-mix

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

npm.io

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-mix and add RNMix.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNMix.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.RNMix.RNMixPackage; to the imports at the top of the file
  • Add new RNMixPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-mix'
    project(':react-native-mix').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-mix/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
       compile project(':react-native-mix')
    	```
    </details>
  • Mix: Essa biblioteca é para entradas de documentos, senhas e textos comuns. 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. Você também insere senhas com a opção de ocultar e mostrar a senha com ícone ou apenas textos normais. Tudo isso com uma label animada que só essa biblioteca tem.

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

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

Exemplo de uso somente para CPF:

import { CpfCnpj } from 'react-native-mix';

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

Exemplo de uso somente para CNPJ:

import { CpfCnpj } from 'react-native-mix';

        <Cnpj
            label="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 { Rg } from 'react-native-mix';

        <Rg
            label="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 { Cep } from 'react-native-mix';

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

Exemplo de uso somente para SENHA:

import { InputSecureText } from 'react-native-mix';

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

Exemplo de uso somente para ENTRADA DE TEXTO COMUM:

import { Input } from 'react-native-mix';

        <Input
            label="TEXTO COMUM"
            setData={setDataExample}
            submit={() => secondTextInputRef.current.focus()}
            containerStyle={{ width: "100%" }}
            keyboardTypeSubmit="next"
            placeholderTextColor="#48626f"
            inputStyle={{
                color: "#48626f",
                borderBottomColor: "#48626f",
            }}
        />
1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.2

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago