react-native-text-input-mask / React Native Text Input Mask
Licence: mit
Text input mask for React Native, Android and iOS
Stars: ✭ 922
Programming Languages
java
68154 projects - #9 most used programming language
Labels
Projects that are alternatives of or similar to React Native Text Input Mask
ngx-ip
An Angular network address component (IPv4, IPv6 and MAC)
Stars: ✭ 20 (-97.83%)
Mutual labels: mask
Shapeofview
Give a custom shape to any android view, Material Design 2 ready
Stars: ✭ 2,977 (+222.89%)
Mutual labels: mask
Albert pytorch
A Lite Bert For Self-Supervised Learning Language Representations
Stars: ✭ 539 (-41.54%)
Mutual labels: mask
ax5ui-mask
Javascript UI Component - Mask - JavaScript Mask Layer Mask / Bootstrap Mask
Stars: ✭ 22 (-97.61%)
Mutual labels: mask
Wedatasphere
WeDataSphere is a financial level one-stop open-source suitcase for big data platforms. Currently the source code of Scriptis and Linkis has already been released to the open-source community. WeDataSphere, Big Data Made Easy!
Stars: ✭ 372 (-59.65%)
Mutual labels: mask
Ngx Mask
Angular Plugin to make masks on form fields and html elements.
Stars: ✭ 772 (-16.27%)
Mutual labels: mask
N95 Watcher
🤖️监控口罩存货,包含京东、天猫、苏宁等商城,也可监控消毒液、护目镜等物资的放货信息,并推送到微信提醒。目前有🏷️天猫淘宝秒杀自动下单、🏷️京东秒杀自动下单功能。可用于普通商品秒杀。抗击疫情!中国加油🇨🇳!
Stars: ✭ 263 (-71.48%)
Mutual labels: mask
Maskara
A simple way to format text fields without getting affected by input filters
Stars: ✭ 515 (-44.14%)
Mutual labels: mask
yii2-number
A number format mask control and input for Yii2 Framework
Stars: ✭ 22 (-97.61%)
Mutual labels: mask
Edittext Mask
The custom masks for EditText. The solution for input phone numbers, SSN, and so on for Android
Stars: ✭ 413 (-55.21%)
Mutual labels: mask
MaskedTextField
MaskedTextField is an component similar to JFormmatedText field and can be used in same way.
Stars: ✭ 21 (-97.72%)
Mutual labels: mask
Masked Edittext
Android library contain custom realisation of EditText component for masking and formatting input text
Stars: ✭ 592 (-35.79%)
Mutual labels: mask
Nativescript Masked Text Field
#️⃣ A NativeScript Masked Text Field widget
Stars: ✭ 24 (-97.4%)
Mutual labels: mask
Softmaskforugui
UI Soft Mask is a smooth masking component for Unity UI (uGUI) elements.
Stars: ✭ 688 (-25.38%)
Mutual labels: mask
Jquery Mask Plugin
A jQuery Plugin to make masks on form fields and HTML elements.
Stars: ✭ 4,534 (+391.76%)
Mutual labels: mask
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.60
iOS
- Add following lines to your target in
Podfile
. 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 Target
Manual 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
- Add
import com.RNTextInputMask.RNTextInputMaskPackage;
to the imports at the top of the file - Add
new RNTextInputMaskPackage()
to the list returned by thegetPackages()
method
- 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')
- 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 to jest.setup.js
:
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].