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:

@S Kraft. Many years later. Did you find a solution for this? — FrenchMajesty, Mar 10 '23 at 22:57

score 3 · Answer 1 · answered Jun 01 '16 at 11:23

3

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.

answered Jun 01 '16 at 11:23

Daniel Schmidt

11,605
5
38
70

It doesn't seem to be called when text is added to the TextInput – laurent Feb 23 '18 at 13:18

score 1 · Answer 2 · answered Jan 14 '18 at 23:51

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!

score 0 · Answer 3 · answered Jul 30 '17 at 14:46

0

I found this component... but it's not working for me (I get errors on "import"). I assume that they will get fixed eventually.

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

answered Jul 30 '17 at 14:46

elcuco

8,948
9
47
69

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

3 Answers3