Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Mar 19, 2025. It is now read-only.

Text input mask for React Native, Android and iOS

License

NotificationsYou must be signed in to change notification settings

react-native-text-input-mask/react-native-text-input-mask

Repository files navigation

react-native-text-input-mask

Text input mask for React Native on iOS and Android.

NPM package version.MIT license.

Examples

React Native Text Input Mask iOSReact Native Text Input Mask Android

Setup

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.
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!
  1. Runpod 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 dropInputMask.framework toEmbedded Binaries in General tab of Target

Manual installation

iOS

  1. In XCode, in the project navigator, right clickLibraries ➜Add Files to [your project's name]
  2. Go tonode_modules ➜react-native-text-input-mask and addRNTextInputMask.xcodeproj
  3. In XCode, in the project navigator, select your project. AddlibRNTextInputMask.a to your project'sBuild Phases ➜Link Binary With Libraries
  4. Run your project (Cmd+R)

Android

  1. Open upandroid/app/src/main/java/[...]/MainActivity.java
  • Addimport com.RNTextInputMask.RNTextInputMaskPackage; to the imports at the top of the file
  • Addnew RNTextInputMaskPackage() to the list returned by thegetPackages() method
  1. Append the following lines toandroid/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')
  2. Insert the following lines inside the dependencies block inandroid/app/build.gradle:
      compile project(':react-native-text-input-mask')

Usage

importTextInputMaskfrom'react-native-text-input-mask';...<TextInputMaskonChangeText={(formatted,extracted)=>{console.log(formatted)// +1 (123) 456-78-90console.log(extracted)// 1234567890}}mask={"+1 ([000]) [000] [00] [00]"}/>...

Testing

Jest

Make sure tomock the following tojest.setup.js:

jest.mock('react-native-text-input-mask',()=>({default:jest.fn(),}))

More info

RedMadRobot Input Mask Android

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 seesemver.org.

Local Development and testing

To use a local copy with your project, it's highly recommended to usehttps://github.com/wix/wml

[8]ページ先頭
©2009-2025 Movatter.jp