akinncar/react-native-mask-text

Ability to unmask currency as a float

DinsmoreDesign opened this issue ยท 6 comments

Describe the Feature

Currently, if you type in a value using currency masking, ie:

type="currency"
options={{
    prefix: '$',
    decimalSeparator: '.',
    groupSeparator: ',',
    precision: 2
}}

And type in the input something like "$4,732.55" then try to unmask it through the onChange event:

onChangeText={(text, rawText) => {
  console.log(text) // $4,732.55
  console.log(rawText) // 473255
}}

You get the completely unmasked string, which isn't what I'd think most people would expect. I expect the string returned to be 4732.55, but it looks like the library removes all the separators and prefixes. Right now, I have a function that checks if the length of the value is greater than whatever the precision is and if it is, return the value with the decimal at -${precision}, instead, but I don't really know if returning an unmasked value without the precision included is helpful to anyone and it should probably just be built into the library.

Possible Implementation

Right now I'm taking the unmasked value and running this function on it:

interface IParseCurrency {
    value: string;
    precision?: number;
}

const parseCurrency = ({ value, precision }: IParseCurrency) => {
    const numberVal = Number(value);

    if (!precision || !numberVal) {
        return value;
    }

    const cutoffIndex = value.length - precision;
    const initialSubstring = value.substring(0, cutoffIndex);
    const endingSubstring = value.substring(cutoffIndex, value.length);

    return `${initialSubstring || 0}.${endingSubstring.length < 2 ? '0' + endingSubstring : endingSubstring}`;
};

Which seems to return everything how I'd expect. I assume the library is probably doing the masking with some sort of Regex pattern though, which would be a lot more simple to implement in reverse.

Yeah that cannot be the expected behavior at all. Periods should definitely be part of the raw text.

@DinsmoreDesign will you be implementing this enhancement? I too would like to see this altered

@DinsmoreDesign will you be implementing this enhancement? I too would like to see this altered

Unfortunately, I'm no longer working on React Native projects. I'm surprised this hasn't been fixed yet, it's been almost 2 years since I posted the issue. I'd suggest using a different library altogether if the package isn't being maintained, or you're welcome to steal my solution if you have to use it.

the library is open source, you can create a PR whenever you want!

we also support Issuehunt to budget desired issues from the community, or my GitHub sponsors to get special features requests or reviews/test
if you cannot give your time creating a PR or pay for maintainers contributors to implement it, I understand that the feature is not that important for you, so why would it be for me?

the feature is not that important for you, so why would it be for me?

Ouch. Was just asking a question