I am building a Currency Input component using React Native TextInput.
While the user is typing, the requirement is that the text should always be format in this way:
$ + [integer-part] . [2 digits decimals]
So for example if the user enters 2, it should be automatically formatted to $0.02. I am able to perform a formatting while the user is typing as illustrated in the below screenshot:
Basically, using onChangeText, I apply some formatting and then call setState with the formatted value.
The problem here is that the newly typed character says for one second before being correctly formatted. And this causes the TextInput to flicker briefly.
I have looked at this similar question. But not only I could not understand how the accepted answer can solved my problem. And even when I did as suggested, it did not work.
I don't know how to go about with this problem: it seems that the TextInput cannot be fully "controlled" since it is displaying an input character although I have explicitly stated:
value={this.state.value}
Any help from the community would be greatly appreciated
There is an open issue in the react-native github:
TextInput flickering when format the text closed, releated to:
Can't modify text in TextInput onChangeText callback on Android (open since 2019)
Even in the v0.68.1 (latest we have today) the same problem is happening.
I have a particullary case where I need to use currency masks and I have two choices:
Accept the flickering issue and keep the mask
Remove the mask and let the user put any plain text value. (in my case, forcing the keyboardType as 'numeric' was enough.
Related
I had created a TextInput which is formatted in the pattern like as the credit card month expiry date like as 'MM/YY'.
But got issue when to clear the textinput value. Below is the video you can see the issue of it.
Click here to see the video of the issue
Below is the full expo code link, for ease of the making and solving the issue. Issue is, I can't clear the '/' as you can see in the video. click here to go to the full code - expo link
I see you want custom integration without using any library and here is example with copied component from the react-native-mask-input that does the job perfectly by giving masking expression.
I have a textinput lets say :
<TextInput
maxLength={5}
onChangeText={val => {
setExpiry(val.replace(/[^0-9]/g, ''));
}}
placeholder="Input"
value={Expiry}
keyboardType={'default'}/>
I want to restrict user to only add numbers, or any specific format using regex or simple loops.
The above is achieved, working without any functional issues.
But what seems to be off about this method is that it takes a little time (1ms may be) when you enter something unwanted, it shows entered character then removes that character. Overall, this doesn't look that great when it comes to user experience.
What I have tried:
Loop through the input and remove unwanted characters
It works but is slow and give the above flickering issues.
Use regex to replace with empty string
It works and is better at performance than above method, but still it gives the flickering issue.
So My question is that
is there any other way to have the same text box as on a native platform that doesn't have this flickering issue.
For Example: On native android, this issue is not faced.
References:
Regexp with textinput
Loop with textinput
Issue in GitHub repo
Handling TextInput Docs
If the requirement is to allow only numbers, using keyboardType='numeric' will eliminate everything besides numbers (and some punctuation on Android, see the docs on TextInput). Your regex solution will still be required to prevent non-number content, but it should be used less this way.
Have you tested your flickering issue on a release build of your app? The debug version will always be slower, and the flickering problem may not exist in a release build.
I have an app that makes extensive use of react-native-paper's TextInput. Many of these inputs have to deal with monetary units. I know that TextInput from react-native-paper provides a render prop that allows you to add a text input mask and many have already been written. However, I can't seem to find one that works with expo and I only want to eject if absolutely necessary (I like many of the conveniences that expo brings to the table).
Can anyone show me an example of how to use onChangeText to accomplish this on my own?
These are my requirements:
I want 2 decimal places
I want to prevent the user from entering more than 1 decimal (maybe it's better not to allow them to enter a decimal at all - I'll do it once they enter more than 2 digits)
Check out this sample
Of course you can use any regex
I want to use Bullet Character/ Small Circles used for passwords in React Native Text component. Is there a way to create them without using package.
I am thinking of creating a rounded View with background filled. However, kindly let know if a simpler solution exists.
There is a much simpler way,
Try using Unicode.
2B24, 25CF, 26AB, etc... these are Unicode for black filled dots.
USAGE: <Text>{'\u2B24'}</Text>.
You can search more Unicode here, http://www.unicode.org/
If you're wanting to create a TextInput that obscures the entries (e.g. for a password input), TextInput has a secureTextEntry prop.
I'm using the native DatePickerAndroid for editing a date field in my react-native app.
I would like to know if there is any support for adding a 'clear' button to the native date picker that will close the datepicker and return an empty date - in order to be able to clear the date in the input field.
I've attached a screenshot of the native android date picker opened from a regular <input/> with type date in chrome. As you can see there is a 'clear' button - exactly what I'm looking for!
Actually this question was previously answered by ufxmeng, but his answer was lately deleted (I don't know why...).
His solution was to create a custom AndroidDatePicker module, mostly copied from the original DatePicker Module created by React Native, with slight changes for adding a CLEAR button.
He put together a github repo holding all files that need to be added/changed to accomplish this. Basically the changes you'll need are here and here.
But note that the original CLEAR button added in that repo doesn't fully match the needs pointed out in my question (see this issue).
So I've changed some of the code to make it work the way I expected. You could see the changes I made in this pull request
It works great for me!
In case anyone else needs this, I forked the original repo of ufxmeng and added Clear button functionality for TimePicker as well:
https://github.com/sladek-jan/CustomDatePicker