chore: Tab navigator example

example/app/package.json

@@ -5,6 +5,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
     "@react-native-async-storage/async-storage": "^1.24.0",
+    "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/native": "7.0.14",
     "@react-navigation/native-stack": "7.2.0",
     "@shopify/flash-list": "patch:@shopify/flash-list@npm%3A1.8.0#~/.yarn/patches/@shopify-flash-list-npm-1.8.0-54e02d8f74.patch",

example/app/src/examples/SortableFlex/PlaygroundExample.tsx

@@ -8,7 +8,7 @@ import { getCategories } from '@/utils';
 
 const DATA = getCategories(IS_WEB ? 30 : 10);
 
-export default function Flex() {
+export default function PlaygroundExample() {
   return (
     <ScrollScreen includeNavBarHeight>
       <Sortable.Flex gap={10} padding={10}>

example/app/src/examples/SortableFlex/tests/BottomTabsNavigatorExample.tsx

@@ -0,0 +1,122 @@
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { StyleSheet, Text } from 'react-native';
+import Sortable from 'react-native-sortables';
+
+import { FlexCell, Screen, ScrollScreen } from '@/components';
+import { colors, spacing, text } from '@/theme';
+import { getCategories } from '@/utils';
+
+const Tab = createBottomTabNavigator();
+
+const DATA_LENGTH = 30;
+const DATA = getCategories(DATA_LENGTH);
+
+type FlexProps = {
+  data: Array<string>;
+};
+
+function Flex({ data }: FlexProps) {
+  return (
+    <Sortable.Flex columnGap={spacing.sm} rowGap={spacing.xs}>
+      {data.map(item => (
+        <FlexCell key={item} size='large'>
+          {item}
+        </FlexCell>
+      ))}
+    </Sortable.Flex>
+  );
+}
+
+function Screen1() {
+  return (
+    <ScrollScreen contentContainerStyle={styles.scrollContainer}>
+      <Text style={styles.screenTitle}>Screen 1 flex:</Text>
+      <Flex data={DATA.slice(0, DATA_LENGTH / 2)} />
+    </ScrollScreen>
+  );
+}
+
+function Screen2() {
+  return (
+    <ScrollScreen contentContainerStyle={styles.scrollContainer}>
+      <Text style={styles.screenTitle}>Screen 2 flex:</Text>
+      <Flex data={DATA.slice(DATA_LENGTH / 2)} />
+    </ScrollScreen>
+  );
+}
+
+function Screen3() {
+  return (
+    <ScrollScreen contentContainerStyle={styles.scrollContainer}>
+      <Text style={styles.screenTitle}>Screen without sortable flex</Text>
+    </ScrollScreen>
+  );
+}
+
+const tabBarOptions: BottomTabNavigationOptions = {
+  tabBarIcon: ({ focused }) => (
+    <FontAwesomeIcon
+      color={focused ? colors.primary : colors.foreground3}
+      icon={faCircle}
+    />
+  ),
+  tabBarLabel: ({ focused }) => (
+    <Text style={focused ? styles.focusedLabel : styles.label}>Screen 1</Text>
+  )
+};
+
+function Tabs() {
+  return (
+    <Tab.Navigator
+      // This option breaks sortable state when navigating between screens
+      // https://github.com/MatiPl01/react-native-sortables/issues/308
+      detachInactiveScreens={false}
+      screenOptions={{
+        tabBarStyle: {
+          shadowColor: 'transparent'
+        }
+      }}>
+      <Tab.Screen component={Screen1} name='Screen1' options={tabBarOptions} />
+      <Tab.Screen component={Screen2} name='Screen2' options={tabBarOptions} />
+      <Tab.Screen
+        component={Screen3}
+        name='No sortable'
+        options={tabBarOptions}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default function BottomTabsNavigatorExample() {
+  return (
+    <Screen style={styles.container} includeNavBarHeight>
+      <Tabs />
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white
+  },
+  focusedLabel: {
+    ...text.label3,
+    color: colors.primary
+  },
+  label: {
+    ...text.label3,
+    color: colors.foreground3,
+    fontWeight: 'normal'
+  },
+  screenTitle: {
+    ...text.label1,
+    color: colors.foreground1,
+    marginBottom: spacing.md
+  },
+  scrollContainer: {
+    padding: spacing.md
+  }
+});

example/app/src/examples/SortableFlex/tests/index.ts

@@ -1 +1,4 @@
-export { default as ComplexLayoutExample } from './ComplexLayoutExample';
+import BottomTabsNavigatorExample from './BottomTabsNavigatorExample';
+import ComplexLayoutExample from './ComplexLayoutExample';
+
+export { BottomTabsNavigatorExample, ComplexLayoutExample };

example/app/src/examples/SortableGrid/index.ts

@@ -1,3 +1,4 @@
 export * as features from './features';
 export * as miscellaneous from './miscellaneous';
 export { default as PlaygroundExample } from './PlaygroundExample';
+export * as tests from './tests';

example/app/src/examples/SortableGrid/tests/BottomTabsNavigatorExample.tsx

@@ -0,0 +1,139 @@
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
+import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { useCallback } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import type { SortableGridRenderItem } from 'react-native-sortables';
+import Sortable from 'react-native-sortables';
+
+import { GridCard, Screen, ScrollScreen } from '@/components';
+import { colors, spacing, text } from '@/theme';
+
+const Tab = createBottomTabNavigator();
+
+const DATA_LENGTH = 36;
+const DATA = Array.from(
+  { length: DATA_LENGTH },
+  (_, index) => `Item ${index + 1}`
+);
+
+type GridProps = {
+  data: Array<string>;
+};
+
+function Grid({ data }: GridProps) {
+  const renderItem = useCallback<SortableGridRenderItem<string>>(
+    ({ item }) => <GridCard>{item}</GridCard>,
+    []
+  );
+
+  return (
+    <Sortable.Grid
+      columnGap={10}
+      columns={3}
+      data={data}
+      renderItem={renderItem}
+      rowGap={10}
+    />
+  );
+}
+
+function Screen1() {
+  return (
+    <ScrollScreen contentContainerStyle={styles.scrollContainer}>
+      <Text style={styles.screenTitle}>Screen 1 grid:</Text>
+      <Grid data={DATA.slice(0, DATA_LENGTH / 2)} />
+    </ScrollScreen>
+  );
+}
+
+function Screen2() {
+  return (
+    <ScrollScreen contentContainerStyle={styles.scrollContainer}>
+      <Text style={styles.screenTitle}>Screen 2 grid:</Text>
+      <Grid data={DATA.slice(DATA_LENGTH / 2)} />
+    </ScrollScreen>
+  );
+}
+
+function Screen3() {
+  return (
+    <ScrollScreen contentContainerStyle={styles.scrollContainer}>
+      <Text style={styles.screenTitle}>Screen without sortable grid</Text>
+    </ScrollScreen>
+  );
+}
+
+const tabBarOptions: BottomTabNavigationOptions = {
+  tabBarIcon: ({ focused }) => (
+    <FontAwesomeIcon
+      color={focused ? colors.primary : colors.foreground3}
+      icon={faCircle}
+    />
+  ),
+  tabBarLabel: ({ children, focused }) => (
+    <Text style={focused ? styles.focusedLabel : styles.label}>{children}</Text>
+  )
+};
+
+function Tabs() {
+  return (
+    <Tab.Navigator
+      // This option breaks sortable state when navigating between screens
+      // https://github.com/MatiPl01/react-native-sortables/issues/308
+      detachInactiveScreens={false}
+      screenOptions={{
+        tabBarStyle: {
+          shadowColor: 'transparent'
+        }
+      }}>
+      <Tab.Screen
+        component={Screen1}
+        name='Sortable 1'
+        options={tabBarOptions}
+      />
+      <Tab.Screen
+        component={Screen2}
+        name='Sortable 2'
+        options={tabBarOptions}
+      />
+      <Tab.Screen
+        component={Screen3}
+        name='No sortable'
+        options={tabBarOptions}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default function BottomTabsNavigatorExample() {
+  return (
+    <Screen style={styles.container} includeNavBarHeight>
+      <Tabs />
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.white
+  },
+  focusedLabel: {
+    ...text.label3,
+    color: colors.primary
+  },
+  label: {
+    ...text.label3,
+    color: colors.foreground3,
+    fontWeight: 'normal'
+  },
+  screenTitle: {
+    ...text.label1,
+    color: colors.foreground1,
+    marginBottom: spacing.md
+  },
+  scrollContainer: {
+    padding: spacing.md
+  }
+});

example/app/src/examples/SortableGrid/tests/index.ts

@@ -0,0 +1 @@
+export { default as BottomTabsNavigatorExample } from './BottomTabsNavigatorExample';

example/app/src/examples/navigation/routes.ts

@@ -75,7 +75,16 @@ const routes: Routes = {
             }
           }
         }
-      })
+      }),
+      Tests: {
+        name: 'Test examples',
+        routes: {
+          BottomTabsNavigator: {
+            Component: SortableGrid.tests.BottomTabsNavigatorExample,
+            name: 'Bottom Tabs Navigator'
+          }
+        }
+      }
     }
   },
   SortableFlex: {
@@ -134,6 +143,10 @@ const routes: Routes = {
           ComplexLayout: {
             Component: SortableFlex.tests.ComplexLayoutExample,
             name: 'Complex Layout'
+          },
+          BottomTabsNavigator: {
+            Component: SortableFlex.tests.BottomTabsNavigatorExample,
+            name: 'Bottom Tabs Navigator'
           }
         }
       }

yarn.lock

@@ -3781,6 +3781,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-navigation/bottom-tabs@npm:^7.3.10":
+  version: 7.3.10
+  resolution: "@react-navigation/bottom-tabs@npm:7.3.10"
+  dependencies:
+    "@react-navigation/elements": "npm:^2.3.8"
+    color: "npm:^4.2.3"
+  peerDependencies:
+    "@react-navigation/native": ^7.1.6
+    react: ">= 18.2.0"
+    react-native: "*"
+    react-native-safe-area-context: ">= 4.0.0"
+    react-native-screens: ">= 4.0.0"
+  checksum: 10c0/17adb7ebc38fd6d99866cf365f93099e5e83efdc0203051f3bbd7f731791f04c4323901d81ea2af9bb82a7ad22ff547d8a31f395a19de6160b7a3596990b1191
+  languageName: node
+  linkType: hard
+
 "@react-navigation/core@npm:^7.3.1":
   version: 7.8.5
   resolution: "@react-navigation/core@npm:7.8.5"
@@ -3798,7 +3814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-navigation/elements@npm:^2.2.5":
+"@react-navigation/elements@npm:^2.2.5, @react-navigation/elements@npm:^2.3.8":
   version: 2.3.8
   resolution: "@react-navigation/elements@npm:2.3.8"
   dependencies:
@@ -7987,6 +8003,7 @@ __metadata:
     "@react-native-community/cli-platform-ios": "npm:18.0.0"
     "@react-native/babel-preset": "npm:0.79.0"
     "@react-native/metro-config": "npm:0.79.0"
+    "@react-navigation/bottom-tabs": "npm:^7.3.10"
     "@react-navigation/native": "npm:7.0.14"
     "@react-navigation/native-stack": "npm:7.2.0"
     "@shopify/flash-list": "patch:@shopify/flash-list@npm%3A1.8.0#~/.yarn/patches/@shopify-flash-list-npm-1.8.0-54e02d8f74.patch"