Keyboard blocks textview on iOS

#1

In my textview, if the text goes more than a few lines the keyboard covers the text, so you can’t see the text. Is there a solution for iOS?

For example, to automatically push the text up so it is always higher than the keyboard?

On iOS, the only recommendation I find is to use the IQKeyboard Manager Plugin.

But this plugin is crashing my app right now. It would also be nice not to have to use a plugin that seems fairly heavy in the changes it makes to the app, in order to accomplish this basic task.

Are there other possibilities?

#2

That plugin is not really heavy, also I can confirm it works with both 3.x and 4.x as I use it in all my apps.

@tjvantoll Any thoughts why this issue occurs?

#3

Thank you for your reply. By ‘heavy’ I don’t mean the size of the plugin, I mean the amount of changes it seems to make relative to the specific functionality I seek. Specifically, when I start up the app with the plugin, my terminal outputs a lot more stuff, and there is a lot of output regarding ‘pods’.

I’m not familiar with pods–I know they are something in iOS that comes up a lot. I’m sure pods are important for certain tasks, but in my earlier experience things that added pods created a bunch of added complication and errors, so I try to avoid plugins that load stuff like that unless strictly necessary.

#4

Any solutions? I just tried the keyboard plugin again after having updated my system, and it gave me this error:

[WARNING]:     WARNING: CocoaPods requires your terminal to be using UTF-8 encoding.
[WARNING]: .
Unable to apply changes on device: ...Error is: Pod install command failed. Error output: 
    Consider adding the following to ~/.profile:

    export LANG=en_US.UTF-8

I’ve tried adding:

export LANG=en_US.UTF-8

to the top of ~/.bashrc

Perhaps not in the right spot?

In any event, the issue keeps happening.

(I’ve also posted this to the issues list on GitHub for the plugin).

Also would be very happy to have a solution that did not require a plugin.

#5

@NLandStuff Sorry for the late reply here. I’m getting back from vacation and catching up.

I’ve hit this issue before and for me I believe I had to add export LANG=en_US.UTF-8 to the top of my ~/.bash_profile file to get things working. You’ll have to let me know if that works for you.

In terms of implementing this functionality without a plugin—you can definitely do it, but it’s not easy unless you have a bit of iOS background. I tried to make this work a few years ago because I didn’t want to take on the CocoaPod dependency either, but I ended up giving up in frustration.

Once you get the plugin working I think you’ll find it works pretty well, and there are quite a few customization options to tweak things too https://github.com/tjvantoll/nativescript-IQKeyboardManager#tweaking-the-appearance-and-behavior.

#6

Thanks. I am just not able to get this to work. Tried again:

  1. add export LANG=en_US.UTF-8 to the top of ~/.bash_profile (opened bash profile with $ open ~/.bashrc )

  2. $ tns plugin add nativescript-iqkeyboardmanager

  3. $ npm install

  4. $ npm clean platform iOS

  5. $ tns run ios

Same error:
WARNING: CocoaPods requires your terminal to be using UTF-8 encoding...

When I remove the plugin, no problem.

I might end up still having the same issues noted in plugin issue 37 (build failure) , but am not there yet.

#7

I’ve been able to get things to work:

  1. $ open ~/.profile

  2. At the top of the profile file, add the following, then save:

export LC_ALL=en_US.UTF-8  
export LANG=en_US.UTF-8

  1. $ tns plugin add nativescript-iqkeyboardmanager

  2. $ npm install

  3. $ npm clean platform iOS

  4. close and reopen terminal

  5. $ tns run ios

Still figuring out the options. The initial plugin created does have a “done” button at the top to close, which is nice, but it still seems to be covering the text for a textview that goes long, but I will play around with it some more.

#8

The keyboard plugin is no longer causing errors–which is great–but I think its probably not quite on point for my needs. I have a standard textview which works fine for the first, say, 7 lines of the textview or so. Once it goes beyond seven lines, the keyboard continues to cover the bottom text of the view when the user is typing.

I expect the solution is not too complicated. Something like:

  1. put a stack layout under the textview
  2. get the height of the keyboard when it comes up.
  3. give the dummy stack layout under the textview the same height as the keyboard when the keyboard comes up. This should push the textview up on the screen so that it is above the keyboard.

I have seen a reference to this method online (for example, see Nativescript issue #2907 on github–referencing the number here not the link bc this discourse site is not allowing me to post the link).

However, the code people use in the link employs a few methods I am not familiar with and I am not quite getting it too work. I am unfamiliar with (i) how to get the height of the keyboard when it pops up on iOS, and then (2) how to dynamically give a stack layout a particular height (the height of the keyboard).

If anyone has a full working example, including relevant imports, I would appreciate it.

#9

One more crack at this:

My issue is solved if I can add a permanent scrollbar to the textview. That way, when the keyboard comes up, the user can always scroll to the bottom of the textview, no matter how large it is.

But, how do I add a scrollbar to the textview so that it is always there? This is different than ScrollView, because ScrollView only scrolls if the app thinks the textview goes bigger than the screen, which it does not in this case (it is blocked by the keyboard, not bigger than the screen).

I have been able to do it if I set the height to some small amount, and then the scrollbar kicks in if the textview is taller than the small height. But this is imperfect bc it requires setting an artificially small height.

Any ideas on how to add a permanent scrollbar to a textview?

#11

Here is my (imperfect) solution for a textview that is covered by the iOS keyboard when the keyboard pops up:

  1. add scrollview to the area that includes the relevant textview.

  2. give the textview itself a very large height, so that it is always more than the screen height. For example, <TextView height=“1800px”… That way, there is automatically a scrollbar. And there is enough of an area in the textview below where text would reasonably be entered (make it larger/smaller depending on how much text you would expect your users to enter). This results in the user being able to scroll to the bottom of the text, and the text at the end of the scroll being above the keyboard.

It seems possible to me that this method could result in some odd visual behavior depending on the iPhone used. But it is working sufficiently well for me right now, so I thought I’d pass it along.

One other note: if you want to have something below the textview that has a very large height, just put that something in a separate row in a gridlayout (ie, text view would be row=“0”, and the next item would be row=“1”).