react-native-text-input-mask
v3.2.0TypeScript
Text input mask for React Native.
0/weekUpdated 2 years agoMITUnpacked: 54.4 KB
Published by Martin Treurnicht
npm install react-native-text-input-maskreact-native-text-input-mask
Text input mask for React Native on iOS and Android.
Examples
!React Native Text Input Mask iOS
!React Native Text Input Mask Android
Setup
``bash
npm install --save react-native-text-input-mask
--- or ---
yarn add react-native-text-input-mask
`
Installation
For RN >= 0.60
#### iOS
1. Configure pods (static or dynamic linking)
Static Library ( Podfile has no use_frameworks! )
Add following lines to your target in Podfile. Linking is not required in React Native 0.60 and above.
`ruby`
pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text', :modular_headers => true
Dynamic Framework ( Podfile has use_frameworks! )
Add following lines to your target in if it doesnt exist. Linking is not required in React Native 0.60 and above.
`
use_frameworks!
2. Run pod install in the ios directory.
#### Android
No need to do anything.
For RN < 0.60
$3
$3
`
bash
react-native link react-native-text-input-mask
`iOS only: you have to drag and drop
to Embedded Binaries in General tab of Target
$3
#### iOS
1. In XCode, in the project navigator, right click
Libraries ➜ Add Files to [your project's name]
2. Go to ➜ react-native-text-input-mask and add RNTextInputMask.xcodeproj
3. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project ()#### Android
1. Open up
android/app/src/main/java/[...]/MainActivity.java
- Add to the imports at the top of the file
- Add new RNTextInputMaskPackage() to the list returned by the getPackages() method
2. Append the following lines to android/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')
3. Insert the following lines inside the dependencies block in :
`
compile project(':react-native-text-input-mask')
Usage
javascript
import TextInputMask from 'react-native-text-input-mask';
...
console.log(formatted) // +1 (123) 456-78-90
console.log(extracted) // 1234567890
}}
mask={"+1 ([000]) [000] [00] [00]"}
/>
...
`Testing
$3
Make sure to mock the following to
:
`javascript
jest.mock('react-native-text-input-mask', () => ({
default: jest.fn(),
}))
``More info
RedMadRobot Input Mask Android
Versioning
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.
Local Development and testing
To use a local copy with your project, it's highly recommended to use https://github.com/wix/wml