How can I automatically scroll the view up when I focus in a TextInput box and a keyboard is shown such that the TextInput box is not hidden behind the keyboard?
This question has been asked on StackOverflow a few times and I implemented the solution here which is the general solution advised in most of the answers. This solution works fine in the iPhone simulator but doesn't work on the actual phone. Has anyone else experienced this problem that the solution doesn't work on the actual phone?
Second thing that I noticed after adding this solution is that now if I am focussing in a TextInput box and keyboard is shown, if I press a button or try to focus into a different TextInput box, the first touch is always consumed to hide the keyboard and the button is not pressed or the other TextInput box is not focussed. It is a little annoying for the user to have to do the operation twice. Has anyone else observed this problem?
Please let me know if you have any inputs on how to solve these problems?
I assume you are using this solution. I ran into the same problem and made some adjustments (see gist). I addressed both problems you describe. keyboardShouldPersistTaps solves your second problem.
I have not found the exact reason why the spacing works in Simulator but not on a real device. It has something to do with the timing. The original code sets a timeout on input focus and tries to scroll down after 50ms. Increasing this to for example 500ms makes it work on devices too, but I don't really like adding magic timeouts that I don't understand. I changed it, so onFocus I look up the element to scroll to and store a reference. When onKeyboardDidShow fires I use the reference.
Related
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've read multiple questions regarding an existing issue with the PagerView library being combined with the KeyboardAvoidingView. All of the asked questions didn't lead me to a full solution. Multiple stated that the behavior of the KeyboardAvoidingView needed to be changed to only padding, which caused my view to not work at all. Is there another workaround or full solution to this problem?
Behaviour
Pressing on the input field makes the keyboard appears and disappears immediately. (it's not willing to focus).
I've posted a screenrecording on YouTube.
Expected behavior
The keyboard should just stay in focus whenever the input field is pressed.
Sometimes in my UWP app I experience a problem while scrolling with my scrollwheel. Basically the scrollbar moves when I use my scrollwheel, but the content isn't rendered properly; resulting in an empty block which gets scrolled up and down.
Yet everything works fine when I click and hold the scrollbar instead of using the scrollwheel on my mouse.
I have to restart my UWP app in order to get things back to normal.
The issue appears while scrolling a default XAML ListView, but also in a RadDataGrid (Telerik).
I have made a screen recordingo of this issue, which hopefully will illustrate what's happening more clearly.
Click to see video
I haven't found exact steps to reproduce this issue, it just seems to be there at random from time to time.
Does anybody have an idea what might be going on here and how this could be fixed?
Here's the problem: I have a React-Native/Redux app. I need to make sure I can lock the screen (display a modal, really) after X minutes of app inactivity (theoretically someone may have their screen "always on", so I can't rely on the screen turning itself off).
My proposed solution: I want to detect when any touch event happens. I don't want to interfere with them or do anything about it other than reset a setTimeout. But I just want to know when the screen is touched at all.
Displaying the modal itself isn't an issue and is already working. I also have it display the modal if the app leaves the foreground for any reason. I just need the timeout.
I've tried using a TouchableWthoutFeedback that wraps the whole UI and that sorta works, but it doesn't receive any event when a Touchable is farther down the component tree and handles the event. But I've also only used onPressIn and I'm unsure if anything else on it will work as needed. I've looked briefly at PanResponder but that looks a bit more complex than I might need? Not sure on that one, yet.
I'm open to other suggestions, but the only other thing I can think of is having literally every other action in the app (even ones I haven't created yet) send an dispatch up the redux flagpole, and that seems very heavy-handed and prone to error.
is this feasible? What are my options if it's not?
I found the solution. It's to add a onStartShouldSetResponderCapture callback as a prop on a containing View. I can return false in this callback but still notice all the touch events that come through. The Capture portion is important because it gives you access to the event before a "real" touchable can get to it.
Then, in the callback, I just clear and re-create the timer.
Apologies in advance if this is answered but I genuinely couldn't find it. I'm trying to bring up the keyboard type on iPad which appears when pressing the "#+=" button. I've tried going through all the types on the docs and I'm sure that this wasn't successful. Am I missing something or does the user have to click this button every time?
Edit: this question was closed as "off-topic" because it didn't include code or ideas or what I've tried already... Therefore for a bit of extra detail, I used EVERY keyboard type that is available on the docs e.g.
theTextField.keyboardType = UIKeyboardTypeNumberPad;
This did not yield the results that I require, which is the keyboard plane that appears when you press the #+= button because I wanted users to go straight to that one.
Unfortunately, this is impossible. It's not a keyboard type you want, it's a keyboard plane. There is no public API to switch or in any way access the keyboard planes.
One solution could be to create your own keyboard with the symbols you want. Another solution would be to open the keyboard and then generate a touch event that will switch the keyboard plane. However, this would be complicated, non-portable and a bit dangerous.
You have no ability to affect the built-in keyboards.
You can however create your own custom input view which you would set on the inputView of your text editing view before you make it first responder. Then iOS will show this view instead.
Have a look at this project of mine which implemented a "Morse keyboard" (April Fool's joke), but demonstrates how to achieve a custom keyboard that still interacts with a text field as you'd expect. http://www.cocoanetics.com/2012/04/dtmorsekeyboard-tutorial/