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).
Related
I created a modal using react-native-modalfy(because of its universal usage) that has an input field. On android everything is working as expected(i.e., modal moving up when keyboard aperars) but on the iOS, whenever I try to type something the keyboard appears on the modal UI and doesn't allow me to see anything that happens on the modal UI. Is there any workaround to get past this issue?enter image description here
So I have a restaurant listing with a filter at the top and below that the restaurants are updated as you type to match your filter. When your filter does not return anything the view is then changed to show a "No restaurants found, change your filter" type message. I have this set up as a KeyboardAvoidingView because I wanted it centered vertically, and when you have the keyboard open it's sitting just barely above it, and doesn't look great. With the view active however it's pushed up a bit and becomes centered with what is visible.
My problem is that once the filter is used enough to hide all restaurants, the KAV is then shown in the render function but doesn't recognize that the keyboard is open and it needs to move. If I get to that stage and then close/re-open the keyboard it works, but that is far from ideal.
I've already checked out this thread and tried the solution found there: KeyboardAvoidingView - Reset height when Keyboard is hidden but that did not work for me unfortunately.
And this thread seems to have the same problem as I do: react native KeyboardAvoidingView with already opened keyboard dont work properly but the solution was to hide the keyboard, which I do not want. I want them to correct their input and reduce the filter immediately using the already-open keyboard.
Is there a way I can introduce the KAV after the keyboard is already open and have it react to the already-opened keyboard?
I have a screen with WebView (react-native-webview) which has scrollable content. If user continues scrolling after reaching the end of WebView, I want to take user to a different screen with a swipe up animation. With WebView's onScroll function property, I am able to determine if the user has reached end of content or not. But I am not able to take user to a different screen with an animation effect.
Since WebView acts different for android and ios platform (you can continue scrolling even after reaching end of content on ios), I had to use PanGestureHandler to identify if the user is performing swipe up action after reaching end of web content. But when I manually try to navigate user to a different screen, I am unable to create swipe up effect similar to one in GIF below.
I am using react-navigation v5 in my app.
I have already tried using react-native-swiper. It does not work well in Android because it internally uses Scrollable and WebView stop scrolling inside a Scrollable component.
I am using custom HTML content here, so replacing WebView is not really a choice. Is there a way to utilize Stack Navigator to create such an effect?
Thank you.
I have a view, in which there is a redux form field linked to a text input.
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
Second, on finished editing, is there a way to still keep the keypad up there?
I have tried to set blurOnSubmit to false in TextInput, it seems to stop me from losing the focus by clicking outside.
Lastly, there is also a button on that page which will start a request with the input value, on resolved, a modal will slide up from the bottom to show a success screen. This modal is implemented using react-navigation. The modal is a relatively small rectangle shape with the rest part transparent. So users can see the original page even when the success modal is up. In this case, is there a way to always show the keypad in the original screen even when the modal is up?
First of all, is there a way to show that keypad on initial rendering without the sliding in animation?
No. React Native doesn't support a way to disable the slide animation.
Second, on finished editing, is there a way to still keep the keypad up there?
If the TextInput is being rendered inside a ScrollView, add keyboardShouldPersistTaps=handled. https://facebook.github.io/react-native/docs/scrollview#keyboardshouldpersisttaps. It will hold the focus.
In a react-native form, when switching from one TextInput to the next one, the second grabs focus for an instant and then suddenly RN dismisses the keyboard.
I have onSubmitEditing coded to move to next input, but the user needs to click on enter in the keyboard, I can also override onEndEditing however that forces you to move to the next input and maybe you didn't touch that one.
I found out that the problem is related to having TextInputs within a ScrollView, focus between inputs in this component doesn't work as expected.
keyboardShouldPersistTaps={true} is deprecated so need to use keyboardShouldPersistTaps="always"