Using FlatList in place of ListView

gistfile1.txt

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

import CircleImage from '../components/circleImage'

export default class App extends Component {

  _keyExtractor = (item, index) => item.id

  renderItem({ item, index }) {
    const {id, first_name, work} = item
    const bio = (work && work[0] && work[0].position) ? work[0].position.name : null
    return (
      <View style={{flexDirection:'row', backgroundColor:'white', padding:10}} >
        <CircleImage size={80} facebookID={id} />
        <View style={{justifyContent:'center', marginLeft:10}} >
          <Text style={{fontSize:18}} >{first_name}</Text>
          <Text style={{fontSize:15, color:'darkgrey'}} >{bio}</Text>
        </View>
      </View>
    )
  }

  separators(sectionId, rowId) {
    return (
      <View key={rowID} style={{height:1, backgroundColor:'whitesmoke', marginLeft:100}} />
    )
  }

  render() {
    return(
      <FlatList
        style={{flex:1, backgroundColor:'white'}}
        data={demoProfiles}
        renderItem={this.renderItem}
        keyExtractor={this._keyExtractor}
        separators={this.separators}
      />
    )
  }
}

const demoProfiles = ...

Hi Nathaniel,

I'm working though this tutorial, and this code worked great in place of the ListView, thank you! However, I'm wondering if you had any tips on this section? I can't seem to figure out how to create the matches screen without the demoProfiles array. Any help you can provide would be incredible. Thank you!

@Cart3rSandersOn did you made it?