React Native: how to keep multi-line text input visible above the keyboard

Question

I have a TextInput with multi-line typing to true. I scroll the input in focus with:

scrollResponder.scrollResponderScrollNativeHandleToKeyboard( React.findNodeHandle(this.refs.myInput), 0, true ); 

However, when the multi-line TextInput expands, the text will be hidden under the keyboard. I just want to scroll down when the cursor / current text is not displayed. Therefore, I can’t just run the above code when changing the text, because it will scroll the view even if the current cursor / current text is visible (for example, editing on the first line).

Is there a way to get the cursor / current position of the text on the screen? Or is there another way to do what I'm trying to do?

Currently

What I'm trying to achieve:

Answer 1

You can use the onLayout method provided by View (whose text continues). It returns the dimensions of the view, which you can use to recalculate the scroll position of your scroll.

Answer 2

I found this component ... but it does not work for me (I get errors in "import"). I assume that they will eventually be fixed.

https://github.com/VansonLeung/react-native-keyboard-aware-view

Answer 3

The best way to do this is apparently in a scrollable library, taking into account the response on the keyboard and use the _ scrollToInput method and follow what the docs say.

The only thing I had to change was "this.scroll.props.scrollToFocusedInput (reactNode)" instead of "this.scroll.scrollToFocusedInput (reactNode)" in the docs!