-
Notifications
You must be signed in to change notification settings - Fork 24.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Long Text doesn't render correctly when in ScrollView #22713
Comments
Hi @zuccha, You should add some style to the ScrollView's container so it can stretch and completely fit in the screen. Just replace it with this snippet:
|
Hi @triplea24 thank for your help. I tried with
The texts should have the same length, but I can't scroll through the 'b's. However, if I remove the |
Same problem |
Have same problem but with even with text half of the specified length |
The bug seems to be related to the height of the content. So with a smaller font size, more text can be displayed. |
Seems to be a long standing issue: #9077 |
Same problem here, agreed with @zuccha seems like the issue is with the Text component, the View size is correct. The workaround I found is to use a WebView <WebView style={styles.transcript} source={{html: `<p style="font-size:48px;text-align:center">${slide.description}</p>`}} /> |
I did some investigation in to this bug, and it appears to be related to Yoga, or the way we calculate heights using NSTextStorage. I wasn’t able to dig in much further. |
Snack reproducing: https://snack.expo.io/@jkcooper/rn22713-long-text-in-scrollview |
Related Issue: https://github.com/faceabook/react-native/issues/19453 |
Dupe of #19453 👌 |
Add flexShrink: 1 <Text style={{ flexShrink: 1 }}> |
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
Memory: 1.82 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.11.0 - ~/.nvm/versions/node/v10.11.0/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.11.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 25, 26, 27, 28
Build Tools: 26.0.3, 27.0.3, 28.0.2
System Images: android-26 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.57.8 => 0.57.8
npmGlobalPackages:
react-native-cli: 2.0.1
Description
When placing a
Text
component into aScrollView
on iOS, ifText
contains too many characters, then no text is rendered, however theText
component occupies the correct amount of space (i.e., the view scrolls). The number of characters for breaking theText
component varies depending on the device, but it is usually around 25,000.N.B.: The bug is not present if we replace
ScrollView
withView
.This bug is not present on Android.
Wrong behaviour (no text, but the view scrolls):
Correct behaviour (text and the view scrolls):
Reproducible Demo
To reproduce the bug, run the following code on iOS
The text was updated successfully, but these errors were encountered: