5

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?

Community
  • 1
  • 1
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
  • This has worked great for me: https://github.com/Andr3wHur5t/react-native-keyboard-spacer – Nader Dabit May 27 '16 at 14:08
  • 1
    @NaderDabit I tried the above package you recommended but it didn't work out well for me. For e.g., in one of the screens, I have a DatePicker and a few input boxes and when I press on any input box and the keyboard shows up due to which the view is scrolled upwards, the input boxes will move up but not the DatePicker causing the input boxes to overlap the DatePicker. I was only able to give it a quick try as I am in the middle of implementing a feature in the mobile app and may be there is a problem in my code which is causing the above behavior. I will give it a try again and re-comment. – Varun Gupta May 29 '16 at 15:54

1 Answers1

4

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.

Community
  • 1
  • 1
Daniel Basedow
  • 13,048
  • 2
  • 32
  • 30
  • Thanks for the response. I am in the middle of something due to which I was not able to try out your solution. I will give it a try as soon as possible and share my experience. Thanks again for all your help! – Varun Gupta May 29 '16 at 15:56
  • Your solution worked perfectly. I also confirmed that when I increased the timeout in the other solution to 500, it started to work without any other changes which was a very good insight. – Varun Gupta May 31 '16 at 12:45