{ "componentChunkName": "component---src-templates-blog-post-tsx", "path": "/blog/2016-12-15-building-infinite-scroll-in-react-native/", "result": {"data":{"blogPost":{"title":"Building infinite scroll in React Native","slug":"/blog/2016-12-15-building-infinite-scroll-in-react-native/","authorNodes":[{"name":"Robert DeLuca","slug":"/people/robert-deluca/"}],"markdown":{"html":"

In high school, I spent a long time trying to learn how to build iOS\napps. After many months of attempting what seemed impossible at the time,\nI decided to throw in the towel. So I gave up and to went to design,\nwhich ultimately led to web work.

\n

That desire to build native mobile apps never went away for me. But learning\nan entirely new language and ecosystem wasn't something that I could do\nin my spare time. So when React Native busted onto the scene in 2015\nit caught my attention. Since it's written in JavaScript, React Native\nallows you (the JS dev) to use technologies you're already familiar\nwith to build truly native apps.

\n

Around the same time at The Frontside we started to write most of\nour libraries in pure JavaScript. This allowed us to wrap those libraries in\nwhatever framework we happened to be working in at the time. That means\nwe can take problems we've solved in Ember apps and use them in a React Native\nproject. Which is exactly what we're going to do today!

\n

Introduction

\n

The purpose of this post is to build an infinite scroll component for\nReact Native based\non\nImpagination.js. We'll\ntalk more about Impagination a little later but for now, just know\nImpagination is a lazy data layer for your paged records.

\n

We're also going to lean on NativeBase for\nnice prestyled native looking components. If you're coming from the\nweb think of NativeBase like Bootstrap. The main difference is the\nstyling will be tailored to the OS running the app. So in iOS, you're going\nto get iOS styled elements and in Android, you'll get Android styled\nelements.

\n

The API we will be using is a Rails app that returns paginated data\nwhich is generated from the faker\ngem. Impagination will work with any paginated API, so if you would\nlike you can sub in your own API here.

\n

Here's an iOS screenshot of what we're going to build:

\n

\n

You can also check out the repo for what we're going to\nbuild here. If you\nhaven't set up React Native on your machine yet, you should take a moment\nand do that. The getting started docs are a\ngreat resource.

\n

To sum up our goals for this post into a list:

\n\n

Hello Impagination

\n

Before we start actually building our app I want to take second to\ntalk about Impagination. Like I said earlier, Impagination is a lazy\ndata layer for your paged records. All you provide Impagination is the\nlogic to fetch a single page, plus how many records you want it to\npre-fetch ahead of you. Impagination will handle the rest for you.

\n

Impagination is built using an event-driven immutable style and\nhas zero dependencies. That means you can use it anywhere that JS\ncan run! From the server to the client, it doesn't matter as long as\nit's JS.

\n

There are two required attributes for creating an Impagination\ndataset: fetch and pageSize.

\n

fetch is a function that will tell Impagination how to go get the\ndata you are requesting as you scroll through the infinite\nlist.

\n

pageSize is an integer that tells Impagination how many\nrecords are in each page.

\n

Okay, that's enough of an introduction to Impagination. As we build\nour app I will stop and explain more of Impagination as we build\nthe app.

\n

Creating the app

\n

Let's start creating our React Native app! I'm going to call this app\nrobotImpagination since the gem generating our fake data uses a bunch of\ndifferent robots for images. Feel free to name your app whatever you like.

\n

react-native init robotImpagination

\n

This will create a hello world react native app. If you cd into that\ndirectory and run react-native run-ios (or react-native\nrun-android) it should start the React Native packager, build the iOS\napp, and launch the simulator.

\n

Now that we have confirmed that the app will build, shut it all\ndown. We need to install a couple dependencies to build our infinite scroll.\nLet's install NativeBase first: yarn add native-base.\nThen Impagination: yarn add impagination. You should now\nsee both of those libraries in your package.json file.

\n

No place like Home

\n

Make your way to the index.ios.js (or index.android.js if you're\ndoing android dev). You should see a couple imports and then a class\nthat's extending Component:

\n
export default class robotImpagination extends Component {\n  render() {\n    return (\n      <View style={styles.container}>\n        <Text style={styles.welcome}>\n          Welcome to React Native!\n        </Text>\n        <Text style={styles.instructions}>\n          To get started, edit index.android.js\n        </Text>\n        <Text style={styles.instructions}>\n          Double tap R on your keyboard to reload,{'\\n'}\n          Shake or press menu button for dev menu\n        </Text>\n      </View>\n    );\n  }\n}
\n

Delete everything inside of the render method. We're going to replace\nthat with a <Home /> component. This component will be used in both\nthe index.ios.js & index.android.js files.

\n
export default class robotImpagination extends Component {\n  render() {\n    return (\n      <Home />\n    );\n  }\n}
\n

If you tried to run this right now, it wouldn't work. We still need to\ncreate that component and import it. For smaller projects, I like to\nput my components in a components folder. You can name it and place\nit where ever you would like. For me it's components in the root of the\nproject: robotImpagination/components/Home.js

\n

Inside of Home.js we should import React, the Text component from\nReact Native, and create a component that returns \"Hello!\":

\n
import React, { Component } from 'react';\nimport { Text } from 'react-native';\n\nexport default class Home extends Component {\n  render() {\n    return (\n      <Text>Hello!</Text>\n    );\n  }\n}
\n

Now that we've actually created the <Home /> component we can import\nand use it in both of our index files (index.ios.js & index.android.js).

\n

Your index files should look something like this now:

\n
import React, { Component } from 'react';\n\nimport {\n  AppRegistry,\n} from 'react-native';\n\nimport Home from './components/Home';\n\nexport default class robotImpagination extends Component {\n  render() {\n    return (\n      <Home />\n    );\n  }\n}\n\nAppRegistry.registerComponent('robotImpagination', () => robotImpagination);
\n

Awesome! If you refresh your simulator you should now see a poorly styled\n\"Hello!\".

\n

<Home /> will be the main component we will be working out\nof. This is so our code will run on both iOS & Android. Write once,\ncompile to both!

\n

Furnishing our Home

\n

We now have an app that's uglier than what we started with. Don't\nfret, we're going to call on NativeBase to make everything look nice\nand clean. Inside of Home.js lets import four components:

\n
// Native base for nice prestyled components\nimport {\n  Header,\n  Container,\n  Title,\n  Content,\n} from 'native-base';
\n

These components will provide the structure & styling going forward. I\nrecommend taking 10 minutes to review\nthe NativeBase docs. Now we can\nmake our lonely \"Hello!\" text look much better:

\n
// imports here\n\nexport default class Home extends Component {\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content>\n          <Text>Hello!</Text>\n        </Content>\n      </Container>\n    );\n  }\n}
\n

This should give you a styled header with bold text inside of it and our\n\"Hello!\" text isn't in the very top left of the device. Nice!

\n

Next, we should create at least one \"card\" where we will be rendering the\ncontent of each record into. Later on we will iterate over an array\nreturning many of these, but for now, we're only going to create one card.

\n

Thankfully we don't have to style this ourselves since NativeBase has\na\ncard component. We\nneed to import two more components from NativeBase:

\n
// Native base for nice prestyled components\nimport {\n  Header,\n  Container,\n  Title,\n  Content,\n  Card,\n  CardItem\n} from 'native-base';
\n

And additionally the Image component from react-native:

\n
import {\n  Image,\n  Text,\n} from 'react-native';
\n

Now that we have access to these components lets fill it in:

\n
// imports here\n\nexport default class Home extends Component {\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content>\n          <Card style={{margin: 10}}>\n            <CardItem>\n              <Text>Hello!</Text>\n            </CardItem>\n            <CardItem>\n              <Image style={{resizeMode: 'cover'}} source={{uri: \"https://placekitten.com/640/440\"}} />\n            </CardItem>\n            <CardItem>\n              <Text>Item description</Text>\n            </CardItem>\n          </Card>\n        </Content>\n      </Container>\n    );\n  }\n}\n
\n

Our app should look something like this:

\n

\n

We have a nicely styled app with styled cards, lets start scrolling through\npaginated data!

\n

Creating an Impagination dataset

\n

The first thing we have to do is import Impagination into Home.js:

\n
import Dataset from 'impagination';
\n

Now create a method called setupImpagination inside of our Home\ncomponent. setupImpagination is where we're going to create a new\ninstance of Impagination, set the pageSize, and set the dataset on the\ncomponents local state. Earlier I mentioned that there are two\nrequired params from Impagination to work. Let's start by filling in\nthose two params.

\n
export default class Home extends Component {\n  setupImpagination() {\n    let dataset = new Dataset({\n      pageSize: 15,\n\n      // Where to fetch the data from.\n      fetch(pageOffset, pageSize, stats) {\n        return fetch(`https://serene-beach-38011.herokuapp.com/api/faker?page=${pageOffset + 1}&per_page=${pageSize}`)\n          .then(response => response.json())\n          .catch((error) => {\n            console.error(error);\n          });\n      }\n    });\n  }\n\n  render() {\n    // ...\n  }\n}
\n

The fetch function is where Impagination will hit your API to get\nmore pages. There are three arguments passed to the fetch function:\npageOffset which is the current page it's going to fetch, pageSize\nwhich is a number of records in a page, and stats which can hold\ntotalPages if your API supports it.

\n

Note: you may need to add one to pageOffset since it's zero\nbased.

\n

This looks great! But we still have some work to do in order for it to\nwork. We currently have no way of accessing the data that is emitted by\nImpagination.

\n

Impagination has two different objects you will work with. One is\nstate which holds all of the current records and the current state\nregarding that data. The other is the dataset which allows you to\ncall Impagination methods like setReadOffset.

\n

A new state is emitted every single time the data has changed. We can\nlisten for these changes using Impagination's observe method:

\n
export default class Home extends Component {\n  setupImpagination() {\n    let dataset = new Dataset({\n      pageSize: 15,\n\n      // Anytime there's a new state emitted, we want to set that on\n      // the componets local state.\n      observe: (datasetState) => {\n        this.setState({datasetState});\n      },\n\n      // Where to fetch the data from.\n      fetch(pageOffset, pageSize, stats) {\n        return fetch(`https://serene-beach-38011.herokuapp.com/api/faker?page=${pageOffset + 1}&per_page=${pageSize}`)\n          .then(response => response.json())\n          .catch((error) => {\n            console.error(error);\n          });\n      }\n    });\n  }\n\n  render() {\n    // ...\n  }\n}
\n

Now that we're\ncalling\nsetState we\nhave to create our state object in the component constructor:

\n
export default class Home extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      dataset: null,\n      datasetState: null,\n    };\n  }\n\n  setupImpagination() { //... }\n  render() { //... }\n}
\n

While we're here we'll also add dataset into our state object.

\n

To pull all of this together and start fetching data we need to set the\ndataset on the components local state. Then we need to set the\nreadOffset to record 0. This is so Impagination knows exactly what\nrecord you are on when scrolling through the list. If we get close to\nthe end it will automatically fetch new records. You can read more\nabout how this all\nworks here.

\n

The final look of our setupImpagination method:

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() {\n    let dataset = new Dataset({\n      pageSize: 15,\n\n      // Anytime there's a new state emitted, we want to set that on\n      // the componets local state.\n      observe: (datasetState) => {\n        this.setState({datasetState});\n      },\n\n      // Where to fetch the data from.\n      fetch(pageOffset, pageSize, stats) {\n        return fetch(`https://serene-beach-38011.herokuapp.com/api/faker?page=${pageOffset + 1}&per_page=${pageSize}`)\n          .then(response => response.json())\n          .catch((error) => {\n            console.error(error);\n          });\n      }\n    });\n\n    // Set the readOffset to the first record in the state\n    dataset.setReadOffset(0);\n    this.setState({dataset});\n  }\n\n  render() { //... }\n}
\n

Finally, as soon as the component starts to mount we want to setup our\ndata store. In componentWillMount lets call setupImpagination:

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() {\n    this.setupImpagination();\n  }\n\n  render() { //... }\n}
\n

Bam! Now when the app loads it will go off and fetch the first 15\nrecords from the API and set it on the local state of the\ncomponent. You can now access these records by doing\nthis.state.datasetState.

\n

Looping over the datasetState

\n

With the styling and data now in place lets render it to the\nscreen. this.state.datasetState is an array-like object. This means we can\niterate over the state while still being able to access getters like\nthis.state.datasetState.readOffset (which returns the current\nreadOffset).

\n

We're going to map over the Impagination state and return a card:

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content>\n          {this.state.datasetState.map(record => {\n            return (\n              <Card style={{margin: 10}}>\n                <CardItem>\n                  <Text>Hello!</Text>\n                </CardItem>\n                <CardItem>\n                  <Image style={{resizeMode: 'cover'}} source={{uri: \"https://placekitten.com/640/440\"}} />\n                </CardItem>\n                <CardItem>\n                  <Text>Item description</Text>\n                </CardItem>\n              </Card>\n            );\n          })}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

If you refresh your simulator you should now see 15 kittens. But it's\n15 cards with same text over and over again. We can start to pull\ninformation from each record we're iterating over:

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content>\n          {this.state.datasetState.map(record => {\n            return (\n              <Card style={{margin: 10}}>\n                <CardItem>\n                  <Text>{record.content.title}</Text>\n                </CardItem>\n                <CardItem>\n                  <Image style={{resizeMode: 'cover'}} source={{uri: record.content.image}} />\n                </CardItem>\n                <CardItem>\n                  <Text>{record.content.description}</Text>\n                </CardItem>\n              </Card>\n            );\n          })}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

Refreshing your simulator should bring up an error message that says\nCannot read property 'title' of null. This is because Impagination\nemits an array with 15 items as soon as it's instantiated. Each record\nin the array has five state properties:

\n\n

With these properties, we can tell exactly what state each record is\nin. This allows us to display different UI for each individual record\nif we please. In this case, we're going to show a loading spinner if\nthe record hasn't settled yet.

\n

Import the spinner component from NativeBase:

\n
// Native base for nice prestyled components\nimport {\n  Header,\n  Container,\n  Title,\n  Content,\n  Card,\n  CardItem,\n  Spinner,\n} from 'native-base';
\n

Then add a conditional inside the map function that returns different\nJSX:

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content>\n          {this.state.datasetState.map(record => {\n            if (!record.isSettled) {\n              return <Spinner key={Math.random()}/>;\n            }\n\n            return (\n              <Card style={styles.cardContainer}>\n                <CardItem>\n                  <Text>{record.content.title}</Text>\n                </CardItem>\n                <CardItem>\n                  <Image style={{resizeMode: 'cover'}} source={{uri: record.content.image}} />\n                </CardItem>\n                <CardItem>\n                  <Text>{record.content.description}</Text>\n                </CardItem>\n              </Card>\n            );\n          })}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

This is great! It now will render each record with their own\ncontent. But it's pretty hard to read that render method, we should\nrefactor the card into its own presentation component. Create another\ncomponent in the components folder called RobotItem.js. Then copy\nand paste the card component code from Home.js:

\n
import React, { Component } from 'react';\nimport {\n  Text,\n  Image,\n} from 'react-native';\n\nimport {\n  Card,\n  CardItem,\n} from 'native-base';\n\nexport default class RobotItem extends Component {\n  constructor(props) {\n    super(props);\n\n    this.recordData = props.record.content;\n  }\n\n  render() {\n    return (\n      <Card style={{margin: 10}}>\n        <CardItem>\n          <Text>{this.recordData.title}</Text>\n        </CardItem>\n        <CardItem>\n          <Image style={{resizeMode: 'cover'}} source={{uri: this.recordData.image}} />\n        </CardItem>\n        <CardItem>\n          <Text>{this.recordData.description}</Text>\n        </CardItem>\n      </Card>\n    );\n  }\n}\n
\n

We also create a little shorthand in the constructor so we don't have\nto type this.props.record.content each time we have to access\ndata.

\n

There's still a little bit of refactoring left in Home.js. We're\ngoing to pull the map out of the render function and put it into its\nown method called renderItem.

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  renderItem() {\n    return this.state.datasetState.map(record => {\n      if (!record.isSettled) {\n        return <Spinner key={Math.random()}/>;\n      }\n\n      return <RobotItem record={record} key={record.content.id} />;\n    });\n  }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content>\n          {this.renderItem()}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

Don't forget to prune the imports we're no longer using at the top of\nHome.js.

\n

Putting the \"infinite\" in scroll

\n

We're so close! It's now rendering all 15 items in our first page but\nwe're not able to scroll to the bottom and retrieve new records. Why?\nIt's because as we scroll we have to set Impagination's\nreadOffset. Basically, we have to tell Impagination which record is\ncurrently being viewed by the user.

\n

As we progress through the list of records Impagination will fetch more pages\nif we're within the loadHorizon.\nBy default, the loadHorizon is the same as the page size. This means\nImpagination is constantly keeping track of where we're at so it can\nsmartly fetch new records as needed. If you up the loadHorizon to 30\nit'll load even more pages ahead of the current scroll position.

\n

In order to set the readOffset we're going to hook into the\nonScroll event on the <Content> component. The <Content>\ncomponent descends from React Natives ScrollView component, so if\nyou're not using NativeBase you can still use this same method.

\n

Let's create a method called setCurrentReadOffset and then call that\nanytime the scroll event is called.

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  renderItem() { //... }\n\n  setCurrentReadOffset = (event) => {\n    // Log the current scroll position in the list in pixels\n    console.log(event.nativeEvent.contentOffset.y);\n  }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content onScroll={this.setCurrentReadOffset}>\n          {this.renderItem()}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

If you refresh your simulator, enable remote JS debugging, scroll the\nlist, and then look in the JS console you should see a bunch of logs\nwith numbers. This is the current scroll position of the list in\npixels. We're going to use contentOffset.y to help calculate what\nrecord we're seeing in the viewport.

\n

Since this list is rendering items with the exact same height each\ntime it's pretty easy for us to figure out what item is currently\nscrolled into view. You take the currentOffset.y and divide it by the\nitems height. That's your current readOffset (aka the current record\nin view).

\n

Finally, we should throttle the amount of times setCurrentReadOffset\nis called. As of right now it's called every single time there's a\nscroll event, which is extremely noisy. We'll cut this down by\nsetting scrollEventThrottle to 300 (ms).

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  renderItem() { //... }\n\n  setCurrentReadOffset = (event) => {\n    let itemHeight = 402;\n    let currentOffset = Math.floor(event.nativeEvent.contentOffset.y);\n    let currentItemIndex = Math.ceil(currentOffset / itemHeight);\n\n    this.state.dataset.setReadOffset(currentItemIndex);\n  }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content scrollEventThrottle={300} onScroll={this.setCurrentReadOffset}>\n          {this.renderItem()}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

Go ahead, refresh your simulator and scroll through that list! The API\nonly has 100 records seeded to the DB so don't expect it to be\ntruly infinite. Here's a GIF of what we've built together:

\n

\"GIF

\n

It's so beautiful.

\n

One last optimization

\n

Using a ScrollView for something that is truly infinate might not be\nthe best idea but you can add one property to the ScrollView\nsignificantly cut the memory usage: removeClippedSubviews. Since\nNativeBase's Content component is backed by a ScrollView we can\nuse this same property. removeClippedSubviews will take the off\nscreen cards and remove them from the native backing superview.

\n
export default class Home extends Component {\n  constructor(props) { //... }\n\n  setupImpagination() { //... }\n\n  componentWillMount() { //... }\n\n  renderItem() { //... }\n\n  setCurrentReadOffset = (event) => { //... }\n\n  render() {\n    return (\n      <Container>\n        <Header>\n          <Title>Robot Impagination</Title>\n        </Header>\n        <Content scrollEventThrottle={300} onScroll={this.setCurrentReadOffset} removeClippedSubviews={true}>\n          {this.renderItem()}\n        </Content>\n      </Container>\n    );\n  }\n}
\n

Conclusion

\n

First off, great job! You have just built infinite scroll in React\nNative from scratch, which isn't an easy task. In about an hour we were\nable to take a library that was originally written to solve a problem\nin Ember.js and apply it to a React Native Project.

\n

I think this speaks volumes about the power of writing libraries in\nplain old JavaScript. Not only can this library be used in any type\nJavaScript project, it will have access to a broader community. This is because\nany JavaScript developer can jump in and contribute back to the\nproject.

\n

For me, this means I can finally realize my childhood dream of building\nan iOS app. I don't have to relearn an entire development\necosystem. Sure you'll have to learn new things about native\ndevelopment but the barrier to entry is tremendously lower.

\n

Here's my hot take on where React Native fits into the JS ecosystem.\nReact Native has hit the sweet spot that Cordova and PhoneGap has been\ntrying to hit for years: you can write native apps in JavaScript with\nno performance implications. As we’ve seen, it’s easy to share the\nsame JavaScript libraries from the web and node (if that’s your\nthing), to your native app. Now that’s amazing.

\n

Web developers have been trying to recreate \"that native experience\" in\nthe browser for years. But here's the thing: native is a moving\ntarget. So if you can't keep up, why not join them? But join them with\nyour existing JavaScript knowledge. Sounds like the best of both\nworlds to me!

\n

Once again if you would like to take a look at the completed app here's\nthe GitHub repo. If\nyou have any questions, comments, or feedback I'm always available on\nTwitter @robdel12

\n

Image credit

","frontmatter":{"date":"December 15, 2016","description":"Tackling infinite scroll can be hard on any platform. But thankfully React Native allows you to use base JavaScript libraries to solve problems in native apps. We're going to take Impagination.js and build an infinite scrolling list that is silky smooth and painless data management.","tags":["react native","react","infinite scroll","impagination"],"img":{"childImageSharp":{"fixed":{"src":"/static/92286829eefe2ccc5def3aff56b4c1f7/a7715/2016-12-15-building-infinite-scroll-in-react-native_react-native-header.jpg"}}}}}}},"pageContext":{"id":"42507d77-894d-5278-b850-f4da2b79ab66"}}, "staticQueryHashes": ["1241260443"]}