Long Text doesn't render correctly when in ScrollView
See original GitHub issue- 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 release: https://github.com/facebook/react-native/releases
Environment
React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: (8) x64 Intel® Core™ 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 a ScrollView
on iOS, if Text
contains too many characters, then no text is rendered, however the Text
component occupies the correct amount of space (i.e., the view scrolls). The number of characters for breaking the Text
component varies depending on the device, but it is usually around 25,000.
N.B.: The bug is not present if we replace ScrollView
with View
.
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
import React from 'react';
import { Text, ScrollView } from 'react-native';
export default () => (
<ScrollView>
<Text>{'a'.repeat(25000)}</Text>
</ScrollView>
);
Issue Analytics
- State:
- Created 5 years ago
- Reactions:6
- Comments:12 (4 by maintainers)
Top GitHub Comments
Add flexShrink: 1
<Text style={{ flexShrink: 1 }}></Text>
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: