Just replicated my issue here https://snack.expo.io/vER5Zz59S
When running it on android, the date changes to the next day upon clicking the button 'ok' multiple times even though the date in the picker is not changed. Please correct me if I did something wrong. Thanks!
Try removing the prop timeZoneOffsetInMinutes={0}. Which Allows changing of the timeZone of the date picker.
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 been trying to fix this weird problem I am facing with React Native/Expo. I was working on an Authentication page. It is a simple username and password input form. It was going okay for a few weeks until yesterday when the TextInput component started lagging. The weird part is it only lags in my device (Iphone X). When I use a virtual device, it runs fine and there is no lagging when I input something in the TextInput.
I also want to mention that it is not just my code but if a component has more than once TextInput, the TextInput becomes laggy and super slow when anything is typed.
I have tried:
Restarting my phone
Deleting the expo app and downloading it again
Running the app in production mode
Nothing seems to work and the component is still lagging. Has anyone else faced such problem? I have created this simple snack:
https://snack.expo.io/#ayushdev/9d2af8
The issue still persist in this simple snack too.
You should try state colocation here. Other things constant, that is expected to give you at least some speedup.
Separate out the different InputText components in your form, each updating their own states only. This ensures that the entire form is not re-rendered as you change the input in just one of those fields.
I want to make a date picker as shown in the image below. Can anyone suggest to me which npm package should I use to make such date picker?
date picker
Flatpickr is the one I use in react. You could check if it works with native
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.
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