react-native-text-input-mask
Text input mask for React Native on iOS and Android.Examples
Setup
npm install --save react-native-text-input-mask
# --- or ---
yarn add react-native-text-input-mask
Installation
For RN >= 0.60iOS
- Configure pods (static or dynamic linking)
Podfile
. Linking is not required in React Native 0.60 and above.pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => true
Dynamic Framework ( Podfile has useframeworks! )
Add following lines to your target in Podfile
if it doesnt exist. Linking is not required in React Native 0.60 and above.use_frameworks!
- Run
pod install
in theios
directory.
Android
No need to do anything.For RN < 0.60
WARNING! This is no longer officially supported, these instructions are out of date and may no longer work, we recommend upgrading to a newer version of React Native.
Link
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 TargetManual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-text-input-mask
and addRNTextInputMask.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNTextInputMask.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
import com.RNTextInputMask.RNTextInputMaskPackage;
to the imports at the top of the file
- Add new RNTextInputMaskPackage()
to the list returned by the getPackages()
method- Append the following lines to
android/settings.gradle
:
3. Insert the following lines inside the dependencies block in
android/app/build.gradle`:
```compile project(':react-native-text-input-mask')
```
Usage
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]"}
/>
...
Testing
Jest
Make sure to mock the following tojest.setup.js
:
jest.mock('react-native-text-input-mask', () => ({
default: jest.fn(),
}))
More info
RedMadRobot Input Mask AndroidRedMadRobot Input Mask IOS