Skip to content

Commit d2a75ca

Browse files
gorhomgorhom
authored
refactor: clean up code base (#78)
* chore: updated showcase template to v1 * chore: renamed withTransition to useTabBarItemFocusTransition * refactor: extract spacing logic into a hook useTabBarItemSpacing * refactor: updated example screens
1 parent 8babe11 commit d2a75ca

27 files changed

+312
-281
lines changed

‎example/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { AppRegistry } from 'react-native';
21
import 'react-native-gesture-handler';
2+
import { AppRegistry } from 'react-native';
33
import App from './src/App';
44
import { name as appName } from './app.json';
55

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"start": "react-native start"
1010
},
1111
"dependencies": {
12-
"@gorhom/showcase-template": "^0.3.1",
12+
"@gorhom/showcase-template": "^1.0.0",
1313
"@react-native-community/masked-view": "^0.1.10",
1414
"@react-navigation/bottom-tabs": "^5.7.1",
1515
"@react-navigation/native": "^5.7.0",

‎example/src/App.tsx‎

Lines changed: 59 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,6 @@ import React from 'react';
22
import { NavigationContainer } from '@react-navigation/native';
33
import { createStackNavigator } from '@react-navigation/stack';
44
import RootScreen from './screens/Root';
5-
import BubbleScreen from './screens/Bubble';
6-
import BubbleStyledScreen from './screens/BubbleStyled';
7-
import BubbleRTLScreen from './screens/BubbleRTL';
8-
import BubbleStandaloneScreen from './screens/BubbleStandalone';
9-
import FlashyScreen from './screens/Flashy';
10-
import FlashyStyledScreen from './screens/FlashyStyled';
11-
import FlashyRTLScreen from './screens/FlashyRTL';
12-
import FlashyStandaloneScreen from './screens/FlashyStandalone';
13-
import {
14-
MaterialIconWithLabelScreen,
15-
MaterialIconWithLabelOnFocusScreen,
16-
MaterialIconOnlyScreen,
17-
} from './screens/Material';
18-
import MaterialStyledScreen from './screens/MaterialStyled';
19-
import MaterialRTLScreen from './screens/MaterialRTL';
20-
import MaterialStandaloneScreen from './screens/MaterialStandalone';
215

226
const Stack = createStackNavigator();
237

@@ -26,37 +10,82 @@ export default function App() {
2610
<NavigationContainer>
2711
<Stack.Navigator initialRouteName="Root" headerMode="none">
2812
<Stack.Screen name="Root" component={RootScreen} />
29-
<Stack.Screen name="Bubble" component={BubbleScreen} />
30-
<Stack.Screen name="BubbleStyled" component={BubbleStyledScreen} />
31-
<Stack.Screen name="BubbleRTL" component={BubbleRTLScreen} />
13+
14+
{/* Bubble Preset */}
15+
<Stack.Screen
16+
name="Bubble"
17+
getComponent={() => require('./screens/bubble/Bubble').default}
18+
/>
19+
<Stack.Screen
20+
name="BubbleStyled"
21+
getComponent={() => require('./screens/bubble/BubbleStyled').default}
22+
/>
23+
<Stack.Screen
24+
name="BubbleRTL"
25+
getComponent={() => require('./screens/bubble/BubbleRTL').default}
26+
/>
3227
<Stack.Screen
3328
name="BubbleStandalone"
34-
component={BubbleStandaloneScreen}
29+
getComponent={() =>
30+
require('./screens/bubble/BubbleStandalone').default
31+
}
32+
/>
33+
34+
{/* Flashy Preset */}
35+
<Stack.Screen
36+
name="Flashy"
37+
getComponent={() => require('./screens/flashy/Flashy').default}
38+
/>
39+
<Stack.Screen
40+
name="FlashyStyled"
41+
getComponent={() => require('./screens/flashy/FlashyStyled').default}
42+
/>
43+
<Stack.Screen
44+
name="FlashyRTL"
45+
getComponent={() => require('./screens/flashy/FlashyRTL').default}
3546
/>
36-
<Stack.Screen name="Flashy" component={FlashyScreen} />
37-
<Stack.Screen name="FlashyStyled" component={FlashyStyledScreen} />
38-
<Stack.Screen name="FlashyRTL" component={FlashyRTLScreen} />
3947
<Stack.Screen
4048
name="FlashyStandalone"
41-
component={FlashyStandaloneScreen}
49+
getComponent={() =>
50+
require('./screens/flashy/FlashyStandalone').default
51+
}
4252
/>
53+
54+
{/* Material Preset */}
4355
<Stack.Screen
4456
name="MaterialIconWithLabel"
45-
component={MaterialIconWithLabelScreen}
57+
getComponent={() =>
58+
require('./screens/material/Material').MaterialIconWithLabelScreen
59+
}
4660
/>
4761
<Stack.Screen
4862
name="MaterialIconOnly"
49-
component={MaterialIconOnlyScreen}
63+
getComponent={() =>
64+
require('./screens/material/Material').MaterialIconOnlyScreen
65+
}
5066
/>
5167
<Stack.Screen
5268
name="MaterialIconWithLabelOnFocus"
53-
component={MaterialIconWithLabelOnFocusScreen}
69+
getComponent={() =>
70+
require('./screens/material/Material')
71+
.MaterialIconWithLabelOnFocusScreen
72+
}
73+
/>
74+
<Stack.Screen
75+
name="MaterialStyled"
76+
getComponent={() =>
77+
require('./screens/material/MaterialStyled').default
78+
}
79+
/>
80+
<Stack.Screen
81+
name="MaterialRTL"
82+
getComponent={() => require('./screens/material/MaterialRTL').default}
5483
/>
55-
<Stack.Screen name="MaterialStyled" component={MaterialStyledScreen} />
56-
<Stack.Screen name="MaterialRTL" component={MaterialRTLScreen} />
5784
<Stack.Screen
5885
name="MaterialStandalone"
59-
component={MaterialStandaloneScreen}
86+
getComponent={() =>
87+
require('./screens/material/MaterialStandalone').default
88+
}
6089
/>
6190
</Stack.Navigator>
6291
</NavigationContainer>

‎example/src/screens/Dummy.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,9 @@ const DummyScreen = () => {
102102
renderItem={renderItem}
103103
style={rootStyle}
104104
contentContainerStyle={contentContainerStyle}
105+
windowSize={10}
106+
maxToRenderPerBatch={10}
107+
initialNumToRender={10}
105108
/>
106109
);
107110
};

‎example/src/screens/Root.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import React from 'react';
1+
import React, { useMemo } from 'react';
22
import { useNavigation } from '@react-navigation/native';
33
import Showcase from '@gorhom/showcase-template';
44
import { version, description } from '../../../package.json';
5+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
56

67
const examples = [
78
{
@@ -80,6 +81,17 @@ const examples = [
8081
const RootScreen = () => {
8182
// hooks
8283
const { navigate } = useNavigation();
84+
const safeInsets = useSafeAreaInsets();
85+
86+
// variables
87+
const data = useMemo(() => examples.reverse(), []);
88+
const author = useMemo(
89+
() => ({
90+
username: '@gorhom',
91+
url: 'https://gorhom.dev',
92+
}),
93+
[]
94+
);
8395

8496
// callbacks
8597
const handleOnExamplePress = (slug: string) => {
@@ -93,12 +105,10 @@ const RootScreen = () => {
93105
name="Animated TabBar"
94106
description={description}
95107
version={version}
96-
author={{
97-
username: '@gorhom',
98-
url: 'https://gorhom.dev',
99-
}}
100-
data={examples}
108+
author={author}
109+
data={data}
101110
handleOnPress={handleOnExamplePress}
111+
safeInsets={safeInsets}
102112
/>
103113
);
104114
};

‎example/src/screens/Bubble.tsx‎ renamed to ‎example/src/screens/bubble/Bubble.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import AnimatedTabBar, {
44
TabsConfig,
55
BubbleTabBarItemConfig,
66
} from '@gorhom/animated-tabbar';
7-
import DummyScreen from './Dummy';
8-
import HomeSVG from '../svg/HomeSVG';
9-
import LikeSVG from '../svg/LikeSVG';
10-
import SearchSVG from '../svg/SearchSVG';
11-
import ProfileSVG from '../svg/ProfileSVG';
12-
import { MainTabsParams } from './types';
7+
import DummyScreen from '../Dummy';
8+
import HomeSVG from '../../svg/HomeSVG';
9+
import LikeSVG from '../../svg/LikeSVG';
10+
import SearchSVG from '../../svg/SearchSVG';
11+
import ProfileSVG from '../../svg/ProfileSVG';
12+
import { MainTabsParams } from '../types';
1313

1414
const Tab = createBottomTabNavigator<MainTabsParams>();
1515

‎example/src/screens/BubbleRTL.tsx‎ renamed to ‎example/src/screens/bubble/BubbleRTL.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import AnimatedTabBar, {
44
TabsConfig,
55
BubbleTabBarItemConfig,
66
} from '@gorhom/animated-tabbar';
7-
import DummyScreen from './Dummy';
8-
import HomeSVG from '../svg/HomeSVG';
9-
import LikeSVG from '../svg/LikeSVG';
10-
import SearchSVG from '../svg/SearchSVG';
11-
import ProfileSVG from '../svg/ProfileSVG';
12-
import { MainTabsParams } from './types';
7+
import DummyScreen from '../Dummy';
8+
import HomeSVG from '../../svg/HomeSVG';
9+
import LikeSVG from '../../svg/LikeSVG';
10+
import SearchSVG from '../../svg/SearchSVG';
11+
import ProfileSVG from '../../svg/ProfileSVG';
12+
import { MainTabsParams } from '../types';
1313

1414
const Tab = createBottomTabNavigator<MainTabsParams>();
1515

‎example/src/screens/BubbleStandalone.tsx‎ renamed to ‎example/src/screens/bubble/BubbleStandalone.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import {
55
TabsConfig,
66
BubbleTabBarItemConfig,
77
} from '@gorhom/animated-tabbar';
8-
import HomeSVG from '../svg/HomeSVG';
9-
import LikeSVG from '../svg/LikeSVG';
10-
import SearchSVG from '../svg/SearchSVG';
11-
import ProfileSVG from '../svg/ProfileSVG';
12-
import { MainTabsParams } from './types';
8+
import HomeSVG from '../../svg/HomeSVG';
9+
import LikeSVG from '../../svg/LikeSVG';
10+
import SearchSVG from '../../svg/SearchSVG';
11+
import ProfileSVG from '../../svg/ProfileSVG';
12+
import { MainTabsParams } from '../types';
1313

1414
const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
1515
Home: {

‎example/src/screens/BubbleStyled.tsx‎ renamed to ‎example/src/screens/bubble/BubbleStyled.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import AnimatedTabBar, {
55
TabsConfig,
66
BubbleTabBarItemConfig,
77
} from '@gorhom/animated-tabbar';
8-
import DummyScreen from './Dummy';
9-
import HomeIcon from '../components/iconWithBadge';
10-
import LikeSVG from '../svg/LikeSVG';
11-
import SearchSVG from '../svg/SearchSVG';
12-
import ProfileSVG from '../svg/ProfileSVG';
13-
import { MainTabsParams } from './types';
8+
import DummyScreen from '../Dummy';
9+
import HomeIcon from '../../components/iconWithBadge';
10+
import LikeSVG from '../../svg/LikeSVG';
11+
import SearchSVG from '../../svg/SearchSVG';
12+
import ProfileSVG from '../../svg/ProfileSVG';
13+
import { MainTabsParams } from '../types';
1414

1515
const Tab = createBottomTabNavigator<MainTabsParams>();
1616

‎example/src/screens/Flashy.tsx‎ renamed to ‎example/src/screens/flashy/Flashy.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import AnimatedTabBar, {
44
TabsConfig,
55
FlashyTabBarItemConfig,
66
} from '@gorhom/animated-tabbar';
7-
import DummyScreen from './Dummy';
8-
import HomeSVG from '../svg/HomeSVG';
9-
import LikeSVG from '../svg/LikeSVG';
10-
import SearchSVG from '../svg/SearchSVG';
11-
import ProfileSVG from '../svg/ProfileSVG';
12-
import { MainTabsParams } from './types';
7+
import DummyScreen from '../Dummy';
8+
import HomeSVG from '../../svg/HomeSVG';
9+
import LikeSVG from '../../svg/LikeSVG';
10+
import SearchSVG from '../../svg/SearchSVG';
11+
import ProfileSVG from '../../svg/ProfileSVG';
12+
import { MainTabsParams } from '../types';
1313

1414
const Tab = createBottomTabNavigator<MainTabsParams>();
1515

0 commit comments

Comments
 (0)