I need to write automation test for app that written in React Native.
Our developers have some problem with unique ID for each elements in app.
Right now, React Native does not support for unique ID, but support contentDescription via accessibilityLabel.
The problem is that we can't currently use accessibilityLabel attribute, because we need it for accessibility in the future.
The question is, how to give unique ID for elements and not find them by xpath, since xpath doesn't suit us.
Related
I need to build this OTP component.
At first it seems to be very simple in terms of design, we just have create 4 boxes and use 1 TextInput component for each.
But the issue with this approach is that user will have to tap every box and write the number.
So, I thought of another idea where we have to use only 1 TextInput component and cover it with a view such that 4 windows are formed through which text could be seen.
Although the approach seems to be fine but I don't understand how do I write code for this.
I use this package in my project https://www.npmjs.com/package/#twotalltotems/react-native-otp-input
I wish to use Algolia to setup InstantSearch in my React Native project. I am using this tutorial to learn the basics.
It appears in their RefinementList and InfiniteHits components there is a parameter: refine. This parameter seems to play a key role in the functionality of this tutorial's app.
Where can I get an example of how this refine() method would look like?
Please help me with some resources. An explanation of this refine() method would also help.
Thanks!
I think there's a typo in the documentation at the time of this writing (for which I opened a pull request), and the name of the actual prop is refineNext.
The documented InfiniteHits example from the React Native guide uses a connector, which is a lower-level abstraction allowing users to fully control the UI. This is what allows you to use React Native code for the UI while having access to the InfiniteHits data and logic. You can read more about the connectInfiniteHits connector in the documentation.
The provided refineNext function lets you load more results. It doesn't take any arguments, all you need to do is call it whenever you want to load more results from Algolia. In the example, it's being used in the onEndReached callback of React Native's FlatList component, whenever the hasMore provided prop is true. This allows loading more results once when the scroll position gets within onEndReachedThreshold of the rendered content.
I am using React Native picker (#react-native-community/picker) to create picker fields in react native.
Now after building the APK, I ran the app in Appium. My aim is to using Appium to select the picker items. For that I need accessibilityId. So, I passed accessibilityLabel in Picker and Picker.Item.
But when I am inspecting the items I can't find any accessibilityId.
I want to perform the click operations and create test script, and I don't want to use the XPath. That's why I want accessibilityId. Is there any way to make accessibilityId available to Picker Items? Or is there any way to select these items and do click operations?
In your react code try to add accessibilityLabel in some kind of tag that generates native "View" tag in android. You can try wrap this picker element in <TouchableOpacity> and then add the label.
<TouchableOpacity accessibilityLabel="picker-mr">
react-native Picker component doesn't seem like providing multiselect option https://facebook.github.io/react-native/docs/picker.html#enabled
But, I have com across some libraries which provides multiselect option like,
https://github.com/toystars/react-native-multiple-select
https://www.npmjs.com/package/react-native-multiple-select-list
But is there any way to select multiple values without going for package?
As #Adam Kipnis pointed out, you could always write your own.
You can store the values in an array and render from there.
Since the question was asked the developer team has deprecated the default Picker component. They provide a link for community packages.
https://reactnative.directory/?search=picker
First, I do not speak English well.
I would like to add draft-js rich-text-editor to react-native.
However, when I browse the materials, I have difficulties because of the only data related to react.
Can not add draft-js in react-native?
I do not want to add draft-js-render.
I want to add a text-editor.
The component we use in the resume.com React Native app is the react-native-pell-rich-editor component, which was the best free and open source component I could find for this problem. It was also the simplest and most consistent/flexible HTML parser I found. We use a draft JS editor on the main resume.com site, but this component was better for React Native.