React-native: Long Text doesn't render correctly when in ScrollView

[zuccha]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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(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 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>
);

[triplea24]

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:

export default () => (
  <ScrollView contentContainerStyle={{ flex: 1}}>
    <Text style={{ flex: 1}}>{'a'.repeat(25000)}</Text>
  </ScrollView>
);

[zuccha]

Hi @triplea24 thank for your help. I tried with flex: 1, but that way the ScrollView is not scrollable anymore. It is easy to see by putting two long texts one after the other

import React from 'react';
import { Text, ScrollView } from 'react-native';

export default () => (
  <ScrollView contentContainerStyle={{flex:1}}>
    <Text>{'a'.repeat(25000)}</Text>
    <Text>{'b'.repeat(25000)}</Text>
  </ScrollView>
);

The texts should have the same length, but I can't scroll through the 'b's. However, if I remove the flex: 1, the text disappears (but the view has the correct size). I don't think it's a problem of size (again, the view has the correct size).

[LucasMonteiro1]

Same problem

[grigory-lapshin]

Have same problem but with even with text half of the specified length

[danilobuerger]

The bug seems to be related to the height of the content. So with a smaller font size, more text can be displayed.

[danilobuerger]

Seems to be a long standing issue: https://github.com/facebook/react-native/issues/9077

[alangumer]

Same problem here, agreed with @zuccha seems like the issue is with the Text component, the View size is correct.
@zuccha did you find a workaround this?

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>`}} />

[ericlewis]

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.

[CatapultJesse]

Snack reproducing: https://snack.expo.io/@jkcooper/rn22713-long-text-in-scrollview

[CatapultJesse]

Related Issue: https://github.com/faceabook/react-native/issues/19453

[rickhanlonii]

Dupe of https://github.com/facebook/react-native/issues/19453 👌

[KaviduAloka]

Add flexShrink: 1