All files / Pages HorizontalBasicFlatList.js

33.33% Statements 3/9
100% Branches 0/0
16.67% Functions 1/6
33.33% Lines 3/9
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90                                1x 35x                                                                                                                                   1x            
 
 
// import React, { Component } from 'react';
// import {AppRegistry} from 'react-native';
// import App from './App.js';
// AppRegistry.registerComponent('ReactNativePaginationExample', () => App);
 
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,FlatList,} from 'react-native';
//get here [TODO ADD URL]
import ContactItem from './widgets/ContactItem';
import Pagination from 'react-native-pagination';
import faker from 'faker';//assuming you have this.
import _ from 'lodash';// if you dont have this then gtfo
 
// create a random list (array) of 35 people
let PersonList = new _.times(35,(i)=>{
  return {
    id:i,//<-- used in _keyExtractor
    name:faker.name.findName(),
    avatar:faker.internet.avatar(),
    group:_.sample(["Work","Friend","Acquaintance","Other"]),
    email:faker.internet.email(),
  }
})
 
 
 
export default class HorizontalBasicFlatList extends Component {
 
  constructor(props){
     super(props);
      this.state = {
        items: PersonList,
        // selected: (new Map(): Map<string, boolean>),
      };
    }
  //render list seen here [TODO ADD URL]
  _renderItem = ({item}) => {
    return (<ContactItem
       index={item.id}
       id={item.id}
       onPressItem={this._onPressItem}
      //  selected={!!this.state.selected.get(item.id)}
       name={item.name}
       avatar={item.avatar}
       description={item.email}
       tag={item.group}
       createTagColor
     />)
 };
 
 //map to some key. We use the "id" attribute of each item in our list created in our PersonList
  _keyExtractor = (item, index) => item.id
 
// REQUIRED for ReactNativePagination to work correctly
  onViewableItemsChanged = ({ viewableItems, changed }) => {
    this.setState({viewableItems,changed})
  };
 
render() {
  return (
    <View style={[s.container]}>
      <FlatList
        horizontal
         pagingEnabled
        data={this.state.items}
        keyExtractor={this._keyExtractor}//map your keys to whatever unique ids the have (mine is a "id" prop)
        renderItem={this._renderItem}
        onViewableItemsChanged={this.onViewableItemsChanged.bind(this)}//need this
      />
      <Pagination
        horizontal
        // dotThemeLight //<--use with backgroundColor:"grey"
        listRef={this.refs}//to allow React Native Pagination to scroll to item when clicked  (so add "ref={r=>this.refs=r}" to your list)
        visible={this.state.viewableItems}//needs to track what the user sees
        data={this.state.items}//pass the same list as data
        padSize={3} //num of items to pad above and bellow your visable items
        // totalDots={6}
      />
    </View>)
  }
}
const s = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:"grey",//<-- use with "dotThemeLight"
  },
});