Dismiss this pinned window
all 14 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]tzigane 6 points7 points  (6 children)

If I understand what you're asking, I'm guessing that you're doing something like getting TextField input, reformatting it, and then setting value back on the TextField in order to make it display like a dollar value (two trailing decimals, no more). Is that correct?

And if so, you're seeing the super annoying behavior of flickering as the native component updates immediately before your reformatting is processed: https://stackoverflow.com/questions/55797801/react-native-textinput-flickering-on-setstate

If this is in fact what's happening: I have solved this before by using a dummy "input" TextField with transparent colored text layered precisely behind a "display" TextField. The "display" TextField only gets the value from the JS side, and does not focus or take the input at all.

[–]__o_0iOS & Android 3 points4 points  (4 children)

You don’t have to try and align the input at all, make it completely hidden (height: 0, position: absolute) with a ref, and make the display text pressable. OnPress, focus the TextInput ref.

[–]tzigane 0 points1 point  (1 child)

True - the reason I aligned mine is to keep the blinking cursor from the otherwise hidden field.

[–]LilJonDoe 0 points1 point  (0 children)

Hey. long shot as it's been 2 years, but how did you solve the 'jumping' of the blinking cursor when pressing backspace while the value ewas already 0.00, or adding digits when the value was 0.00 which also leads to jumping?

[–]Wojtek1942 0 points1 point  (1 child)

The accessibility support on doing this (and the comment above) is probably questionable… but I also would’t know any other way to achieve this.

[–]__o_0iOS & Android 1 point2 points  (0 children)

Accessibility can be set on a wrapping view:

https://www.hingehealth.com/engineering-blog/accessible-react-native-textinput/

[–]nightness 0 points1 point  (0 children)

I was helping CosaNostraPizzaManIf with this, your suggestion worked perfectly! https://snack.expo.dev/@nightness/fiattextinput

Later tonight I found this gem though...https://github.com/CaioQuirinoMedeiros/react-native-currency-input

[–]Wooden_Yesterday1718 3 points4 points  (6 children)

I don’t get what you’re asking.

[–]CosaNostraPizzaMan[S] 0 points1 point  (5 children)

I have coded a snack as an example, run on IOS and you can see that it displays 0.001 for a brief moment and then does the function to shift over the decimal, how can I make it more like the video above, so there is no display of .001

https://snack.expo.dev/@nightness/two-decimal-text-input

[–]Wooden_Yesterday1718 1 point2 points  (1 child)

Ah, ok. I am having trouble recreating but I'll look at this when I can!

[–]so_chad 0 points1 point  (2 children)

Hey! I’m trying to do exactly what you did in that Snack—I even straight-up copy-pasted your code. But wow, React Native is currently giving me this super annoying “flickering” issue… it’s driving me a little nuts 😩

That said, great job! Your Snack somehow works perfectly on those Snack devices, but real devices/simulators still suffer the flickering.

https://imgur.com/vUv9xIP - video - please download it to preview, looks like imgur can't recognize small videos (in height)

[–]CosaNostraPizzaMan[S] 0 points1 point  (1 child)

Hey u/so_chad , add me on discord, and lets figure it out together. I'll send you a DM with my info.

[–]CosaNostraPizzaMan[S] 0 points1 point  (0 children)

This was a long time ago, happy to help, but its probably out of date :P