OnContentSizeChange for TextInput doesn't update width

[Craigson]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native version: https://github.com/facebook/react-native/releases
• Run react-native info in your terminal and paste its contents under "Environment"
• Let us know how to reproduce the issue. Include a code sample, share a project, or
  share an app that reproduces the issue using https://snack.expo.io/

Environment

Environment:
  OS: macOS High Sierra 10.13.2
  Node: 10.3.0
  Yarn: Not Found
  npm: 6.1.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.3.1 => 16.3.1
  react-native: 0.55.4 => 0.55.4

Description

I'm trying to create a laterally expanding text field - I have tried simply not setting the width of the TextInput component and let it auto expand, but it visually clips the text.

When using onContentSizeChange property of the TextInput component, the event.nativeEvent.contentSize.width does not update correctly. In fact, it only fires twice after input of first two characters then doesn't fire again.

This issue has been raised before, though only with height. Solutions on StackOverflow say to instead use onChange instead, but the event has no contentSize property that I can use.

Steps to Reproduce

class ExpandingInput extends Component {

  constructor(props) {
    super(props)

    this.state = {
      width: 50
    }

  }

  render() {

    console.log(this.state.width)
    let inputStyle = {
        color: '#fff',
        width: this.state.width,
        fontSize: 60,
        lineHeight: 60,
        fontFamily: 'GT-Walsheim-Bold',
        flexWrap: 'wrap'
    }

      return (
        <View style={styles.containerStyle}>
          <Text style={styles.labelStyle}>{this.props.label}</Text>
          <TextInput
            secureTextEntry={this.props.secureTextEntry}
            placeholder={this.props.placeholder}
            autoCorrect={false}
            style={inputStyle}
            value={this.props.value}
            onChangeText={this.props.onChangeText}
            autoFocus={true}
            autoCapitalize={this.props.capitalize}
            onContentSizeChange={ e=> {
              console.log(e.nativeEvent.contentSize.width)
              this.setState({
                width: e.nativeEvent.contentSize.width
              })
            }}
          />
        </View>
      );
  }
}

Expected Behavior

With the addition of every character, the onContentSizeChange handler should be called and the event passed as an argument to the callback and the e.nativeEvent.contentSize.width should update and represent the width of the TextInput's text (value).

Actual Behavior

Callback fires only twice and returns a width of 524296, presumably because it's never correctly initialized

{height: 101, width: 524296}
Input.js:24 524296
Input.js:24 524296
Input.js:24 524296
Input.js:47 {height: 81, width: 524296}

[alexandru1208]

I have the exact same problem, and it is just on Android, on iOS works fine

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.