Description
- 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 infoin 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}