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
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 would like to create a box to select the date as in the attached photo.
What do you recommend to create something similar in react native with expo?
I tried using MUI's Mobile DatePicker API, but it doesn't work, errors occur.
Update:
I created this box to select the date, but when I go to press it gives me an error.
The error is the following:
https://www.npmjs.com/package/#react-native-community/datetimepicker
Works with Expo. Static version set at 3.x.x (something version 3). So you won't have the full functionality that is described on their docs, but you'll have enough.
expo install #react-native-community/datetimepicker
instead of npm to ensure you get the compatible version.
This library can be a bit difficult to work with. The main suggestion I have for you is to create a custom component on your own that looks like your design. Then wrap it with a TouchableOpacity and onPress set the DateTimePicker to show its modal. Grab the value you need from the onChange result, and pass it to your local state. Dont try anything fancy after that because as I mentioned earlier, the library is difficult to work with and really fights hard against any customization. It works well though and will certainly solve your problem.
There is a image upload functionality in my vuejs application.
The image upload works good and the uploaded recorded is also displayed.
But this recently added record get displayed at last in my list. On page refresh it appears at top.
I want to show the recently uploaded image at top as soon as after successful upload.
I have been trying really hard for this since 2 days and couldn't find the solution.
Please help. Vuejs version is 2
basically if I'm correct what you want is to push new images to the images array, for this just use unshift()
something like this
this.images.unshift('url_or_info_of_the_new_image')
Here, you do have an example of code showing you how you could achieve this.
https://codesandbox.io/s/gracious-tree-nig54?file=/src/App.vue
Essentially, the most interesting part is this.initialArray = [this.newValue, ...this.initialArray].
Also, depends on what you've tried until now but keep in mind the few caveats JavaScript does have with VueJS v2: https://v2.vuejs.org/v2/guide/reactivity.html#For-Arrays
I'm having some problem about a screenshot-detector in an application.
I'm using EXPO, but I've no idea about how can I detect a screenshot.
Suppose that I've a profile screen. Each user has a profile page, I want to detect when another user does a screenshot on the screen.
My problem is: how can I detect this? I readed about the gesture here, but it didn't help me. With the gestures I can detect, instead, the scroll in a page, the location x and location y.
I readed also this answer, but about the event touchesCancelled:withEvent:touchesCancelled:withEvent: I have not found anything in React Native docs (and also EXPO docs).
So: which is the idea behind a screenshot detector? Thanks for your help!
You can't do it without detaching EXPO. There is already a feature request for that.
If you decide to detach EXPO, react-native-screenshot-detector might be helpful. The solution is very similar to the one from the linked question.
Currently with expo there is no way to do that, But if you detach you can use this package it supports android&ios screenshot detecting react-native-detector
I can't find a way to programmatically close an ActionSheetIOS. When the device orientation changes, if there is an action sheet open, I need to close it before reopening it (otherwise it is erroneously anchored to the wrong location). I haven't been able to find a way to trigger closing it without requiring user input. Is this possible programmatically?
The documentation does not mention this being possible in the current version (0.38.0). I also could not find any related issue, so the only ideas that comes to mind are either finding a package that implements the functionality JS.coach, or extending the implementation of ActionSheetIOS to include that functionality. Maybe this question might be helpful.
React Native version 0.69.0 has added the ActionSheetIOS.dismissActionSheet() method, which will dismiss the most upper action sheet.