♻️ refactor: Add TypeScript support and refactor image grid components

.tool-versions

@@ -0,0 +1,5 @@
+ruby 3.2.0
+nodejs 22.11.0
+java zulu-17.54.21
+gradle 8.12
+golang 1.22.6

package.json

@@ -25,6 +25,8 @@
     "test": "jest",
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "format": "prettier --write \"**/*.{js,ts,tsx,json,md}\"",
     "prepare": "bob build",
     "release": "release-it",
     "example": "yarn --cwd example",
@@ -47,24 +49,32 @@
     "registry": "https://registry.npmjs.org/"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^11.0.0",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@release-it/conventional-changelog": "^2.0.0",
-    "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "0.62.13",
-    "commitlint": "^11.0.0",
-    "eslint": "^7.2.0",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "jest": "^26.0.1",
-    "pod-install": "^0.1.0",
-    "prettier": "^2.0.5",
-    "react": "16.13.1",
-    "react-native": "0.63.4",
-    "react-native-builder-bob": "^0.17.1",
-    "release-it": "^14.2.2",
-    "typescript": "^4.1.3"
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@react-native/eslint-config": "^0.80.2",
+    "@release-it/conventional-changelog": "^8.0.2",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.8",
+    "@types/react-native": "^0.73.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "commitlint": "^19.6.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-native": "^4.1.0",
+    "husky": "^9.1.7",
+    "jest": "^29.7.0",
+    "lint-staged": "^15.2.11",
+    "pod-install": "^0.2.2",
+    "prettier": "^3.4.2",
+    "react": "19.1.0",
+    "react-native": "0.80.2",
+    "react-native-builder-bob": "^0.30.3",
+    "release-it": "^17.8.2",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "react": "*",
@@ -80,9 +90,15 @@
   "husky": {
     "hooks": {
       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "yarn lint && yarn typescript"
+      "pre-commit": "lint-staged"
     }
   },
+  "lint-staged": {
+    "**/*.{js,ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -108,7 +124,7 @@
   "eslintConfig": {
     "root": true,
     "extends": [
-      "@react-native-community",
+      "@react-native",
       "prettier"
     ],
     "rules": {

src/Context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import { ImageGridContextValue } from './types';
+
+// Context
+export const ImageGridContext = createContext<ImageGridContextValue | null>(
+  null
+);

src/Grid.tsx

@@ -0,0 +1,45 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+import { useImageGridContext } from './ImageGrid';
+import { Five, Four, One, Six, Three, Two } from './GroupImage';
+
+// Component mapping for better performance and maintainability
+const GRID_COMPONENTS = {
+  1: One,
+  2: Two,
+  3: Three,
+  4: Four,
+  5: Five,
+  6: Six,
+} as const;
+
+type GridLength = keyof typeof GRID_COMPONENTS;
+
+/**
+ * Grid component that renders the appropriate layout based on image count
+ */
+const Grid: React.FC = memo(() => {
+  const { containerStyle, length } = useImageGridContext();
+
+  // Safely get the component, fallback to One if length is out of bounds
+  const GridComponent = GRID_COMPONENTS[Math.min(Math.max(length, 1), 6) as GridLength] || One;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <GridComponent />
+    </View>
+  );
+});
+
+// Display name for debugging
+Grid.displayName = 'Grid';
+
+export default Grid;
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  } satisfies ViewStyle,
+});

src/GroupImage/Five.js

@@ -4,7 +4,7 @@ import { View, StyleSheet } from 'react-native';
 
 import { ImageGridContext } from '../ImageGrid.tsx';
 import { LAYOUT_ROW_SQUARE } from '../helpers';
-import Image from '../Image';
+import Image from '../Image.js';
 import Two from './Two';
 
 const Five = () => {

src/GroupImage/Four.js

@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 
 import { ImageGridContext } from '../ImageGrid.tsx';
 import { LAYOUT_COLUMN, LAYOUT_ROW } from '../helpers';
-import Image from '../Image';
+import Image from '../Image.js';
 
 const Four = () => {
   const { data, width, layout, spaceSize, length } = useContext(

src/GroupImage/One.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { ImageGridContext } from '../ImageGrid.tsx';
-import Image from '../Image';
+import Image from '../Image.js';
 
 const One = () => {
   const {

src/GroupImage/Six.js

@@ -3,7 +3,7 @@ import React, { useContext, useEffect } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { ImageGridContext } from '../ImageGrid.tsx';
-import Image from '../Image';
+import Image from '../Image.js';
 
 const Six = () => {
   const { data, width, spaceSize, length } = useContext(ImageGridContext);

src/GroupImage/Three.js

@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 
 import { ImageGridContext } from '../ImageGrid.tsx';
 import { LAYOUT_COLUMN, LAYOUT_ROW } from '../helpers';
-import Image from '../Image';
+import Image from '../Image.js';
 
 const Three = () => {
   const { data, width, layout, spaceSize, length } = useContext(

src/GroupImage/Two.js

@@ -3,7 +3,7 @@ import { View, StyleSheet } from 'react-native';
 
 import { ImageGridContext } from '../ImageGrid.tsx';
 import { LAYOUT_COLUMN, LAYOUT_ROW_SQUARE } from '../helpers';
-import Image from '../Image';
+import Image from '../Image.js';
 
 const Two = ({ layoutProps, dataProps }) => {
   const { data: dataMain, width, layout: layoutMain, spaceSize } = useContext(