Add the ability to get the raw value before applying the mask

[NotatNiiK]

Add the ability to get the raw value without applying a mask, for example, with the 3rd argument to onChange or something else. I encountered problems with native paste into the input, where the mask is immediately applied to the inserted value

[IvanIhnatsiuk]

Hello @NotatNiiK . I don't think it's a good idea to add logic to bypass the mask formatting. This library was created with the idea of formatting, if you don't need it, you can use plain text input from react-native. But if you need formatting with special characters, then you better add them as customNotation or allowedKeys.

If that didn't work for you, could you send me the code, I'd take a look at it and maybe suggest a solution. Thanks 🙂

[NotatNiiK]

I don't need to bypass the mask, I need the ability to get the raw value before the mask is applied. I need this when working with native paste. Because if I use a custom button to paste text from the clipboard into input, I can directly get it and format it as I need (by reading the value from the clipboard), but with native paste, I can't do that (for example, on IOS, above the keyboard, it can automatically pull up your phone number from your profile).

In this example, I have a mask of the type [000] [00] [00] [00] [000] set, but if I get a value of the type [00000] [00] [00] [00] [00] [000] from native paste, then this mask automatically cuts off the last two characters and in the future it interferes with the work of the handleOnPaste function

 const phoneNumberCallback = async (value, rawValue) => {
       const isPasted = _value?.replace(/[^+\d]/g, '').length - phoneNumberValue.length > 1

       if (isPasted) {
           handleOnPaste(rawValue)
           setIsFocusedPhoneNumber(true)
           phoneNumberInputRef?.current?.focus()
           if (callback) callback(value)
           return
       }

      ....
   }

[IvanIhnatsiuk]

@NotatNiiK In this case you shoud use affinityFormat.

const AFFINITY_FORMAT = ["[00000] [00] [00] [00] [00] [000]"];


<MaskedTextInput mask="[000] [00] [00] [00] [000]" affinityFormat={AFFINITY_FORMAT} />

Also, you could play with a different affinityCalculationStrategy to setup up it as you want.

Screen.Recording.2025-04-10.at.11.36.45.mov

[NotatNiiK]

affinityFormat doesn't suit me, because I don't need to be able to enter a phone number in this format
[00000] [00] [00] [00] [00] [00] [000] and in this format [000] [00] [00] [00] [00]. I need the mask to always be [000] [00] [00] [00] [00] [000], but with native paste I could get the raw value to process it myself (in particular, remove the first two characters) and pass this value further to the handleOnPaste function, but in this implementation the mask cuts off the last two characters for me because my function doesn't work correctly.

[IvanIhnatsiuk]

@NotatNiiK Could you please provide code that I can run and get the expected behavior, or describe what you mean by a raw value? I'm asking this because my library already provides two values in onChangeText formatted and unformatted values, and your problem is not quite clear to me. So perhaps you need a direct handler from my MaskedTextInput? It would be similar to onPaste and would be called when the user inserts text into the TextInput?

[IvanIhnatsiuk]

@NotatNiiK I did a small investigation.

1. Your problem is that you are trying to figure out that the user has inserted text by checking the number of items inserted, but this is the wrong approach to check as you have done. The native version has special methods to determine that text has been inserted. However, you can still use this approach, but you will have to use const pasted = await Clipboard.getString(); to get the original pasted text.
2. I will try to add onPaste/onCopy/onCut events on my side, but it looks like I need to override the react-native private method to listen for these events on android. For iOS I can do this in my delegate.

So, there is an open PR facebook/react-native#45425 to add this logic in react-native.

Your code with a fix will be:

const phoneNumberCallback = async (value, rawValue) => {
       const isPasted = _value?.replace(/[^+\d]/g, '').length - phoneNumberValue.length > 1

       if (isPasted) {
           const pastedRawValue = await Clipboard.getText();
           handleOnPaste(pastedRawValue)
           setIsFocusedPhoneNumber(true)
           phoneNumberInputRef?.current?.focus()
           if (callback) callback(value)
           return
       }

      ....
   }

Please, let me know if it helps.