flatList.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import Loading from '../../components/loading'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import data from './rules.json'

export default class List extends Component {
  static navigationOptions = {
    title: 'Игра Лила',
  }

  constructor(props) {
    super(props)
    this.state = {
      dataSource: [],
      loaded: false
    }
  }

  componentDidMount() {
    const ds = data
    this.setState({
      dataSource: ds,
      loaded: true
    })
  }

  renderLoadingView() {
    return (
      <Loading />
    )
  }

  getItemDetails(id, name, bio) {
    const { navigate } = this.props.navigation
    navigate('Profile', {dataID: id, dataName: name, dataBio: bio})
  }

  renderMovie(data) {
    return (
      <Item data={data.item} onPressItem={(id: string, name: string, bio: string) => this.getItemDetails(id, name, bio)}></Item>
    )
  }

  _keyExtractor = (item, index) => {
    return item.id
  }

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView()
    }
    return (
      <View style={{ flex: 1, backgroundColor: '#fff' }}>
        <FlatList
          data={this.state.dataSource}
          renderItem={this.renderMovie.bind(this)}
          keyExtractor={this._keyExtractor}
          style={styles.listView}
          extraData={this.state}
        />
      </View>
    )
  }
}


class Item extends Component {
  chooseItem () {
    this.props.onPressItem(this.props.data.id, this.props.data.bio, this.props.data.name)
  }

  render() {
    const { titleContainer, chevron, posterText } = styles

    return(
      <TouchableOpacity onPress={()=>this.chooseItem()}>
        <View style={titleContainer}>
          <Text style={styles.title} numberOfLines={1} ellipsizeMode='tail'>{this.props.data.name}</Text>
          <Icon style={chevron} name="chevron-right" size={30} color="#DBD7D2" />
        </View>
      </TouchableOpacity>
    )
  }
}

var styles = StyleSheet.create({
  title: {
    fontFamily: 'AppleSDGothicNeo-Light',
    fontWeight: '200',
    marginLeft: 15,
    paddingTop: 15,
    color: '#474747',
    fontSize: 17,
    flex: -1
  },
  chevron: {
    alignSelf: 'flex-end',
    justifyContent: 'center',
    paddingTop: 20,
    marginRight: 10 
  },
  titleContainer: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    height: 50,
  }
})