Backspace not properly removing characters on both iOS and Android

Bug report

Summary

I’ve just added this module to my project in order to support masks. However, I’ve noticed an issue when I use the backspace on both iOS and Android that the character is not properly erased. I’m not sure the issue is due to this library or due to the RedMadRobot/input-mask library.

I do reproduce this issue on both iOS and Android.

This is a screen recording of the issue:

Environment info

react-native info output:

SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 27.0.3, 28.0.3, 29.0.0
      System Images: android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-R | Google Play Intel x86 Atom
  npmPackages:
    react: 16.9.0 => 16.9.0
    react-native: 0.61.5 => 0.61.5

Library version: 2.0.0

Reproducible sample code

Just a regular use of the text input.

<TextInput
      placeholder="([000]) [000]-[00]-[00]"
      mask="([000]) [000]-[00]-[00]"
/>

[NeerajNegi]

It can be done as @asfaarahmed suggested but it’s a workaround and not a fix. I think fixing the backspace issue for formatted value is the best way.

[asfaarahmed]

What if we want to store the formatted text. If this is the case then it won’t work with the current way. Is there any fix to use formatted text in both input and state?

import React, { Component, useContext } from ‘react’; import TextInputMask from ‘react-native-text-input-mask’;

export default function testClass() { const [valueE, setValueE] = React.useState(“”) const [valueF, setValueF] = React.useState(“”)

<TextInputMask refInput={ref => { this.input = ref }} onChangeText={(formatted, extracted) => { setValueE(extracted); setValueF(formatted); }} value={valueE} keyboardType={‘numeric’} mask={“([000]) [000]-[0000]”} placeholder=“Phone No” placeholderTextColor=“#525252” keyboardType={‘numeric’} />

//save valueF in db…