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

FlatList with large content rows will crash only on iOS physical device, but ListView not. #16449

Closed
patw0929 opened this Issue Oct 18, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@patw0929
Copy link
Contributor

patw0929 commented Oct 18, 2017

Is this a bug report?

Yes.

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 7.2.1
Yarn: 0.27.5
npm: 5.1.0
Watchman: 4.7.0
Xcode: Xcode 9.0 Build version 9A235
Android Studio: 2.3 AI-162.3871768

Packages: (wanted => installed)
react: 16.0.0-alpha.12 => 16.0.0-alpha.12
react-native: 0.48.0 => 0.48.0

Steps to Reproduce

  1. Made a FlatList which have more than 20 data rows
  2. The data row has more than 14,000 characters in it which is wrapped by <Text>
  3. Try to run it on physical iOS devices. And try to swipe down to the bottom, it will crashes. (I use iOS 11.0.3 on iPhone 7 Plus and iPhone 6)

Expected Behavior

It should not be crashes.

First, large content is reasonable, we can't restrict users to post only short articles. Second, ListView can handle it, but why FlatList can't?

Actual Behavior

FlatList with large content rows will crash only on iOS physical device, but ListView not.

I made a SNS forum app, it let users to post their opinions. The app has a post list page which including a FlatList with many rows. If people post their opinion with many characters (about 20 rows with 14,000 characters each row), it could be crashed on iOS devices.

To clarify this issue, I made a simple example to reproduce it:

https://snack.expo.io/BkUX2A46Z

Source code:

import React, { Component } from 'react';
import PropTypes from 'prop-types'; // 15.6.0
import { StyleSheet, FlatList, View, Text } from 'react-native';
import { Constants } from 'expo';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
});

class Row extends Component {
  static propTypes = {
    id: PropTypes.number.isRequired,
  };

  render() {
    const content = Array(7000).fill("AB").join('');

    return (
      <View style={{ marginBottom: 5, borderBottomWidth: 1, borderColor: 'red' }}>
        <Text>{this.props.id}-{content}-{this.props.id}</Text>
      </View>
    );
  }
}

export default class App extends Component {
  keyExtractor = item => item;

  renderPostItem = ({ item }) => {
    return (
      <Row
        key={item}
        id={item}
      />
    );
  };

  render() {
    const data = Array(20)
      .fill()
      .map((e, i) => i + 1);

    return (
      <FlatList
        style={styles.container}
        data={data}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderPostItem}
      />
    );
  }
}

But if I replace FlatList with ListView, it will not be crashed anymore.

ListView version:
https://snack.expo.io/S1SnsA4aW

This issue only appear on iOS physical devices, but not in Android/iOS Simulator.

Very very curious about it. Any idea?
Thanks!

Reproducible Demo

FlatList version:

https://snack.expo.io/BkUX2A46Z

ListView version:

https://snack.expo.io/S1SnsA4aW

@Carboh

This comment has been minimized.

Copy link

Carboh commented Oct 19, 2017

I'm encountering the same issue on IOS 11.

@patw0929

This comment has been minimized.

Copy link
Contributor

patw0929 commented Oct 20, 2017

Some other information:

  1. Only the iOS 11 iPhone will crash, but iOS 10 won't.
  2. If the text content length decrase to 5,000, I can scroll down the FlatList a little bit until it crash.

Workaround:

After trying again and again, I find out a way to avoid this issue. We can set the initialNumToRender to 1 (default is 10 I guess) at FlatList, and seems that iOS 11 iPhone won't crash finally.

About the initialNumToRender:

Note these items will never be unmounted...

Maybe that's why causing the crash, because the first 10 rows which included long content, and
those rows have to be keep in the view?
But the iOS 10 devices, iOS Simulator, Android devices all goes smooth in all the situation, have no idea why... 🤔 🤔 🤔

@stale

This comment has been minimized.

Copy link

stale bot commented Dec 19, 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale label Dec 19, 2017

@stale stale bot closed this Dec 26, 2017

@facebook facebook locked and limited conversation to collaborators May 15, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.