CODEWITHSUNDEEP
javascriptlistviewreact-native
njho
njho

Reputation: 2158

How is ListView.DataSource used?

Just wondering how to read this script from the RN ListView Documentation:

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

What am I exactly passing into ListView.DataSource()? I suppose it is an object with rowHasChanged declared as a function? Therefore, when the function is eventually called by whatever is holding it, it's parent knows to look for rowHasChanged, and use it just as how it is declared?

So essentially, it's "just a requirement" that we have to define an object containing rowHasChanged when using ListView.DataSource?

Or am I interpreting this incorrectly.

Thanks!

Upvotes: 2

Views: 5474

Answers (1)

itinance
itinance

Reputation: 12418

rowHasChanged is just a property to a callback to differ between two items in your data array. At the end you only have to pass an array with values (or objects) to the ListView encapsulated within "cloneWithRows"-Method of the DataSource-Object.

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

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      items: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.items}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

Upvotes: 3

Related Questions