React Native: How to keep multi-line textinput visible above keyboard

Question

I have a TextInput with multiline set to true. I am scrolling to the input on focus with:

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

However when the multiline TextInput expands the text will be hidden beneath the keyboard. I only want to scroll down when the cursor/current text is not visible. So I can't just run the code above on text change as it would scroll the view even if the current cursor/current text is visible (like editing on the first line).

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

Currently:

What I'm trying to achieve:

Answer 1

The best way to do it seems to be with the react-native-keyboard-aware-scroll-view library and use the method _scrollToInput and follow what the docs say.

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

Answer 2

You may use the onLayout method, provided by the View (which Text extends). It returns the dimensions of the view, which you may use to recalculate the scroll position of your scrollview.