I am trying to tap the element by text, but it is failing. on home screen tap by test work, but after on second screen it failed
I needed to be working as other by text element.
Related
I have an issue with scrolling the content within a modal. I am using a Chakra UI modal and when I click on an input field, the keyboard pops up and I am unable to scroll to the end of the modal. Similarly, when I click on the bottom of the modal, I am unable to scroll up. but When I close the keyboard, I am able to scroll the entire content in the modal. enter image description here
I have searched the entire internet for a solution but have not been able to find one. [[text]
When running on Android, after scrolling the Flatlist and getting its content below the fixed ListHeaderComponent, when focusing the TextInput that lives inside the given header, the screen flickers and the list snaps back to scroll position y = 0.
On iOS everything runs as supposed.
Steps to reproduce:
Using the snack below, on Android, scroll the list and focus the input in the header, notice that the list snaps to new scroll position where y = 0.
Snack, code example, screenshot, or link to a repository: snack
FlatList have the same props as ScrollView and on Android when you focus on the input the ScrollView scroll to the input which in your case it's the first element.
You can avoid that in IOS but on Android, unfortunately, there's still no way to archive it, I prefer you move the view of the header out from the FlatList if it's a requirement or you can keep it the way it's.
I have a password confirmation form inside WebView and I need it to be usable with hardware keyboard.
When I connect hardware keyboard and hit Tab, once focus enters WebView component it skips first focusable element and goes to the second one. Here's simplified version of the screen.
Video. Has anyone faced this issue and how do you overcome it?
I use react-native-webview library.
As a workaround: inside the page that appears inside the WebView add following
document.body.tabIndex = 0;
This will set body as first focusable element and focus will jump over it (almost invisible).
I'm on the Tasks screen where I have a UI kitten Overflow Menu component bound to a card, while I'm on Tasks, it works as expected, but when I switch to another screen (Habits screen) and I go back to Tasks and press the dropdown menu icon the OverflowMenu appears on the Habits screen, not on Tasks.
This is a link for an expo snack to reproduce the problem.
https://snack.expo.dev/#sabri0o/experimenting-things
I found the problem:
you are using inside the add task component.
must be used only once and it should be on the top layer of your application “aka”
If you use it in multiple places it will break the app behavior as for each used the component will look at it as an anchor for its UI (in this case the dropdown will see the app provider in add task as the anchor after navigating to it so it will bypass the one wrapping the app.
For simpler words:
Think of the as a box, If you use another in a component inside of it you create a smaller box, once you visit that component’s screen the box now will be the smaller one and the UI kitten components will relate to and inside that box.
What happened exactly in your app:
The app renders ==> Generate the first (wrapping the navigator in App.js) ==> you click on the dropdown (everything is fine) ==> you navigate to “habits/Add task” screen ==>Generate a second (a smaller box)==> the dropdown now is linked to the new ApplicationProvider ==> you get back to “tasks” screen ==> click on the dropdown ==> it displays inside the new (the smaller box)
That’s why you see it inside the “habits/Add task” screen
Please take a look at this example on the react native docs.
https://reactnative.dev/docs/panresponder
On a device, if you start a touch outside of the box and then drag over the box, the PanResponder doesn't trigger (this is the expected behaviour)
But on web, if you start a click outside of the box then drag your mouse over the box, the box will start dragging along with your cursor.
Is there a way to only trigger the PanResponder if the click started on the element that is responding?