How to build long scrollable content views in React Native?

Question

For the case of this question let's say I'm building Medium as a React Native app, specifically the screen where you read a story.

This is a long screen, with different types of content appearing as you scroll down. The title, the author information, the content (paragraphs, images, videos, etc), some meta information at the end, social features like comments, etc.

What's the recommended way to build a view like this? ScrollView doesn't seem performant enough especially if there were videos or other media types that needed to be loaded within the content. ListViews seem like they are the more performant option but don't seem like they are designed for this use-case.

Has anyone else faced this challenge? What's the best way to approach it?

Navneet kumar · Answer 1 · 2019-02-26T00:37:45.150

I had a similar problem for one screen in my app where there were various categories of components involved, for my case <FlatList> worked very well, performance was also up-to the mark.

Solution

Example.js

import React, { Component } from "react";
import { FlatList } from "react-native";

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showProgress: false,
      content: [{}, {}, {}] // list of objects
    };
  }

  onRefresh() {
    this.setState({ showProgress: true });
    // call methods here to load new data, once loaded make sure to reset the loading state to false
    this.setState({ showProgress: false });
  }

  showParagraph() {
    return <React.Fragment>{/* Your paragraph */}</React.Fragment>;
  }

  showVideo() {
    return <React.Fragment>{/* Your Videos */}</React.Fragment>;
  }

  showAudio() {
    return <React.Fragment>{/* Your Audio */}</React.Fragment>;
  }

  renderItem(item) {
    return (
      <React.Fragment>
        {item.isVideo ? showVideo() : showParagraph()}
      </React.Fragment>
    );
  }

  NoDataMessage() {
    return <React.Fragment>{/* Empty screen message goes here */}</React.Fragment>;
  }

  render() {
    return (
      <FlatList
        data={this.state.content}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => this.renderItem(item)}
        onRefresh={() => this.onRefresh()}
        refreshing={this.state.showProgress}
        ListEmptyComponent={this.NoDataMessage()}
      />
    );
  }
}

read more about props from here, also you can make an infinite news feed like facebook home page check this React native infinite scroll with flatlist

hope this helps..!

score 0 · Answer 2 · answered Feb 24 '19 at 18:04

<ScrollView> renders all its children first. So, let say you have thousands of elements(medium articles), <ScrollView> will first render all of them, which is pretty much slow and is visible.

For these cases, you can use <FlatList>, which renders the child when it enters the viewport. So, it is performant.

You can refer <FlatList> documentation here: https://facebook.github.io/react-native/docs/flatlist

How to build long scrollable content views in React Native?

2 Answers2