added new examples

Author: iNerdStack

example/assets/images/grid-layout.jpeg

@@ -11,12 +11,13 @@ import { SafeAreaView } from 'react-native';
 import InstagramExploreExample from './InstagramExploreExample';
 import PinterestExample from './PinterestHomeExample';
 import GridBoardExamplePage from './GridBoardExample';
+import TileGrid from './TileGrid';
 
 type ScreenName =
   | 'Landing'
-  | 'FlexGrid'
   | 'InstagramExplore'
   | 'Pinterest'
+  | 'TileGrid'
   | 'GridBoardExample';
 
 interface LandingProps {
@@ -26,6 +27,13 @@ interface LandingProps {
 const Landing = ({ onNavigate }: LandingProps) => {
   return (
     <View style={styles.container}>
+      <TouchableOpacity
+        onPress={() => onNavigate('TileGrid')}
+        style={styles.button}
+      >
+        <Text style={styles.text}>TileGrid Example </Text>
+      </TouchableOpacity>
+
       <TouchableOpacity
         onPress={() => onNavigate('InstagramExplore')}
         style={styles.button}
@@ -78,6 +86,7 @@ const App = () => {
   return (
     <SafeAreaView style={styles.safeAreaContainer}>
       {currentScreen === 'Landing' && <Landing onNavigate={navigate} />}
+      {currentScreen === 'TileGrid' && <TileGrid />}
       {currentScreen === 'InstagramExplore' && <InstagramExploreExample />}
       {currentScreen === 'Pinterest' && <PinterestExample />}
       {currentScreen === 'GridBoardExample' && <GridBoardExamplePage />}

example/src/App.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable react-native/no-inline-styles */
+
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { ResponsiveGrid } from 'react-native-flexible-grid';
+
+export default function TileGrid() {
+  const data = [
+    {
+      widthRatio: 1,
+      heightRatio: 1,
+    },
+    {
+      widthRatio: 1,
+      heightRatio: 1,
+    },
+    {
+      widthRatio: 1,
+      heightRatio: 2,
+    },
+    {
+      widthRatio: 1,
+      heightRatio: 3,
+    },
+    {
+      widthRatio: 2,
+      heightRatio: 1,
+    },
+    {
+      widthRatio: 3,
+      heightRatio: 1,
+    },
+  ];
+
+  return (
+    <View
+      style={{
+        flex: 1,
+      }}
+    >
+      <ResponsiveGrid
+        maxItemsPerColumn={4}
+        data={data}
+        renderItem={(item, _) => (
+          <TouchableOpacity
+            style={{
+              backgroundColor: 'white',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: '100%',
+              height: '100%',
+              padding: 2,
+            }}
+            onPress={() => {
+              console.log(item.text, 'pressed');
+            }}
+          >
+            <View
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: '#FFA502',
+                justifyContent: 'center',
+                alignItems: 'center',
+                borderRadius: 5,
+              }}
+            >
+              <Text
+                style={{
+                  color: 'white',
+                  fontSize: 20,
+                }}
+              >
+                {item.text}
+              </Text>
+            </View>
+          </TouchableOpacity>
+        )}
+      />
+    </View>
+  );
+}