[Android] TextInput doesn't scroll properly when restricting the height on an expanding TextInput

[jonasb]

Description

I'm creating a InputText where I want to restrict the height to a maximum. When I do it the TextInput doesn't automatically scroll when I write enough to add another line of text. That means I have to manually scroll down to see what I'm typing.

• It works on iOS as expected
• It works as expected if I'm setting a fixed height (style={{height: 200}})
• It works as expected if I don't restrict the height (style={{ height: Math.max(35, this.state.height) }})

Reproduction

class AutoExpandingTextInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            text: 'React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native.',
            height: 0,
        };
    }
    render() {
        return (
            <TextInput
                {...this.props}
                multiline={true}
                onChange={(event) => {
                    // onContentSizeChange doesn't work on Android, use onChange instead https://github.com/facebook/react-native/issues/11692
                    this.setState({ height: event.nativeEvent.contentSize.height });
                }}
                onContentSizeChange={(event) => {
                    this.setState({ height: event.nativeEvent.contentSize.height });
                }}
                onChangeText={(text) => {
                    this.setState({ text });
                }}
                style={{ height: Math.min(200, Math.max(35, this.state.height)) }}
                value={this.state.text}
            />
        );
    }
}

Solution

?

Additional Information

• React Native version: 0.42
• Platform: Android
• Operating System: MacOS

[st0ffern]

#11692 (comment)

[Palisand]

@jonasb @shergin This is also happening on RN 0.46.1. Simply including

onContentSizeChange={() => {}}

is enough to cause what appears to be disabling automatic scrolling, even on inputs of fixed height!

[kkotelczuk]

I have the same issue in RN 0.46.4

[Palisand]

@shergin (in response to 😕 ) Try out this snack on an android device: https://snack.expo.io/BkhOoGtLZ. I used a Galaxy S6.

[bas-ie]

Confirmed on RN 0.46.4, with:

  handleContentSizeChange = ({ nativeEvent }) => {
    const { height } = nativeEvent.contentSize
    this.setState({
      inputHeight: height > MAX_INPUT_HEIGHT ? MAX_INPUT_HEIGHT : height
    })
  }

  render () {
    return <View>
      <TextInput
        onContentSizeChange={this.handleContentSizeChange}
        style={ height: this.state.inputHeight } />
    </View>
  }

[teyou]

confirmed ios doesn't have this issue only android

[guysegal]

any progress on this issue?

[st0ffern]

@guysegal use workaround as posted

[shergin]

Yes, I am still working on this.

[guysegal]

@Stoffern which workaround are you referring to? I didn't find a workaround for the case where max height is defined

[JaxGit]

This bug wasn't happening when we were using RN 0.38.0, should be some changes afterwards

[huanghaodong]

I have the same issue in RN 0.48.3

[kesiena115]

By looking at the code in react-native-autogrow-input, I was able to create a Component that solves this problem for me (I've only tested it on Android). This is a messy hack because I use two TextInput. The user sees only one of them. The hidden TextInput handles onContentSizeChange() while the visible one receives user input, grows & scrolls appropriately. The two TextInput communicate with each other via the component state. The component requires two props: minHeight and maxHeight. Feel free to customize this for your use case or let me know if you have a better solution.

import React, { PureComponent } from 'react';
import { TextInput, View } from 'react-native';

import PropTypes from 'prop-types';

export default class AutoGrowInput extends PureComponent {

  componentWillMount() {
    this.setState({
      height: this.props.minHeight,
      inputValue: '',
    });
  }

  onContentSizeChange = (event) => {
    const { minHeight, maxHeight } = this.props;
    // Adding 30 to provide extra padding.
    let inputHeight = Math.max(minHeight, event.nativeEvent.contentSize.height + 30);
    if (inputHeight > maxHeight) {
      inputHeight = maxHeight;
    }
    if (this.state.height !== inputHeight) {
      this.setState({
        height: inputHeight,
      });
    }
  }

  clear = () => {
    if (this.inputRef) {
      this.inputRef.setNativeProps({ text: '' });
      this.setState({
        height: this.props.minHeight,
        inputValue: '',
      });
    }
  }

  value = () => {
    return this.state.inputValue;
  }

  focus = () => {
    if (this.inputRef && this.inputRef.focus) {
      this.inputRef.focus();
    }
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          marginTop: 5,
          marginBottom: 10,
          height: this.state.height,
          alignSelf: 'stretch',
          padding: 0,
        }}
      >
        {/*
        This is the TextInput the user sees. It does not have onContentSizeChange(), so it
        scrolls as expected. It receives the user input and stores it as this.state.inputValue
        */}
        <TextInput
          ref={ref => this.inputRef = ref}
          multiline
          {...this.props}
          style={[this.props.style, { height: this.state.height }]}
          onChangeText={val => this.setState({ inputValue: val })}
          value={this.state.inputValue}
        />
        {/*
        This is a hidden TextInput that the user does not see. It uses onContentSizeChange() to
        calculate the height of the input the user sees. It receives the user's input from
        this.state.inputValue.
        */}
        <TextInput
          multiline
          style={{ height: 0, margin: 0, padding: 0 }}
          onContentSizeChange={this.onContentSizeChange}
          value={this.state.inputValue}
        />
      </View>
    );
  }
}

AutoGrowInput.propTypes = {
  style: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.array,
    PropTypes.object,
  ]),
  minHeight: PropTypes.number,
  maxHeight: PropTypes.number,
};

[lukewlms]

I only get the textbox to grow on an <Enter> press. A long line that wraps several times always returns a height of 14; only after pressing <Enter> I get a height of 24 (then 42, etc.)

How can we get autogrowing to work with wrapping? I'm using the exact example from @jonasb at the top of this thread.

[konradkierus]

This issue also exists with RN 0.49.0 with 'autoGrow' option and 'maxHeight' property set to imitate the same behavior as with using onContentSizeChange which shouldn't surprise as internally auto-growing feature uses onContentSizeChange.

[joncursi]

Same issue here. I was able to work around this by setting onContentSizeChange to undefined on Android, and specifying a fixed height through the style prop on Android as well. I only apply these changes on Android via Platform.OS === 'android' ? A : B.

Hoping for a fix sometime soon, my TextInput component is looking pretty nasty with all of these if/else workarounds for Android lately.

[shergin]

Hey there,
It will not fix this particular issue, but look at this: c550f27.
TextInput on Android has dynamic intrinsic content size now, similarly to iOS. It basically makes autoGrow deprecated.

However, I still don't know how to fix this issue. 😢

[joncursi]

My workaround no longer works in RN 0.49.1. 😢

[enahum]

having the same issue for RN 0.49.1 :S

[Palisand]

RN 0.49.1 - Android

Now automatic scrolling for TextInput doesn't work AT ALL. I was able to, at some point, observe auto scrolling when setting a fixed height as @jonasb has stated. Now that's gone! Can any one else confirm?

[joncursi]

@Palisand I can confirm 100%.

[Palisand]

I remember a time (around this commit) where TextInputs on Android were working as expected: auto-expand, cursor tracking, the whole lot. Now it seems multiline inputs where the amount of text is expected to exceed the height are pretty much useless. What happened?! 😭

[Palisand]

@shergin I have taken a look at your changes in c550f27 on the RNTester app. Is there a way to get the screen to scroll to the line where the cursor is located (rather than having the user manually scroll)? This was done automatically in an earlier version of react-native, ~0.46 if I remember correctly.

Also, what is the problem you are facing exactly when trying to get auto-scrolling working again?

[shergin]

@Palisand Well, I just tried to fix/enable it, but I failed. So, yes, the current state is: layout is working, (auto)scrolling is not (and I don't know how to fix that, yet).
But, it should be (easy) fixable. 😂

[Palisand]

I was specifically referring to the scrolling of a parent view of a growable TextInput rather than the input itself. It's good to hear that you think the latter should be easily fixable as this is pretty critical functionality. I personally don't even know where to begin making changes to get this working (ReactTextInputManager.java, ReactTextEdit.java?).

[konradkierus]

@shergin @Palisand I've tracked the issue basing on RN 0.49-stable branch and this is a guilty method: https://github.com/facebook/react-native/blob/0.49-stable/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L121

I've created my own implementation of ReactEditText which looks like this:

public class CustomTextInput extends ReactEditText {
    public CustomTextInput(Context context) {
        super(context);
    }

    @Override
    public boolean isLayoutRequested() {
        return false;
    }
}

Then I've overrided ReactTextInputManager like this:

public class CustomTextInputManager extends ReactTextInputManager {

    @Override
    public String getName() {
        return "CustomTextInput";
    }

    @Override
    public CustomTextInput createViewInstance(ThemedReactContext context) {
        CustomTextInput editText = new CustomTextInput(context);
        int inputType = editText.getInputType();
        editText.setInputType(inputType & (~InputType.TYPE_TEXT_FLAG_MULTI_LINE));
        editText.setReturnKeyType("done");
        editText.setTextSize(
                TypedValue.COMPLEX_UNIT_PX,
                (int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)));
        return editText;
    }
}

and then I've copy-pasted the TextInput class and put my CustomTextInput here https://github.com/facebook/react-native/blob/0.49-stable/Libraries/Components/TextInput/TextInput.js#L42

And the issue is gone! UPDATE the above method has some drawbacks, please continue reading if you need a better workaround (you may don't need it)

This is surely a pretty short workaround but it may require proper implementation and testing on master RN branch. I'm not sure why someone would not want the automatic scroll on the TextInput so I don't know what is the purpose of the original implementation and which use cases it handles. I thought that maybe setting initial very long text on TextInput with restricted height would cause the TextInput to be scrolled to the bottom but no, it didn't break this behavior. (EDIT) it actually breaks this specific behavior. I've thought about setting some kind of 'autoScroll' prop on input field's focus event and resetting it on input field's blur event but I'm not sure if this is a proper way of doing this. Anyway, below you can find this implementation if anyone is interested on it.
I'm not proud of it but hey, it works for basic use cases - not sure if this is a proper way of handling, especially after @shergin changes in master here c550f27 . Also @Palisand I'm notifying you here in case if you're interested.

public class CustomTextInputManager extends ReactTextInputManager {

    @Override
    public String getName() {
        return "CustomTextInput";
    }

    @Override
    public CustomTextInput createViewInstance(ThemedReactContext context) {
        CustomTextInput editText = new CustomTextInput(context);
        int inputType = editText.getInputType();
        editText.setInputType(inputType & (~InputType.TYPE_TEXT_FLAG_MULTI_LINE));
        editText.setReturnKeyType("done");
        editText.setTextSize(
                TypedValue.COMPLEX_UNIT_PX,
                (int) Math.ceil(PixelUtil.toPixelFromSP(ViewDefaults.FONT_SIZE_SP)));
        return editText;
    }

    @ReactProp(name = "autoScroll", defaultBoolean = false)
    public void setAutoScroll(CustomTextInput view, boolean autoScroll) {
        view.setAutoScroll(autoScroll);
    }
}

public class CustomTextInput extends ReactEditText {
    private boolean autoScroll = false;

    public CustomTextInput(Context context) {
        super(context);
    }

    private boolean isMultiline() {
        return (getInputType() & InputType.TYPE_TEXT_FLAG_MULTI_LINE) != 0;
    }

    @Override
    public boolean isLayoutRequested() {
        if (isMultiline() && !autoScroll) {
            return true;
        }
        return false;
    }

    public void setAutoScroll(boolean autoScroll) {
        this.autoScroll = autoScroll;
    }
}

render() {
  return (
    <TextInputComponent
      multiline
      onFocus={() => {
        if (this.inputField && Platform.OS === 'android') {
          this.inputField.setNativeProps({
            autoScroll: true,
          });
        }
      }}
      onBlur={() => {
        if (this.inputField && Platform.OS === 'android') {
          this.inputField.setNativeProps({
            autoScroll: false,
          });
        }
      }}
      ref={(ref) => {
        this.inputField = ref;
      }}
    />
  )
}

[Palisand]

@konradkierus @shergin Just tested this by changing ReactEditText directly. This solves both scrolling issues. However, it might lead to some unintended behavior with onContentSizeChange (see this commit).

If anyone is interested in how to extract the cursor's position so that you can scrollTo it, I posted a guide on medium.

[joncursi]

Still there for me as well on 0.50.3

[lucidtheory]

I found a solution that works for my purposes so figured I'd share

This code works for React Native >=50.0:
https://snack.expo.io/r1y4tXVxz

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native';

export default class App extends Component {

  state = {
      text: '',
  };

  render() {
    return (
      <KeyboardAvoidingView
        behavior = "position"
        keyboardVerticalOffset= {80}
        keyboardDismissMode = "on-drag"
      >
        <View
        style ={{height:500, backgroundColor: "blue"}}
        />
        <ScrollView
          ref={(scroll) => {this.scroll = scroll;}}
          onContentSizeChange = {() => {this.scroll.scrollToEnd({animated: true})}}
          style = {{height:80}}
        >
            <TextInput
              blurOnSubmit = {false}
              multiline = {true}
              style={styles.text}
              onChangeText={text => this.setState({ text })}
              placeholder={"Start Typing..."}
            />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
});

This code works for React Native <50.0:
https://snack.expo.io/S1wXbNNxM

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native';

export default class App extends Component {

  state = {
      text: '',
      textareaHeight: 60,
  };
  
  _onContentSizeChange = ({nativeEvent:event}) => {
    this.setState({ textareaHeight: event.contentSize.height });
  };

  render() {
    return (
      <KeyboardAvoidingView
        behavior = "position"
        keyboardVerticalOffset= {80}
        keyboardDismissMode = "on-drag"
      >
        <View
        style ={{height:500, backgroundColor: "blue"}}
        />
        <ScrollView
          ref={(scroll) => {this.scroll = scroll;}}
          onContentSizeChange = {() => {this.scroll.scrollToEnd({animated: true})}}
          style = {{height:80}}
        >
            <TextInput
              blurOnSubmit = {false}
              multiline = {true}
              style={[styles.text, {height: this.state.textareaHeight}]}
              autogrow
              onChangeText={text => this.setState({ text })}
              onContentSizeChange={this._onContentSizeChange}
              placeholder={"Start Typing Plz..."}
            />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
});

There are some nested ScrollViews since KeyboardAvoidingView is a ScrollView but it works pretty well as a workaround without having to do native code. The key is using the ScrollView's scrollToEnd anytime the content size changes.

I only use KeyboardAvoidingView because I'm building a chat app and the message box is at the bottom of the screen.

[dead23angel]

@esdrasetrenne hi!
I'm using https://github.com/FaridSafi/react-native-gifted-chat .
Can you tell me how to fix this mistake in it?

[lucidtheory]

Hi @dead23angel I dont know about that. It could require fixing the actual library code?

Somebody pointed out a flaw in my code though so here is an updated version that works in case a user scrolls up and is editing part of the text they wrote:

https://snack.expo.io/rJHCrEYef
good for React Native >= 50.0
(to get this to work for React Native < 50.0 just add the onContentSizeChange method to the text input like the example above)

import React, { Component } from 'react';
import {
  StyleSheet,
  TextInput,
  View,
  ScrollView,
  KeyboardAvoidingView
} from 'react-native';

export default class App extends Component {

  state = {
      text: '',
      textYPosition: 0,
      textHeight: 0

  };

  updateScrollPosition(width, height){

    let yPositionDifference = (height - this.state.textHeight)
    let newYPosition = this.state.textYPosition + yPositionDifference

    this.scroll.scrollTo({x: 0, y: newYPosition, animated: false})

    this.setState({textHeight: height})
  }

  handleScroll(scrollEvent){
    let textYPosition = scrollEvent.nativeEvent.contentOffset.y
    this.setState({textYPosition})
  }
  render() {
    return (
      <KeyboardAvoidingView
        behavior = "position"
        keyboardVerticalOffset= {80}
        keyboardDismissMode = "on-drag"
      >
        <View
        style ={{height:500, backgroundColor: "blue"}}
        />
        <ScrollView
          ref={(scroll) => {this.scroll = scroll;}}
          onContentSizeChange = {(width, height) => this.updateScrollPosition(width, height)}
          style = {{height:80}}
          scrollEventThrottle = {1}
          onScroll = {nativeEvent => this.handleScroll(nativeEvent)}
        >
            <TextInput
              blurOnSubmit = {false}
              multiline = {true}
              style={styles.text}
              underlineColorAndroid = "transparent"
              onChangeText={text => this.setState({ text })}
              placeholder={"Start Typing..."}
            />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    marginBottom: 16,
    paddingHorizontal: 8,
  },
});

This is obviously pretty messy and I actually like the simplicity of @konradkierus version, but since I am using Expo for react native I do not have the luxury of using native code. It needs to be 100% javascript.

The key here is updating the component's state using the ScrollView's onScroll method to capture the new current Y position of the TextInput any time the scroll position changes.

After that, anytime the onContentSizeChange method is called we save the new content height to state. We also use the scrollTo method to scroll to our new Y position. Our new Y position increments the current Y position by the difference of the new content height and the previous content height we saved in state.

Since this is only an Android problem, I will probably only use this component for my Android rendering and let my iOS rendering stay the same. I am kind of concerned about what performance issues if any could come from calling setState too much

An upstream fix would be super ideal 👍

[shergin]

Finally, 0bef872 should fix this.
If anyone can test it, I will appreciate that. 😄

[riryjs]

@shergin thank you, how can i implemented it in RN 48.2?
I have a huge code so I think i won't install new RN version since I have tried and too many configuration to re-setup.

[dead23angel]

@shergin

It would be nice to make this commit to version 0.47, because I like the @riryjs code is great to update the packages

[jamesreggio]

@shergin, I've confirmed that this fixed the issue (by cherry-picking patch atop v0.50.3). Thanks!

[ide]

FYI - we've cherry-picked this into 0.51-stable (RC with this patch still not released but it will go out with the final 0.51.0 release assuming it's not reverted).

[lucidtheory]

seriously @shergin thank you so so much. This is such a save!

[mannol]

@ide Any idea when the 0.51 will be released?
@jamesreggio Any idea how to cherrypick this commit into a project initialized with react-native init (react-native-git-upgrade doesn't work with 0.51.0-rc.3 which should have this commit)?

Thanks!

[jamesreggio]

Hey @mannol, cherry-picking Android fixes is a fairly involved process because you first need to setup your project to build Android from source. It's been a long time since I set up the Android build in my project, but all I remember is that it took a while to get working.

If you are building Android from source, the fastest way to 'cherry-pick' is to actually just copy/paste the changes to ReactEditText.java from this commit into your node_modules directory, and then use a tool like patch-package to preserve the changes across yarn/npm installs.

[ide]

0.51 is planned to be released sometime today (though unexpected things can happen, so give it a few extra days of buffer room).

[shergin]

❤️

[xcarpentier]

I see it's fixed in 0.52 instead: 0bef872

[thambt]

Hi,
it fixed in Android. but i see it in IOS.
i'm in R.N 0.54.0

[arash-hacker]

i had this problem
i used

//alignSelf: 'stretch', //flexDirection:'row', height: Platform.OS=="android"?35:30, fontSize:Platform.OS=="android"?12:12, borderColor: 'gray', borderWidth: 1, margin:10,
in my style and when clicking on textinput it scrolls wihout cause !!
just by commenting two first line it fixed !!
RN 0.54

[elgrones]

Still there for me as well on 0.50.4