Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/react-native-text-input-mask/react-native-text-input-mask
Text input mask for React Native, Android and iOS
https://github.com/react-native-text-input-mask/react-native-text-input-mask
android input-mask inputmask mask mask-android mask-ios maskededittext maskedinput maskedtextfield react-native
Last synced: about 1 month ago
JSON representation
Text input mask for React Native, Android and iOS
- Host: GitHub
- URL: https://github.com/react-native-text-input-mask/react-native-text-input-mask
- Owner: react-native-text-input-mask
- License: mit
- Created: 2017-07-29T14:39:19.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-01-20T21:48:32.000Z (5 months ago)
- Last Synced: 2024-04-23T02:36:41.214Z (about 1 month ago)
- Topics: android, input-mask, inputmask, mask, mask-android, mask-ios, maskededittext, maskedinput, maskedtextfield, react-native
- Language: Kotlin
- Homepage:
- Size: 813 KB
- Stars: 1,176
- Watchers: 15
- Forks: 306
- Open Issues: 84
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-react-native - react-native-text-input-mask ★383 - Text input mask for Android and iOS, native implementation RedMadRobot libraries (Components / UI)
README
# react-native-text-input-mask
Text input mask for React Native on iOS and Android.
## Examples
## 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 `Podfile` 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
### 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
```bash
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
### Manual installation
#### iOS
1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2. Go to `node_modules` ➜ `react-native-text-input-mask` and add `RNTextInputMask.xcodeproj`
3. In XCode, in the project navigator, select your project. Add `libRNTextInputMask.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
4. Run your project (`Cmd+R`)
#### Android
1. Open up `android/app/src/main/java/[...]/MainActivity.java`
- Add `import com.RNTextInputMask.RNTextInputMaskPackage;` 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 `android/app/build.gradle`:
```
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
### Jest
Make sure to [mock](https://jestjs.io/docs/en/manual-mocks#mocking-node-modules) the following to `jest.setup.js`:
```javascript
jest.mock('react-native-text-input-mask', () => ({
default: jest.fn(),
}))
```
## More info
[RedMadRobot Input Mask Android](https://github.com/RedMadRobot/input-mask-android)
[RedMadRobot Input Mask IOS](https://github.com/RedMadRobot/input-mask-ios)
## 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](http://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