Controlled input value is not working

[miladdev85]

Steps to reproduce

1. Give value="1234" as props to <MaskedTextInput>

Expected behaviour

The displayed value should be controlled by the value prop if present, like regular TextInput. My use case is that I have a button that will increase the amount displayed in when pressed.

Actual behaviour

The value prop is completely ignored..

Environment

• React Native version: Expo 42
• React Native platform + platform version: iOS 15.0

react-native-mask-text

Version: ^0.6.0

[akinncar]

Not sure if control value prop will be good, because if you literally change the value, how you will get the masked value?

Thinking of some solution about it, maybe changing the value with a reference can be an option if we implement it? like ref.changeValue(123)?

Other options: You can use a normal TextInput from react-native and try to use the mask and unMask function from react-native-mask-text. https://github.com/akinncar/react-native-mask-text#usage-mask-function

[miladdev85]

Changing the value with a reference sounds very good if that would work.

I tried the mask and unMask function but couldn't figure out how I can implement the options objects with decimalSeparator, groupSeparator and precision.

But maybe I could use the MaskedText with an invisible MaskedTextInput and the children props in MaskedText would come from MaskedTextInput onChangeText?

[AlexNolasco]

Same issue, only thing I could do was to clear the input using ref xyzRef.current?.clear();

[fabiozarvos]

Same problem here. I'd like to use mask to edit a form, but I need to be able to set the value for each field.

[fabiozarvos]

Thanks for your response. Yes, please, I d like you to post an example.

Em qui., 10 de mar. de 2022 às 15:49, Nikola Milutinovic < @.***> escreveu:

You can use defaultValue prop to set your initial value to the field. I understand it is a bit different from what you are trying to achieve with standard controlled field but might work if you are using useForm Hook or Formik.

If you need an example of that I can post it here.

— Reply to this email directly, view it on GitHub https://github.com/akinncar/react-native-mask-text/issues/51#issuecomment-1064382526, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPCXMLMQ6DYMX6TJLJLHQLU7I72NANCNFSM5KCHCCOA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

-- Fabio Zarvos @.***

Av. Angélica 2529 – Sala 103 Bela Vista, São Paulo, SP 01227-200 Brasil

cel. +55(11) 99425-8359 tel.: +55(11) 4780-9785

www.snapsystems.com.br

[camilossantos2809]

using prop "defaultValue" for initial value and "value" for normal updates worked for me

[Brenont]

Same issue here

[kyleshevlin]

As far as I can tell, this bug is still present (or it regressed). Here's a repro with version 0.13.1: https://codesandbox.io/s/little-cookies-1wcbko?file=/src/App.js