saleel / react-native-super-grid Goto Github PK

<FlatList
    scrollEnabled={this.state.itemList.length > 3}
    data={this.state.itemList}
    keyExtractor={item => item.id}
    renderItem={({item, index}) => this.renderItem(item, index)} //Like This?
/>

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, Dimensions } from 'react-native';
//import { Constants } from 'expo';
import GridView from 'react-native-super-grid'; // 2.0.1

const Actor =
 [{id:90633,name:"Gal Gadot",profile_path:"/yV2nljqQa3MjrrIK4AllDjmJIcs.jpg"},
 {id:62064,name:"Chris Pine",profile_path:"/vSe6sIsdtcoqBhuWRXynahFg8Vf.jpg"},
 {id:32,name:"Robin Wright",profile_path:"/tXfQTgcIEPP7gtVdJ44ZxZPhacn.jpg"},
 {id:6413,name:"Danny Huston",profile_path:"/jc1eGtCShQ2ZkzqWApiWbA1lbTF.jpg"},
 {id:11207,name:"David Thewlis",profile_path:"/lWCGcTKvr4QUi8MvFBleMw8xY8.jpg"},
 {id:935,name:"Connie Nielsen",profile_path:"/lvQypTfeH2Gn2PTbzq6XkT2PLmn.jpg"},
 {id:3623,name:"Elena Anaya",profile_path:"/67brgegoJLcIQKiu4EEGtNymaUj.jpg"},
 {id:1829985,name:"Lilly Aspell",profile_path:"/rZ8BTHLatm8dtZus4HZFv7GsSuA.jpg"},
 {id:1590758,name:"Emily Carey",profile_path:"/esIqsc1XmBRPo07e95C6ebxLD7A.jpg"},
 {id:11111,name:"Lucy Davis",profile_path:"/3Qpcq4Pu8lKXtHxtUEHqyOuibbn.jpg"},
 {id:5419,name:"Saïd Taghmaoui",profile_path:"/bOh3ZQ64WiGivN6GJrrO8vrw9wU.jpg"},
 {id:1125,name:"Ewen Bremner",profile_path:"/7CQBnBHSNDcbY2LucqWqEpKWsCH.jpg"},
 {id:1823591,name:"Eugene Brave Rock",profile_path:"/27RL3pfNTBTu2zeNvFQTLFvCrJv.jpg"},
 {id:1310711,name:"Lisa Loven Kongsli",profile_path:"/pwT0UuQ1tsleh3urfabVRj0UE3S.jpg"},
 {id:139900,name:"Florence Kasumba",profile_path:"/oLKR9435H3sjeCWWvD0rLGsL5t9.jpg"},
 {id:1767342,name:"Madeleine Vall",profile_path:"/jACXQG2xHuFeIoxgGGhUbbrZNl1.jpg"},
 {id:1831280,name:"Hayley Warnes",profile_path:"/2dPqpifxaxXc6urLimtC6bdkh5s.jpg"},
 {id:1767343,name:"Ann Wolfe",profile_path:"/5VVXr5NOSqC0uMxXoXFrIA9eKe8.jpg"},
 {id:1009999,name:"Doutzen Kroes",profile_path:"/1aXyxlwPZ6OWaO67gdPBT0K2bAS.jpg"},
 {id:1272968,name:"Samantha Jo",profile_path:"/aHUB2vNo5ZbOVnlmqJ4SkUpDXrk.jpg"},
 {id:1360156,name:"Ann Ogbomo",profile_path:"/5EGoq8xksh6w1MZJBDgEi7LofDC.jpg"},
 {id:62976,name:"Eleanor Matsuura",profile_path:"/6ZbBU8ESZw8wTOdmqF9WJd2I9Gt.jpg"},
 {id:174708,name:"Josette Simon",profile_path:"/rtFA2jn0d69EL5GVGukTHSlE4Kl.jpg"},
 {id:1831281,name:"Brooke Ence",profile_path:"/1FBI6wg4dV2O8Z5NroCFLoVQ6m1.jpg"},
 {id:1831282,name:"Hari James",profile_path:"/q9OXpOaCX2t6cCLr8PO8r53j4YL.jpg"},
 {id:1813935,name:"Jacqui-Lee Pryce",profile_path:"/3lp7b4ncDVQYjAkgRmxI3DmBz9L.jpg"},
 {id:2467,name:"James Cosmo",profile_path:"/523gSqAG9eSSNmKexFFZYh38SxL.jpg"},
 {id:1831379,name:"Martin Bishop",profile_path:"/9a0beQcrkxENGKWJ4z3th25JBjO.jpg"},
 {id:1256710,name:"Flora Nicholson",profile_path:"/DT171ClURqTp1sHvliV5oije1X.jpg"},
 {id:143892,name:"Steffan Rhodri",profile_path:"/4bptQdwRKCMveddkpZdCvDwcsHQ.jpg"},
 {id:1232889,name:"Rachel Pickup",profile_path:"/paSFHcLTDBmR6n04bIpCyJA3rSA.jpg"},
 {id:65054,name:"Rainer Bock",profile_path:"/ebmPZimivfRFKYnKp2ygazkJO9r.jpg"},
 {id:1831283,name:"Eva Dabrowski",profile_path:"/oqZlnfADX2TLptomZmUXKj8xBzp.jpg"},
 {id:1857866,name:"Kattreya Scheurer-Smith",profile_path:"/n1cwG4jJoeN5lxmNSFjC9cKIVWf.jpg"},
 {id:1890510,name:"Betty Adewole",profile_path:"/ncvgnSmpJ0IhtcuaKp2WtkZF9lh.jpg"},
 {id:1431128,name:"Caroline Maria Winberg",profile_path:"/fXeuNhThb61khaAoccPf59ODLgz.jpg"},
 {id:1690518,name:"Rekha Luther",profile_path:"/xadtWM2vvrhDHZ8gcdghPZsglsJ.jpg"},
 {id:1890409,name:"Ooooota Adepo",profile_path:"/nWmpjYNQuSG8Kx0FuL37PVvCYNr.jpg"},
 {id:1813934,name:"Zinnia Kumar",profile_path:"/dHkO6v9Nh6LfsBaZTpK2nNZ7v82.jpg"},
 {id:1830144,name:"Andrea Vasiliou",profile_path:"/r4g0Hw0pzomj8UuLO3D9tNvkO98.jpg"},
 {id:1890511,name:"Freddy Elletson",profile_path:"/8lw4YgcBZeFKZ2SYLJ71TobDuSI.jpg"},
 {id:1890513,name:"Sammy Hayman",profile_path:"/g2y6domOIIdAht8wfmKmNtNE0WE.jpg"},
 {id:1861352,name:"Michael Tantrum",profile_path:"/vfSkp365hUfTTLF5Ye33zGjbNNf.jpg"},
 {id:157826,name:"Philippe Spall",profile_path:"/9dNHdrBLr6hY8Vf0bHS5h8mrQzA.jpg"},
 {id:1824289,name:"Edward Wolstenholme",profile_path:"/9Acyyk5gIN8qGlQ4VuPZ6VCgw3A.jpg"},
 {id:1643761,name:"Jennie Eggleton",profile_path:"/rgLqGrIF6DH4rwKIXMjqT1kVB59.jpg"},
 {id:1824290,name:"Frank Allen Forbes",profile_path:"/eBzMDu8kskfefTfl95NukYEVqMh.jpg"},
 {id:1824295,name:"Jemma Moore",profile_path:"/9p0GWc7hIgnjt0Ua5zvH1n7hLXU.jpg"},
 {id:1890450,name:"Caitlin Burles",profile_path:"/k508jIWbCk6HOliJklZJS3KqPRn.jpg"},
 {id:1562095,name:"Ulli Ackermann",profile_path:"/nH3l4SM06Xel28UtVyiRfFIZYAr.jpg"},
 {id:1820151,name:"Marko Leht",profile_path:"/34Hfcm5xJzFYIM6A5iNuso1aBaZ.jpg"},
 {id:659,name:"Wolf Kahler",profile_path:"/uqHI2PLeGFxdjlw0qIk1D17NjWb.jpg"},
 {id:1040480,name:"Dominic Kinnaird",profile_path:"/kRsj6Wm9BzzjIQqlOhndtuwnPCZ.jpg"},
 {id:1890458,name:"Fred Fergus",profile_path:"/31rOvizxOVC68pYPfXChHiEt7M.jpg"},
 {id:1824301,name:"Freddy Carter",profile_path:"/u4Ibhf8LnRzfuR2IUx6ZQWdWaVv.jpg"},
 {id:75256,name:"Ian Hughes",profile_path:"/jQXF27nYEsCAmdFyqJVOKbHZFxf.jpg"},
 {id:1052209,name:"Andrew Byron",profile_path:"/yOoY7YAfKzLfJIw9dOyvczH2xmi.jpg"},
 {id:1890493,name:"Amber Doyle",profile_path:"/NKO2Q0il3Hj5IFb2jK3LdTAWuU.jpg"},
 {id:1171527,name:"Alexander Mercury",profile_path:"/pz3zmiT79qnvGyPUsR6iZkBVf6W.jpg"},
 {id:1457240,name:"Gana Bayarsaikhan",profile_path:"/rc7jskbwC1Bn1Uy8iIL4dU0NqFH.jpg"},
 {id:1726321,name:"Camilla Roholm",profile_path:"/feaxjgK6F8egTGwlmrZHvN9TftR.jpg"},
 {id:1743363,name:"Sofia Abbasi",profile_path:null},
 {id:1702788,name:"Georgina Armstrong",profile_path:"/kXLYB8o6nfouKmy690MGDcdNtQo.jpg"},
 {id:1743575,name:"Annarie Boor",profile_path:"/mioZHOK2wXGOVc6Ue3pHnahR5Iz.jpg"},
 {id:1824293,name:"Harry Brewis",profile_path:null},
 {id:1502439,name:"Bern Collaco",profile_path:"/ziLGGjo5GWzYDL8H4MUquoFj8r0.jpg"},
 {id:555133,name:"Steve Doyle",profile_path:"/zzAmMr1QsKxbcYgobH05rQGuXnh.jpg"},
 {id:1592480,name:"Dino Fazzani",profile_path:"/fjOF76fBGDAKMGeGkuK4HUkLgrx.jpg"},
 {id:1624443,name:"Flor Ferraco",profile_path:"/gzwL8y0OT6GDkE5rNAlnXxP2u5m.jpg"},
 {id:1527565,name:"Mayling Ng",profile_path:"/jevQBPkbeaCsNs8KPrO9mxok983.jpg"},
 {id:1651414,name:"Sternkiker François",profile_path:"/8EcUOLAJ7QpVa9LN4vqoCxd0QQf.jpg"},
 {id:1743593,name:"David Georgiou",profile_path:"/eT2ckxteHfwqjCkUNu0FiG643tv.jpg"},
 {id:1651385,name:"Roman Green",profile_path:"/uUd7UsRw94bvbluAkntDDdOJpM0.jpg"},
 {id:1651394,name:"Shane Griffin",profile_path:null},
 {id:1824297,name:"Steve Healey",profile_path:null},
 {id:1824294,name:"Karl Fredrick Hiemeyer",profile_path:null},
 {id:1502441,name:"Kornelia Horvath",profile_path:"/gDimAObmWPSsFRyaSg40QlDMUNI.jpg"},
 {id:1284323,name:"Kevin Hudson",profile_path:"/1OrwAIDUYbwZXOWbF5FZtgGMsCI.jpg"},
 {id:1820018,name:"Tim Ingall",profile_path:"/8TBgeYKRItgEkioHaXtSZerFjKM.jpg"},
 {id:1824291,name:"Ben Kelleher",profile_path:"/hCxzMivfpFlua0m2b25yQBKjKkr.jpg"},
 {id:1813664,name:"John Kinory",profile_path:null},
 {id:1824300,name:"Dario A. Lee",profile_path:null},
 {id:1809569,name:"Christopher Marsh",profile_path:null},
 {id:1699114,name:"Lora Moss",profile_path:"/5j9isIvOyO3EuhBhNxNQToGL4ip.jpg"},
 {id:1809570,name:"James M.L. Muller",profile_path:"/b7nuAf9fhZyp6oF09NrGA87vkg4.jpg"},
 {id:1735654,name:"Ekran Mustafa",profile_path:null},
 {id:1702759,name:"Shaun Newnham",profile_path:null},
 {id:1809572,name:"Yves O'Hara",profile_path:null},
 {id:1461309,name:"Rajeev Pahuja",profile_path:"/oHXsxs3quaESZXjrFRk0FGHuAO0.jpg"},
 {id:1785923,name:"Jag Patel",profile_path:"/uChgXgHBAFBsy3a9NrCiL0klPMS.jpg"},
 {id:1635870,name:"Richard Price",profile_path:"/iiITgdpWPmybUfhWd1ktjxDFW1c.jpg"},
 {id:1451618,name:"Anthony J. Sacco",profile_path:"/nRUNvLCfe43Rs1OEd4GoztuxxED.jpg"},
 {id:1824303,name:"Adam Sef",profile_path:null},
 {id:147641,name:"Mick Slaney",profile_path:null},
 {id:15217,name:"Zack Snyder",profile_path:"/vdr0DlKJH4Ub7nWZtkanBH65bGH.jpg"},
 {id:1824299,name:"Fran Targ",profile_path:"/83eaNik8vdvHCyeUmEo5GfBiVOR.jpg"},
 {id:29333,name:"Roy Taylor",profile_path:"/eac87ztd0AcxBLvJPsCoNsvOzVc.jpg"},
 {id:1824296,name:"Roy Martin Thorn",profile_path:null},
 {id:1824302,name:"Phil Tillott",profile_path:null},
 {id:1635843,name:"Matt Townsend",profile_path:"/oAwLdyE519RGtg2bwvoKEZomMOM.jpg"},
 {id:1756412,name:"Ray Whelan",profile_path:"/isPM6LslVwFVnDvE8esxAqNJWJR.jpg"},
 {id:1743005,name:"Tom Whelehan",profile_path:null},
 {id:1824304,name:"Zac Whitehead",profile_path:null},
 {id:1651386,name:"Miroslav Zaruba",profile_path:"/kZyZlbiFGoatmZSpeiYjm4hLhlu.jpg"},
 {id:590410,name:"Lee Neville",profile_path:"/2CR8faSmvsACfaQg05HWDZo4uEc.jpg"}];

var { width} = Dimensions.get('window');

export default class App extends Component {
  render() {
    return (
      <GridView
        itemDimension={width/5-20}
        items={Actor}
        style={styles.gridView}
        fixed={true}
        renderItem={item => (
          <View style={[styles.itemContainer, { backgroundColor: '#fff' }]}>
          <Image style={{
            textAlign: 'center',
            borderTopLeftRadius: 4,
            borderTopRightRadius: 4,
            height: 150,
            width: width/5-20 }} 
            source={{
              uri: (item.profile_path == null) ?
            'https://techreport.com/forums/styles/canvas/theme/images/no_avatar.jpg' :
            'https://image.tmdb.org/t/p/w185/'+item.profile_path
            }}
            />
            <Text numberOfLines={2} ellipsizeMode={'tail'} style={styles.itemName}>{item.name}</Text>
          </View>
        )}
      />
    );
  }
}
const styles = StyleSheet.create({
  gridView: {
    //paddingTop: 25,
    flex: 1,
  },
  itemContainer: {
    //justifyContent: 'flex-end',
    borderRadius: 4,
    //padding: 10,
    height: 180,
    elevation: 2,
    overflow: 'hidden', 
    //backgroundColor: "#fff", marginTop: 5, marginLeft: 8 
  },
  itemName: {
    fontSize: 10,
    textAlign: 'center',
    color: '#444',
    //fontWeight: '600',
  },
});

import React, {Component} from 'react';
import {Text,View,StyleSheet,TouchableOpacity} from 'react-native';
import GridView from 'react-native-super-grid';

export default class Home extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const {navigate} = this.props.navigation;
    
    const items = [
      { name: 'Quotes', code: '#1abc9c' ,id: Math.random() }, { name: 'EMERALD', code: '#2ecc71',id : Math.random() },
     
    ];
  
    onPress = () => {
      this.props.navigation.navigate('quotes')
    }

    return (
      <GridView 
          itemDimension={130}
          items={items}
          style={styles.gridView}
          renderItem={item => (
            <TouchableOpacity key={item.id}  onPress={this.onPress}> 
            <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
              <Text style={styles.itemName}>{item.name}</Text>
              <Text style={styles.itemCode}>{item.code}</Text>
            </View>
          </TouchableOpacity>
          )}
          
          />
    );
  }
}

const styles = StyleSheet.create({
  gridView: {
    paddingTop: 25,
    flex: 1,
  },
  itemContainer: {
    justifyContent: 'flex-end',
    borderRadius: 5,
    padding: 10,
    height: 150,
  },
  itemName: {
    fontSize: 16,
    color: '#fff',
    fontWeight: '600',
  },
  itemCode: {
    fontWeight: '600',
    fontSize: 12,
    color: '#fff',
  },
});

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

export default class Quotes extends Component {
    render(){

        return(
            <Text>Quotes</Text>
        )
    }
}

import React,{Component} from 'react';
import {createStackNavigator,StackNavigator} from 'react-navigation';
import Intro from '../Screen/Intro';
import HomeScreen from '../Screen/Home';
import QuotesScreen from '../Screen/Quotes';

export default logStack = StackNavigator({

    Intro : {
        
        screen : Intro
    },
    Home : {
        screen : HomeScreen
    },
    Quote : {
        screen : QuotesScreen
    }


},{
    initialRouteName : 'Intro',
    navigationOptions : {
        header : null
    }
})

const gridSectionRenderer = ({ section }) => {
  return (
    <Text style={[styles.CommonHeaderText, { fontSize: 25 }]}>
      {section.SectionName}
    </Text>
  );
};

    <SuperGridSectionList
          itemDimension={130}
          sections={this.state.data}
          style={styles.gridView}
          renderItem={gridViewRenderer}
          renderSectionHeader={gridSectionRenderer}
        />

<GridView
        spacing={0}
        itemDimension={screenWidth/2}
        items = {this.renderItems()}
        style={styles.gridView}
        renderItem={this.renderGrid.bind(this)}
     />

    let items = this.state.products;
   // const navigation = this.props.navigation



   if (this.state.ProductsLoaded === true){
       return  (

           <View style={styles.productContainer}>
               <Text style={styles.productContainerTitle}>Best Selling Mobiles</Text>
               <GridView
                   itemDimension={140}
                   items={items}
                   style={styles.gridView}
                  


                   renderItem={item => (
                       <TouchableOpacity style={[styles.itemContainer, { backgroundColor: '#ffffff' }]}
                                         onPress={() => this.props.navigation.navigate('About')}



                       >
                           <Image
                               style={styles.ProductImage}
                               source={{uri: item.product_primary_images.cdn_url }}
                           >

                           </Image>
                           <Text style={styles.itemName}>{item.name.slice(0,15)}</Text>
                           <Text style={styles.itemPrice}>
                               ₹ {item.listing_price}</Text><Text style={styles.itemPrice}>
                               ₹ {item.slug}</Text>
                       </TouchableOpacity>
                   )}
               />
           </View>

       )
   } else
    return (

           <View style={styles.productContainer}>
               <Text style={styles.productContainerTitle}>Best Selling Mobiles</Text>

               <View style={styles.gridViewLoading}>

                   <ActivityIndicator size="large" color="#4b8ccd" />

               </View>


           </View>

    );
}`

renderFooter={this.renderFooter)}
onEndReached={this._onEndReached}

    _onPress = () => {
    // your code on item press
    console.log('wakaa')
 };
  _renderCategory(item) {
    return (
      <TouchableOpacity onPress={()=>this._onPress()}>
      <ImageBackground  source={{uri: `data:${item.productCategoryImageContentType};base64,${item.productCategoryImage}`}} resizeMode= 'stretch' style={[styles.itemContainer,]}>
      <Text style={styles.itemName}>{item.category}</Text>
      <Text style={styles.itemCode}>{item.description}</Text>
      </ImageBackground>
      </TouchableOpacity>
    )
  }

  render () {
    return (
      <View style={styles.container}>
        <GridView
          style={styles.gridView}
          items={this.state.dataCategoryObjects}
          renderItem={this._renderCategory}
          onEndReached={this.handleLoadMore}
          keyExtractor={this.keyExtractor}
          initialNumToRender={this.oneScreensWorth}
          onEndReached={this.handleLoadMore}
          onEndThreshold={100}
          ListHeaderComponent={this.renderHeader}
          /* ListFooterComponent={this.renderFooter} */
          ListEmptyComponent={this.renderEmpty}
          ItemSeparatorComponent={this.renderSeparator}

     
  
        />

    
      </View>
    )
  }

<View style={rowStyle}>
        {(data || []).map((item, i) => (
          <View key={`${rowId}_${i}`} style={columnStyle}>
            <View style={itemStyle}>
              {this.props.renderItem(item,i)}
            </View>
          </View>
        ))}
      </View>