/

React Native

Source code

@maskito/react-native is a lightweight library that brings Maskito to React Native applications.

Prerequisites To get the most out of this guide, you should review the topic "Core Concepts" first

Getting Started

Install the packages

    
      npm install @maskito/{core,react-native}

and use Maskito

Compatible with built-in masks

Feel free to combine @maskito/react-native with built-in masks from @maskito/kit and @maskito/phone — they work out of the box.

Controlled input

Pass onChange / onChangeText to useMaskito to implement the controlled input pattern.

Limitations

React Native does not expose an environment API as rich as the one available to web-based applications. Because of these differences, @maskito/react-native has a few known limitations that Maskito cannot work around:
  • React Native >=0.87.0 is required. 0.85.0 introduced selection data in the TextInput onChange event. This is a major milestone for Maskito: it unlocks (partial) support for React Native. Without it, caret management would be either too limited or achievable only at the cost of significantly worse code quality. Subsequent minor releases fixed issues related to this feature.
  • Value flickering. When the user types an invalid character and the field value stays unchanged, a brief flicker can appear before the input re-renders. The React Native team mentions this in their documentation as a known issue. See also the GitHub bug reports #34437 and #38155 .
  • Poor Plugin support. Most built-in plugins were written under the assumption that they run in a browser or Node.js environment. We strongly discourage using them in React Native applications.