fix: Column and row count issues (#354)

## Description

This PR fixes 2 issues with column/row count in the sortable grid:
- Don't allow non-positive column/row count
- Fix invalid layout animation on android when column/row count changes

It also improves the column count change in the drag handle example -
adds layout animation to grid card dimensions.

## Example recordings

Example recording for column change on Android

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/a4a2e8fb-a46e-4726-817d-e9e636407348"
/> | <video
src="https://github.com/user-attachments/assets/5ef3c8d3-8eaa-4477-b0c4-2af63c2faca4"
/> |

Author: MatiPl01

example/app/src/examples/SortableGrid/features/DragHandleExample.tsx

@@ -2,7 +2,10 @@ import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { useCallback, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import Animated, { useAnimatedRef } from 'react-native-reanimated';
+import Animated, {
+  LinearTransition,
+  useAnimatedRef
+} from 'react-native-reanimated';
 import type { OverDrag, SortableGridRenderItem } from 'react-native-sortables';
 import Sortable from 'react-native-sortables';
 
@@ -25,12 +28,14 @@ export default function DragHandleExample() {
 
   const renderItem = useCallback<SortableGridRenderItem<string>>(
     ({ item }) => (
-      <View style={styles.card}>
+      <Animated.View layout={LinearTransition} style={styles.card}>
         <Text style={styles.text}>{item}</Text>
-        <Sortable.Handle>
-          <FontAwesomeIcon color={colors.white} icon={faGripVertical} />
-        </Sortable.Handle>
-      </View>
+        <Animated.View layout={LinearTransition}>
+          <Sortable.Handle>
+            <FontAwesomeIcon color={colors.white} icon={faGripVertical} />
+          </Sortable.Handle>
+        </Animated.View>
+      </Animated.View>
     ),
     []
   );

packages/react-native-sortables/src/components/SortableGrid.tsx

@@ -64,11 +64,12 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
   if (!isVertical && !rowHeight) {
     throw error('rowHeight is required for horizontal Sortable.Grid');
   }
-
-  // this allows changing the number of columns/rows while developing
-  // code with no necessity to reload the app
-  // (state of the grid must be reset when this param changes)
-  const key = (groups << 1) | (isVertical ? 1 : 0);
+  if (columns !== undefined && columns < 1) {
+    throw error('columns must be greater than 0');
+  }
+  if (rows !== undefined && rows < 1) {
+    throw error('rows must be greater than 0');
+  }
 
   const columnGapValue = useAnimatableValue(columnGap);
   const rowGapValue = useAnimatableValue(rowGap);
@@ -88,7 +89,6 @@ function SortableGrid<I>(props: SortableGridProps<I>) {
       {...sharedProps}
       controlledContainerDimensions={controlledContainerDimensions}
       itemKeys={itemKeys}
-      key={key}
       initialItemsStyleOverride={
         isVertical ? undefined : styles.horizontalStyleOverride
       }