Skip to content

Commit 85d32c9

Browse files
MatiPl01MatiPl01
committed
Add bottom tabs navigator example to the sortable grid examples
1 parent 6162b58 commit 85d32c9

7 files changed

Lines changed: 141 additions & 3 deletions

File tree

‎example/app/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"@fortawesome/free-solid-svg-icons": "^6.5.2",
66
"@fortawesome/react-native-fontawesome": "^0.3.2",
77
"@react-native-async-storage/async-storage": "^1.24.0",
8+
"@react-navigation/bottom-tabs": "^7.3.10",
89
"@react-navigation/native": "7.0.14",
910
"@react-navigation/native-stack": "7.2.0",
1011
"@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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { getCategories } from '@/utils';
88

99
const DATA = getCategories(IS_WEB ? 30 : 10);
1010

11-
export default function Flex() {
11+
export default function PlaygroundExample() {
1212
return (
1313
<ScrollScreen includeNavBarHeight>
1414
<Sortable.Flex gap={10} padding={10}>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export * as features from './features';
22
export * as miscellaneous from './miscellaneous';
33
export { default as PlaygroundExample } from './PlaygroundExample';
4+
export * as tests from './tests';

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { faCircle } from '@fortawesome/free-solid-svg-icons';
2+
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
3+
import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
4+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
5+
import { useCallback } from 'react';
6+
import { StyleSheet, Text } from 'react-native';
7+
import type { SortableGridRenderItem } from 'react-native-sortables';
8+
import Sortable from 'react-native-sortables';
9+
10+
import { GridCard, Screen, ScrollScreen } from '@/components';
11+
import { colors, spacing, text } from '@/theme';
12+
13+
const Tab = createBottomTabNavigator();
14+
15+
const DATA_LENGTH = 36;
16+
const DATA = Array.from(
17+
{ length: DATA_LENGTH },
18+
(_, index) => `Item ${index + 1}`
19+
);
20+
21+
type GridProps = {
22+
data: Array<string>;
23+
};
24+
25+
function Grid({ data }: GridProps) {
26+
const renderItem = useCallback<SortableGridRenderItem<string>>(
27+
({ item }) => <GridCard>{item}</GridCard>,
28+
[]
29+
);
30+
31+
return (
32+
<Sortable.Grid
33+
columnGap={10}
34+
columns={3}
35+
data={data}
36+
renderItem={renderItem}
37+
rowGap={10}
38+
/>
39+
);
40+
}
41+
42+
function Screen1() {
43+
return (
44+
<ScrollScreen contentContainerStyle={styles.scrollContainer}>
45+
<Text style={styles.screenTitle}>Screen 1</Text>
46+
<Grid data={DATA.slice(0, DATA_LENGTH / 2)} />
47+
</ScrollScreen>
48+
);
49+
}
50+
51+
function Screen2() {
52+
return (
53+
<ScrollScreen contentContainerStyle={styles.scrollContainer}>
54+
<Text style={styles.screenTitle}>Screen 2</Text>
55+
<Grid data={DATA.slice(DATA_LENGTH / 2)} />
56+
</ScrollScreen>
57+
);
58+
}
59+
60+
const tabBarOptions: BottomTabNavigationOptions = {
61+
tabBarIcon: ({ focused }) => (
62+
<FontAwesomeIcon
63+
color={focused ? colors.primary : colors.foreground3}
64+
icon={faCircle}
65+
/>
66+
),
67+
tabBarLabel: ({ focused }) => (
68+
<Text style={focused ? styles.focusedLabel : styles.label}>Screen 1</Text>
69+
)
70+
};
71+
function Tabs() {
72+
return (
73+
<Tab.Navigator>
74+
<Tab.Screen component={Screen1} name='Screen1' options={tabBarOptions} />
75+
<Tab.Screen component={Screen2} name='Screen2' options={tabBarOptions} />
76+
</Tab.Navigator>
77+
);
78+
}
79+
80+
export default function BottomTabsNavigatorExample() {
81+
return (
82+
<Screen style={styles.container} includeNavBarHeight>
83+
<Tabs />
84+
</Screen>
85+
);
86+
}
87+
88+
const styles = StyleSheet.create({
89+
container: {
90+
backgroundColor: colors.white
91+
},
92+
focusedLabel: {
93+
...text.label3,
94+
color: colors.primary
95+
},
96+
label: {
97+
...text.label3,
98+
color: colors.foreground3,
99+
fontWeight: 'normal'
100+
},
101+
screenTitle: {
102+
...text.label1,
103+
color: colors.foreground1,
104+
marginBottom: spacing.md
105+
},
106+
scrollContainer: {
107+
padding: spacing.md
108+
}
109+
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as BottomTabsNavigatorExample } from './BottomTabsNavigatorExample';

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,16 @@ const routes: Routes = {
7171
}
7272
}
7373
}
74-
})
74+
}),
75+
Tests: {
76+
name: 'Test examples',
77+
routes: {
78+
BottomTabsNavigator: {
79+
Component: SortableGrid.tests.BottomTabsNavigatorExample,
80+
name: 'Bottom Tabs Navigator'
81+
}
82+
}
83+
}
7584
}
7685
},
7786
SortableFlex: {

‎yarn.lock‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3781,6 +3781,22 @@ __metadata:
37813781
languageName: node
37823782
linkType: hard
37833783

3784+
"@react-navigation/bottom-tabs@npm:^7.3.10":
3785+
version: 7.3.10
3786+
resolution: "@react-navigation/bottom-tabs@npm:7.3.10"
3787+
dependencies:
3788+
"@react-navigation/elements": "npm:^2.3.8"
3789+
color: "npm:^4.2.3"
3790+
peerDependencies:
3791+
"@react-navigation/native": ^7.1.6
3792+
react: ">= 18.2.0"
3793+
react-native: "*"
3794+
react-native-safe-area-context: ">= 4.0.0"
3795+
react-native-screens: ">= 4.0.0"
3796+
checksum: 10c0/17adb7ebc38fd6d99866cf365f93099e5e83efdc0203051f3bbd7f731791f04c4323901d81ea2af9bb82a7ad22ff547d8a31f395a19de6160b7a3596990b1191
3797+
languageName: node
3798+
linkType: hard
3799+
37843800
"@react-navigation/core@npm:^7.3.1":
37853801
version: 7.8.5
37863802
resolution: "@react-navigation/core@npm:7.8.5"
@@ -3798,7 +3814,7 @@ __metadata:
37983814
languageName: node
37993815
linkType: hard
38003816

3801-
"@react-navigation/elements@npm:^2.2.5":
3817+
"@react-navigation/elements@npm:^2.2.5, @react-navigation/elements@npm:^2.3.8":
38023818
version: 2.3.8
38033819
resolution: "@react-navigation/elements@npm:2.3.8"
38043820
dependencies:
@@ -7987,6 +8003,7 @@ __metadata:
79878003
"@react-native-community/cli-platform-ios": "npm:18.0.0"
79888004
"@react-native/babel-preset": "npm:0.79.0"
79898005
"@react-native/metro-config": "npm:0.79.0"
8006+
"@react-navigation/bottom-tabs": "npm:^7.3.10"
79908007
"@react-navigation/native": "npm:7.0.14"
79918008
"@react-navigation/native-stack": "npm:7.2.0"
79928009
"@shopify/flash-list": "patch:@shopify/flash-list@npm%3A1.8.0#~/.yarn/patches/@shopify-flash-list-npm-1.8.0-54e02d8f74.patch"

0 commit comments

Comments
 (0)