Subscribe now

Working with Lists [12.09.2016]

Lists are super important in the mobile world. One of the common ways to use lists is when you fetch some data from your API and you just show it using listviews. Here we can see in the documentation a simple example of a listview.

Let's do that:

<View style={styles.container}>
        <View>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text style={styles.textComponent}>{rowData}</Text>}
          />
        </View>
      </View>

We are passing the content of each view inside the method rendeRow.

Let's create our style for the textComponent we have just created. Just for increasing the fontSize.

  textComponent: {
    fontSize: 24,
  }

We have created the ListView, but we should add elements in each row. We need to worry about the dataSource. The ListView component requires two props: dataSource and renderRow. At the implementation of DataSource, we must provide a function rowHasChanged. In our example, let's stick with just our simple rowHasChanged function to check if two rows are different or not. The rowHasChanged method tells the listview it needs to be re-rendered because the source has changed. This is a performance operation designed to make listviews work more smoothly. This part will be inside our constructor. We're passing in the state dataSource and it is a ListViewDataSource and we pass the elements we would like to have.

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }

With this, our ListView should be fine. A centralized listView with some elements, we don't have any actions for each view, it's just pure text. In tomorrow's exercise you are going to implement the click action.

Going back to the ListView documentation, we can see it's very simple. There are some other methods.

Names are pretty self-explanatory, dataSource is the source of our list. RenderRow handles our view rendering, taking one element from our dataSource.

Let's change our ListView a bit.

Imagine you want to not only show text, but also show a complex view on each row. To do that, you can only change and improve the renderRow adding your complex View. Let's create a component called MyComponent. It will represent our complex view.

It will be a stateless component. We're passing props and getting the props that will be called content.

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

const MyComponent = (props) => {
  return (<Text> {props.content} </Text>);
}

export default MyComponent;

We should import MyComponent in our index.ios.

In our Main Screen, let's use now the MyComponent, we are passing rowData for our component and the props name will be content:

<ListView
            dataSource={this.state.dataSource}
            renderRow={(rowData) =>
              <View>
                <MyComponent content={rowData}/>
              </View>
            }
          />

Here we are using a row a little bit more complex, and if you want you can increase the complexity just changing MyComponent.

You can also create actions, for example, if you pass a Button or a TouchableHighlight. Now you know how a simple listview works on React Native. I hope tomorrow you can improve this code a little bit.

Code: https://github.com/dailydrip/react-native-working-with-lists/releases/tag/simple-listview

See you soon!

Resources

[1] React Native documentation code https://facebook.github.io/react-native/docs/using-a-listview.html