Text in a scroll view does not display at large sizes

[jlee0831]

Explain what you did Display a few paragraphs in a Text component nested in a ScrollView with the larger font sizes enabled on phone.

Expected behaviour To see the scrollable text displayed.

Describe the bug The text is display just fine at normal font sizes. When larger font sizes are enabled, the text no longer renders, although it takes up height in the scroll view and is scrollable.

To Reproduce

1. Render a few paragraphs of text in a ScrollView.
2. Validate you can see the text.
3. Go to the Settings app.
4. General > Accessibility > Larger Text > Enable Larger Accessibility Sizes.
5. Return to the app, and validate that the text disappears.

Here is the component that I used to validate.

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

export default class App extends Component<Props> {
  render() {
    return (
      <ScrollView>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    );
  }
}

Possible Solution

My current workaround is to use react-native's Text component instead of react-native-elements.

Your Environment (please complete the following information):

software	version
react-native-elements	1.1.0
react-native	0.59.2
npm or yarn	yarn

[jlee0831]

Seems this is an issue with react-native. The reason why things were working with react-native's Text component for me, was the lack of line-height styles added.