Add example to the repo

fixes #11

example/.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

example/App.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Grid from 'react-native-grid-component';
+
+const ITEMS_COUNT = 19;
+
+export default class Simple extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      data: generateRandomColorsArray(ITEMS_COUNT),
+      refreshing: false
+    };
+  }
+
+  _renderItem = data => (
+    <View style={[{ backgroundColor: data }, styles.item]} />
+  );
+
+  _renderPlaceholder = () => <View style={styles.item} />;
+
+  render() {
+    return (
+      <Grid
+        style={styles.list}
+        renderItem={this._renderItem}
+        renderPlaceholder={this._renderPlaceholder}
+        data={this.state.data}
+        numColumns={2}
+        keyExtractor={(item, index) => index.toString()}
+        refreshing={this.state.refreshing}
+        onRefresh={() => {
+          this.setState({
+            data: generateRandomColorsArray(ITEMS_COUNT),
+            refreshing: false
+          });
+        }}
+        onEndReached={() => {
+          this.setState(({ data }) => ({
+            data: [...data, ...generateRandomColorsArray(ITEMS_COUNT)]
+          }));
+        }}
+      />
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  item: {
+    flex: 1,
+    height: 160,
+    margin: 1
+  },
+  list: {
+    flex: 1
+  }
+});
+
+// Helper functions
+// thanks materialuicolors.co
+const colors = [
+  '#F44336',
+  '#E91E63',
+  '#9C27B0',
+  '#673AB7',
+  '#3F51B5',
+  '#2196F3',
+  '#03A9F4',
+  '#00BCD4',
+  '#009688',
+  '#4CAF50',
+  '#8BC34A',
+  '#CDDC39',
+  '#FFEB3B',
+  '#FFC107',
+  '#FF9800',
+  '#FF5722',
+  '#795548',
+  '#9E9E9E',
+  '#607D8B'
+];
+
+function generateRandomColorsArray(length) {
+  return Array.from(Array(length)).map(
+    () => colors[Math.floor(Math.random() * colors.length)]
+  );
+}

example/app.json

@@ -0,0 +1,18 @@
+{
+  "expo": {
+    "name": "react-native-grid-component-example",
+    "slug": "react-native-grid-component-example",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo']
+  };
+};

example/package.json

@@ -0,0 +1,19 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react-native-grid-component": "^1.1.0"
+  },
+  "devDependencies": {
+    "babel-preset-expo": "^5.0.0"
+  },
+  "private": true
+}