react-native: TextInput onContentSizeChange returns incorrect layout size instead of content size on Android
Description
The onContentSizeChange
prop of the TextInput
component does not work on Android as it does on iOS. On Android it seems to be returning the layout height and width of the TextInput
view, rather than the height and width of the text.
This same issue has been reported before in https://github.com/facebook/react-native/issues/25487 and https://github.com/facebook/react-native/issues/19696, but does not seem to have been fixed
React Native version:
System: OS: macOS 10.15.6 CPU: (16) x64 Intel® Core™ i9-9980HK CPU @ 2.40GHz Memory: 71.45 MB / 32.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.3 - /Users/travisnuttall/.rbenv/shims/pod SDKs: iOS SDK: Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: API Levels: 28, 29, 30 Build Tools: 28.0.3, 29.0.2, 30.0.1 System Images: android-30 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6626763 Xcode: 11.6/11E708 - /usr/bin/xcodebuild Languages: Java: 1.8.0_242-release - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 npmGlobalPackages: react-native: Not Found
Steps To Reproduce
Run the following code on both iOS and Android platforms, note the inconsistency in the logged values from `contentSize:
import React from 'react';
import { View, TextInput } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1, marginTop: 40 }}>
<TextInput
defaultValue="test"
onLayout={ e=> {
console.warn("single line layout", e.nativeEvent.layout)
}}
style={{ width: 200, lineHeight: 30, backgroundColor: '#CCC' }}
onContentSizeChange={ e=> {
console.warn(e.nativeEvent.contentSize)
}}
/>
<TextInput
defaultValue="test"
onLayout={ e=> {
console.warn(e.nativeEvent.layout)
}}
multiline
style={{ width: 200, lineHeight: 30, backgroundColor: '#CCC' }}
onContentSizeChange={ e=> {
console.warn(e.nativeEvent.contentSize)
}}
/>
</View>
)
}
}
Expected Results
On iOS as you edit text on single or multiline TextInput you get the actual width of the characters entered. I would expect the same behavior on Android. Effectively this functionality is not actually implemented on Android at the moment.
Snack, code example, screenshot, or link to a repository:
See code sample in reproducible steps
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 19
- Comments: 18 (2 by maintainers)
still an issue
Guys, I found the solution. It’s incredible unintuitive but try adding a backgroundColor to the input…
https://user-images.githubusercontent.com/104234396/188017478-da6cbba8-71bb-4e90-acc6-e0329d7934af.mp4
Open sesame
This is absolutely messing up my logic to increase the size of the text input as the user types. Wtf man why is react native on android such a pain