I have a test, which needs to click on a TouchableWithoutFeedback element. I have passed it a testID prop, but Detox (v20.1.2) doesn't see it. I can see in devtools, that I the testID is there.
I can find buttons on the same page, but not TouchableWithoutFeedback, even though according to documentation (I'm on v0.70.5) the testID should be supported.
What do I do here?
Related
I have an application with drawer navigation that uses buttons to navigate to different screens.
In terms of accessibility, should I use accessibilityRole='button' or accessibilityRole='link' for the buttons.?
React Native AccessibilityRole docs say
link Used when the element should be treated as a link.
For external links accessibilityRole='link' is clearly the best option. But should I use it for internal navigation, too?
Note: I do not use deep links in my application.
Thank you for your help.
The Link component
renders a component that can navigate to a screen on press.
The Button component is a component that performs a certain action if the user presses it. A Button could be considered a Link if its onPress function navigates to a screen, by definition of the Link component. The Link could be styled to look exactly like a Button and vice versa. There would be no difference.
If we refer to general URL linking which includes deep linking, then we notice that the link functionality needs a UI component as well in order to function. This could be Markdown, the Link component or again the Button.
I personally would use accessibilityRole='button' for every UI component that is the actual Button component or functions (and 'looks') like a button in my application (TouchableOpacity, Pressable, ...), since this is what a user whose disability prevents him from noticing needs to know or wants to visualize. This includes the Drawer buttons.
I would use accessibilityRole='link' for text which is styled too look like a link (text with some highlighting) and navigates somewhere (this could be a website as well).
In general, I would keep in mind that the user wants to visualize the component. While a button, that navigates to a screen, is technically a link by definition of its functionality, it is not a 'typical link' when speaking of visual appereance (but again, we could style our button exactly like that...).
What is generally more important is the accessibilityHint which
helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
The 'what will happen if I click' is certainly more important than 'what the component looks like'.
In my program, I have a touchable icon that that sets a password field from hidden to visible, I need to test that when the icon is pressed, the password becomes visible. I have tried the following:
wrapper.find({name:"icon"}).first().props().onPress();
However, I get the error message:
Method “props” is meant to be run on 1 node. 0 found instead.
How do I fix this?
If you use Icon to press, you should try like this:
wrapper.find(Icon).first().props().onPress();
or
wrapper.find(icon).first().props().onPress();
Use Button works like:
wrapper.find(Button).first().props().onPress();
Put the Tag what you used.
When using the RadioButtonGroupInput inside ReferenceInput I get some warnings from React:
React does not recognize the setFilter prop on a DOM element
React does not recognize the setPagination prop on a DOM element
etc...
It seems the RadioButtonGroup does not support this props, is this a bug?
Here is an example, it only appears the first time we click an item of a list. After we need to reload to see it again
https://codesandbox.io/s/6j878j2263
I'm stuck tying figure out how to pass a TextInput value up from a React Navigation component to my main app. The following Expo Snack shows my code: https://snack.expo.io/#nativedetroiter/test-passing-state-to-screens-and-back
Desired behavior: When I run it, I want this.state.stateVar to take the value I enter into the TextInput box.
Observed behavior: Although the console log shows handleChangeText() gets fired every time I press a key in the TextInput box, but it also shows that this.state.stateVar is "undefined".
What you missed is you have to get the input value during onchage and then send it to the any component. I created a state to locally save the what the user typed and updated code is here snack.expo.io/HJksGPgNm
I have a single page web app. The keyboard pops-up everytime I click on the screen.
There are no text input boxes in the DOM at all.
How can I debug why the keyboard is popping up.
You can see examples of this strange behaviour at https://blight.ironhelmet.com and https://np.ironhelmet.com
update with a clue: A user is now reporting that rather than the keyboard, a dropdown selection spiner is popping up all the time, long after that dropdown has been removed from the DOM.
For React users:
I had the same thing happen in a React single-page app with React-Router. I didn't write code to remove elements from the DOM, but of course React does that for you.
On my site, there are React components that contain one to four input fields. After any such component appears, and then is hidden (unmounted / not rendered anymore), then any time the user taps a link, the keyboard pops up. This makes the site unusable. The only way to make it stop was to reload the page.
The workaround: calling document.activeElement.blur() in componentWillUnmount for the wrapper component around my <input> fields did the trick.
componentWillUnmount()
{
if (document && document.activeElement)
{
document.activeElement.blur();
}
}
Note that calling window.activeElement.blur() did not seem to do anything.
There's a thread in the Apple support forums about this issue:
https://discussions.apple.com/thread/7692319
Looks like the keyboard was holding a reference to input after I had removed them from the DOM.
I added a test when removing element to see if it was the current activeElement, then, if so, calling document.activeElement.blur() before removing it. Seems to have solved the problem so far.