Formatting number with thousands separators

[maxbbb]

Is your feature request related to a problem? Please describe.

I want to format a number with thousands separators like this:

Input	Output
1	1
12	12
123	123
1234	1,234
12345	12,345
123456	123,456

This same feature was requested here in the iOS library that this package uses and is implemented here

Describe the solution you'd like

Ideally the affinityFormat prop would behave in a way that would allow using the existing api to accomplish this, but given the native library creates a separate subclass NumberInputListener, it might be easiest to export a separate component for this specific use case.

Describe alternatives you've considered

I thought the following would work, but it doesn't

const Input = () => {
  return (
    <MaskedTextInput
      autocomplete={false}
      mask="[999],[999]"
      affinityFormat={['[9]', '[99]', '[999]', '[9],[999]', '[99],[999]', '[999],[999]']}
    />
  );
};

[IvanIhnatsiuk]

Hello @maxbbb!

I have plans to add this, but I want to create my own subclass because on android it uses the new android api which is incompatible with older versions. I will do this in a few weeks as I have a lot of work to do at work. Thanks for bringing this topic up!

For now you can try to use something like this: RedMadRobot/input-mask-android#93, https://github.com/RedMadRobot/input-mask-android/wiki/2.2-Right-to-Left-&-Digit-Grouping

[kirillzyusko]

Also would be good to have an ability to customize separators, i. e. use , , and . 👀

I'm sure @IvanIhnatsiuk kept it in mind, but just wanted to highlight it just to be sure that we don't forget about it

[ddikodroid]

Hello @maxbbb!

I have plans to add this, but I want to create my own subclass because on android it uses the new android api which is incompatible with older versions. I will do this in a few weeks as I have a lot of work to do at work. Thanks for bringing this topic up!

For now you can try to use something like this: RedMadRobot/input-mask-android#93, Wiki: 2.2 Right to Left & Digit Grouping (RedMadRobot/input-mask-android)

Hi @IvanIhnatsiuk,
Thank you for making this useful library.

Do you have any update on this thousand separators?

[danielcrk]

Hey @IvanIhnatsiuk, I'm also trying to achieve a numerical input with thousand separators. Is there any news on this? Currently I'm experimenting with formatting the value myself and then generating a dynamic mask based on the formatted text. Is there a better approach?

[RodolfoSilva]

Workaround:

const getThousandsMask = (
  value?: number | null,
  options: {delimiter?: string; separator?: string} = {},
) => {
  const {delimiter = '.', separator = ','} = options;
  if (!value || value <= 1) return `[099999999999990]${separator}[09]`;
  const hundredsLength = Math.round(Math.abs(value ?? 0).toFixed(0).length / 3);
  const parts = new Array(hundredsLength).fill('[000]');
  return `[0990]${parts.length > 0 ? delimiter : ''}${parts.join(delimiter)}${separator}[00]`;
};

Usage

<MaskedTextInput
  autocomplete={false}
  allowedKeys="0123456789,."
  mask={getThousandsMask(value)}
  value={(value ?? 0).toFixed(2)}
  onChangeText={(_formatted, extracted) => onChange(Number(extracted || 0) / 100)}
  keyboardType="numeric"
  isRTL
/>