released 0.1.8

Author: iNerdStack

CONTRIBUTING.md

@@ -6,7 +6,7 @@ We want this community to be friendly and respectful to each other. Please follo
 
 ## Development workflow
 
-This project is a monorepo managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
+This project is managed using [Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the following packages:
 
 - The library package in the root directory.
 - An example app in the `example/` directory.
@@ -21,7 +21,7 @@ yarn
 
 The [example app](/example/) demonstrates usage of the library. You need to run it to test any changes you make.
 
-It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild, but native code changes will require a rebuild of the example app.
+It is configured to use the local version of the library, so any changes you make to the library's source code will be reflected in the example app. Changes to the library's JavaScript code will be reflected in the example app without a rebuild.
 
 You can use various commands from the root directory to work with the project.
 
@@ -79,24 +79,22 @@ We follow the [conventional commits specification](https://www.conventionalcommi
 - `test`: adding or updating tests, e.g. add integration tests using detox.
 - `chore`: tooling changes, e.g. change CI config.
 
-Our pre-commit hooks verify that your commit message matches this format when committing.
 
 ### Linting and tests
 
 [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
 
 We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
 
-Our pre-commit hooks verify that the linter and tests pass when committing.
 
 ### Publishing to npm
 
-We use [release-it](https://github.com/release-it/release-it) to make it easier to publish new versions. It handles common tasks like bumping version based on semver, creating tags and releases etc.
+Our project's new versions are carefully curated and published to npm by our core maintainers to ensure the integrity and stability of the package. They manually update the version in <code>package.json</code> according to semantic versioning (semver) rules. This steps are crucial for tracking different versions of the package, ensuring compatibility, maintaining the quality and reliability of our releases.
+
 
-To publish new versions, run the following:
 
 ```sh
-yarn release
+npm publish
 ```
 
 ### Scripts

README.md

@@ -306,6 +306,21 @@ A lower value results in more frequent updates, offering smoother visual updates
   <td>Defines the threshold for triggering <code>onVerticalEndReached</code>. Represented as a fraction of the total height of the scrollable grid, indicating how far from the end the vertical scroll must be to trigger the event.</td>
 </tr>
 
+<tr>
+  <td><code>HeaderComponent</code></td>
+  <td><code>React.ComponentType&lt;any&gt; | React.ReactElement | null | undefined</code></td>
+  <td><code>null</code></td>
+  <td><code>false</code></td>
+  <td>Accepts a React component or element that will be rendered at the top of the grid, before any grid items are displayed. Suitable for titles, search bar, etc</td>
+</tr>
+<tr>
+  <td><code>FooterComponent</code></td>
+  <td><code>React.ComponentType&lt;any&gt; | React.ReactElement | null | undefined</code></td>
+  <td><code>null</code></td>
+  <td><code>false</code></td>
+  <td>Accepts a React component or element that will be rendered at the bottom of the grid, after all the grid items have been displayed. Suitable for load more buttons, indicator or component</td>
+</tr>
+
   </tbody>
 </table>
 
@@ -431,6 +446,21 @@ A lower value results in more frequent updates, offering smoother visual updates
   <td> Defines the distance from the end of the content at which <code>onEndReached</code> should be triggered, expressed as a proportion of the total content length. For example, a value of <code>0.1</code> triggers the callback when the user has scrolled to within 10% of the end of the content. </td>
 </tr>
 
+<tr>
+  <td><code>HeaderComponent</code></td>
+  <td><code>React.ComponentType&lt;any&gt; | React.ReactElement | null | undefined</code></td>
+  <td><code>null</code></td>
+  <td><code>false</code></td>
+  <td>Accepts a React component or element that will be rendered at the top of the grid, before any grid items are displayed. Suitable for titles, search bar, etc</td>
+</tr>
+<tr>
+  <td><code>FooterComponent</code></td>
+  <td><code>React.ComponentType&lt;any&gt; | React.ReactElement | null | undefined</code></td>
+  <td><code>null</code></td>
+  <td><code>false</code></td>
+  <td>Accepts a React component or element that will be rendered at the bottom of the grid, after all the grid items have been displayed. Suitable for load more buttons, indicator or component</td>
+</tr>
+
   </tbody>
 </table>
 

example/src/App.tsx

@@ -12,13 +12,15 @@ import InstagramExploreExample from './InstagramExploreExample';
 import PinterestExample from './PinterestHomeExample';
 import GridBoardExamplePage from './GridBoardExample';
 import InfiniteScrollExample from './InfiniteScrollExample';
+import MultiDirectionScrollExample from './MultiDirectionScrollExample';
 
 type ScreenName =
   | 'Landing'
   | 'InstagramExplore'
   | 'Pinterest'
   | 'InfiniteScrollExample'
-  | 'GridBoardExample';
+  | 'GridBoardExample'
+  | 'MultiDirectionScrollExample';
 
 interface LandingProps {
   onNavigate: (screenName: ScreenName) => void;
@@ -54,6 +56,13 @@ const Landing = ({ onNavigate }: LandingProps) => {
       >
         <Text style={styles.text}>Infinite Scroll Example </Text>
       </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => onNavigate('MultiDirectionScrollExample')}
+        style={styles.button}
+      >
+        <Text style={styles.text}>Multi-Direction Scroll Example </Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -90,6 +99,9 @@ const App = () => {
       {currentScreen === 'InstagramExplore' && <InstagramExploreExample />}
       {currentScreen === 'Pinterest' && <PinterestExample />}
       {currentScreen === 'GridBoardExample' && <GridBoardExamplePage />}
+      {currentScreen === 'MultiDirectionScrollExample' && (
+        <MultiDirectionScrollExample />
+      )}
     </SafeAreaView>
   );
 };

example/src/InfiniteScrollExample.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react-native/no-inline-styles */
 
 import React, { useState, useEffect } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { ResponsiveGrid } from 'react-native-flexible-grid';
 
 const InfiniteScrollExample = () => {
@@ -53,19 +53,50 @@ const InfiniteScrollExample = () => {
     setTimeout(() => {
       // Simulate network request
       const newData = getData(5);
+
       setData((prevData) => [...prevData, ...newData]); // Append new data
       setLoading(false);
-    }, 1500);
+    }, 4000);
   };
 
-  // const renderFooter = () => {
-  //   if (!loading) return null;
-  //   return (
-  //     <View style={styles.loader}>
-  //       <ActivityIndicator size="large" />
-  //     </View>
-  //   );
-  // };
+  const renderFooter = () => {
+    if (!loading) return null;
+    return (
+      <View
+        style={{
+          padding: 20,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'white',
+          height: 100,
+        }}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  };
+
+  const renderHeader = () => {
+    return (
+      <View
+        style={{
+          padding: 20,
+          justifyContent: 'center',
+          alignItems: 'center',
+          backgroundColor: 'white',
+        }}
+      >
+        <Text
+          style={{
+            fontSize: 25,
+            fontWeight: 'bold',
+          }}
+        >
+          Infinite Grid Example
+        </Text>
+      </View>
+    );
+  };
 
   const renderItem = ({ item }: any) => {
     return (
@@ -102,22 +133,28 @@ const InfiniteScrollExample = () => {
   };
 
   return (
-    <ResponsiveGrid
-      maxItemsPerColumn={4}
-      data={data}
-      itemContainerStyle={{
-        padding: 2,
-      }}
-      renderItem={renderItem}
+    <View
       style={{
-        backgroundColor: 'white',
+        flex: 1,
       }}
-      //FooterComponent={renderFooter}
-      keyExtractor={(item) => item.id}
-      onEndReached={loadData}
-      onEndReachedThreshold={0.5}
-      virtualization={false}
-    />
+    >
+      <ResponsiveGrid
+        maxItemsPerColumn={4}
+        data={data}
+        itemContainerStyle={{
+          padding: 2,
+        }}
+        renderItem={renderItem}
+        style={{
+          backgroundColor: 'white',
+        }}
+        HeaderComponent={renderHeader}
+        FooterComponent={renderFooter}
+        keyExtractor={(item) => item.id}
+        onEndReached={loadData}
+        onEndReachedThreshold={0.2}
+      />
+    </View>
   );
 };