Text input mask for React Native, Android and iOS
MIT License
Text input mask for React Native on iOS and Android.
npm install --save react-native-text-input-mask
# --- or ---
yarn add react-native-text-input-mask
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => true
use_frameworks!
pod install
in the ios
directory.No need to do anything.
react-native link react-native-text-input-mask
iOS only: you have to drag and drop InputMask.framework
to Embedded Binaries
in General tab of Target
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-text-input-mask
and add RNTextInputMask.xcodeproj
libRNTextInputMask.a
to your project's Build Phases
➜ Link Binary With Libraries
Cmd+R
)android/app/src/main/java/[...]/MainActivity.java
import com.RNTextInputMask.RNTextInputMaskPackage;
to the imports at the top of the filenew RNTextInputMaskPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-text-input-mask'
project(':react-native-text-input-mask').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-text-input-mask/android')
android/app/build.gradle
:
compile project(':react-native-text-input-mask')
import TextInputMask from 'react-native-text-input-mask';
...
<TextInputMask
onChangeText={(formatted, extracted) => {
console.log(formatted) // +1 (123) 456-78-90
console.log(extracted) // 1234567890
}}
mask={"+1 ([000]) [000] [00] [00]"}
/>
...
Make sure to mock the following to jest.setup.js
:
jest.mock('react-native-text-input-mask', () => ({
default: jest.fn(),
}))
RedMadRobot Input Mask Android
This project uses semantic versioning: MAJOR.MINOR.PATCH. This means that releases within the same MAJOR version are always backwards compatible. For more info see semver.org.
To use a local copy with your project, it's highly recommended to use https://github.com/wix/wml