React-native programmatically scrolling multiline TextInput

Question

I wonder how can I scroll down inside TextInput with multiline argument ? I saw the function onContentSizeChange but I don't see any option to use the inside scroll programmatically.

here is an expo snack to play with (with the current situation) https://snack.expo.io/S1Gpa3pRb

the point is I'm trying to scroll the TextInput down on a new line.

(p.s I'm working on android, I also have an autoGrow option but I want to limit it in some point (this part is easy to make) but after it reach the limit I get the same reaction as the expo shows, the TextInput doesn't scroll down.)

thanks!

Answer 1

We had this exact same problem where i work. We first tried to solve the scrolling problem with the keyBoardAvoidingView component:

https://facebook.github.io/react-native/docs/keyboardavoidingview.html

But that only solved part of our problem, what really fully solved it was a plugin called react-native input-scrollview:

https://github.com/baijunjie/react-native-input-scroll-view

This plugin should solve your problem. On multiline it follows the user as they type and it will automatically move them to a new line. Try out one at a time and see if any of them work.

Hope this helps in some way! :)

Answer 2

You can add TextInput in ScrollView. First create a reference const scrollViewRef = useRef();

then add following code.

<ScrollView 
  ref={scrollViewRef}>
<TextInput 
  onFocus={() => scrollViewRef.current.scrollToEnd({ animated: true})} 
  multiline={true} />
</ScrollView>