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
Related
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.
I built an application in React, is there a way that the same code will be used for a website?
I know Instagram is built on React and it also has a website, I wonder maybe you should add some link or something that it will open for me as a website?
Or maybe there is no such way and I have to build a website separately?
First off all, If you have written any code which is related to native functionality, then it can be challenging.
If you have only worked with views, images, and some of the basic functionality.
It can be done with react-native-web you can easily migrate your project to react-native-web.
If you project is created with expo they already provide react-native-web support.
Option 2: If you have some of the code you want to share and some is that you don't want to share or can't share.
You can use renderProp or customHooks pattern to reuse your logical code and seperate your view for react-native and react js apps.
If you want to reuse your views too, you can do those with primitives.
you can use styled-component primitives for that.
https://medium.com/react-native-training/sharing-code-between-react-web-and-react-native-applications-7f451af26378
You can get some idea here as well.
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
I tried to find tree view select in react native, But, I couldn't find any. I also tried to generate my own, but it will take more time to develop and need to fix many things that I can't do right now.
Can anybody provide inputs on which library or component use for tree multi-select inputs?
Thank you in advance.
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