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.
Related
I have tried a lot of npm packages but it seems that none of them are compatible with Expo.
I am thinking of building a range slider by myself, but as far as I know, there is no range input component in react native.
What I need is something like this :
https://www.bypeople.com/wp-content/uploads/2019/11/css-js-range-slider.png
How can I achieve this ?
I am using expo version 5.4.12.
Try this
Here is an example of making custom range slider which is compatible with expo sdk
I think you can do this using a slider package (like react-native-multi-slider) and measure the location of the marker using React Native's measure. Combining these two tools you can create an element to be positioned above the marker every time the user interact with slider.
I'm trying to run end to end tests on an Expo Web project with Playwright. I was hoping that when I added a testId prop to a React Native view it would be converted to a data-testid so I could select the element for my tests.
However, it doesn't do this so I can't figure out a good way to select the elements. So far the best thing I can come up with is to add an accessibility label to the element.
Does anyone know a better way to add test id's to react-native expo projects that'll be tested on the web?
You can do this!
I may have made a casing mistake. You add a testID prop on the react native component and then query for div['data-testid="sampleId"']
Here's a code example: https://github.com/expo/expo/blob/b655ff28d924e2274c627294778a02dbec1268db/apps/bare-expo/e2e/TestSuite-test.web.js#L68
I've looked it up on reactnative.dev, and the Text component is supposed to have an 'onTextLayout' prop.
I'm running the React Native version 0.62.2, and the documentation on their site says it applies for 0.62. However, when I try to use the prop in a Text component, I am shown this message:
I need to use this prop to detect when the text starts overflowing into two lines. If anyone has another solution of how I can accomplish this without onTextLayout, that would also be very helpful.
It appears it's not working on react-native-web
http://necolas.github.io/react-native-web/docs/?path=/docs/components-text--children
Just test your app on android/iOS and you will be fine
we working with expo and using mapview, however, there are many restrictions in react native maps, as we are planning to implement turn by turn navigation. Integrating Mapbox would have been the best option, however we do not think it’s best to eject the project as expo doesn’t still support Mapbox. Although, I came across a package, react native maps navigation, I would like to know if anyone has been able to successfully implement it in their project and it functioned properly, and also know if there are any drawbacks that comes along with it. I am asking this because the author says “Please note that this module is usable but still under heavy development. Some properties and/or component names might change without notice.”
Kindly give your suggestions and advice. Thanks
Mapbox works very well in a react-native projects and recommend to use this service for your project but effectively, it don't works with expo so for me, you should eject your project to use it.
I paste here some packages I used for a GPS project (The last one is to get the current position of an user)
react-native-mapbox-gl/maps
mapbox-sdk
react-native-geolocation
Hope that could help you
We have started developing an iOS/Android app using React Native. We have automated a lot of our functionality so far using Appium, but have run into a problem with being able to set or select values in a picker (date or choice picker).
I am trying to find if we need to try to fix Appium or look into providing a solution in React Native. I know native iOS/Android apps have solved this issue in the past couple of years, so hoping someone might have an idea on how to solve it for ReactNative.
An example of what we tried to do with Appium (based on what we did with our old iOS Application).
To pick "Colorado" from a picker, we would do the following:
driver.getElementById("IdOfElementOnPage").sendKeys("Colorado");
The problem is that this does not work. Even though it can find the field by id, it cannot select the value from the picker.
Here is a screenshot from Appium of the issue. See how the picker options are just one big blob of text?
enter image description here