Skip to content

Commit 66f9cce

Browse files
gorhomgorhom
committed
chore: added icon with badge example
1 parent f9e3834 commit 66f9cce

File tree

7 files changed

+145
-85
lines changed

7 files changed

+145
-85
lines changed

‎example/src/components/badge/Badge.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { memo, useMemo, useState, useEffect } from 'react';
2+
import { View, StyleSheet, Text } from 'react-native';
3+
4+
interface BadgeProps {
5+
iconSize: number;
6+
}
7+
8+
const BADGE_SIZE = 10;
9+
10+
const BadgeComponent = ({ iconSize }: BadgeProps) => {
11+
const [count, setCount] = useState(1);
12+
const containerStyle = useMemo(
13+
() => ({
14+
...styles.container,
15+
transform: [
16+
{ translateX: (iconSize - BADGE_SIZE / 1.5) / 2 },
17+
{ translateY: (iconSize - BADGE_SIZE / 1.5) / -2 },
18+
],
19+
}),
20+
[iconSize]
21+
);
22+
23+
useEffect(() => {
24+
const intervalId = setInterval(() => setCount(state => state + 1), 2500);
25+
return () => {
26+
clearInterval(intervalId);
27+
};
28+
}, []);
29+
30+
return (
31+
<View style={containerStyle}>
32+
<Text style={styles.count}>{count}</Text>
33+
</View>
34+
);
35+
};
36+
37+
const Badge = memo(BadgeComponent);
38+
39+
const styles = StyleSheet.create({
40+
container: {
41+
position: 'absolute',
42+
alignSelf: 'center',
43+
minWidth: BADGE_SIZE,
44+
minHeight: BADGE_SIZE,
45+
borderRadius: BADGE_SIZE,
46+
backgroundColor: 'red',
47+
},
48+
count: {
49+
color: 'white',
50+
fontWeight: 'bold',
51+
textAlign: 'center',
52+
margin: 1,
53+
lineHeight: BADGE_SIZE,
54+
fontSize: 6,
55+
},
56+
});
57+
58+
export default Badge;

‎example/src/components/badge/index.ts‎

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

‎example/src/components/iconWithBadge/IconWithBadge.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React, { memo } from 'react';
2+
import HomeSVG from '../../svg/HomeSVG';
3+
import Badge from '../badge';
4+
import { SVGProps } from '../../svg/types';
5+
6+
const IconWithBadgeComponent = (props: SVGProps) => {
7+
return (
8+
<>
9+
<HomeSVG {...props} />
10+
<Badge iconSize={props.size} />
11+
</>
12+
);
13+
};
14+
15+
const IconWithBadge = memo(IconWithBadgeComponent);
16+
17+
export default IconWithBadge;

‎example/src/components/iconWithBadge/index.ts‎

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

‎example/src/screens/BubbleStyled.tsx‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import React, { useMemo } from 'react';
2-
import { StyleProp, ViewStyle } from 'react-native';
32
import { useSafeArea } from 'react-native-safe-area-context';
43
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
54
import AnimatedTabBar, {
65
TabsConfig,
76
BubbleTabBarItemConfig,
87
} from '@gorhom/animated-tabbar';
98
import DummyScreen from './Dummy';
10-
import HomeSVG from '../svg/HomeSVG';
9+
import HomeIcon from '../components/iconWithBadge';
1110
import LikeSVG from '../svg/LikeSVG';
1211
import SearchSVG from '../svg/SearchSVG';
1312
import ProfileSVG from '../svg/ProfileSVG';
@@ -21,7 +20,7 @@ const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
2120
color: 'white',
2221
},
2322
icon: {
24-
component: HomeSVG,
23+
component: HomeIcon,
2524
activeColor: 'rgba(255,255,255,1)',
2625
inactiveColor: 'rgba(68,68,68,1)',
2726
},
@@ -84,38 +83,33 @@ const BubbleStyledScreen = () => {
8483
return 20 + bottom + 12 * 2 + 12 * 2 + 12;
8584
}, [bottom]);
8685

87-
const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
88-
() => ({
89-
position: 'absolute',
90-
left: 0,
91-
right: 0,
92-
bottom: 0,
93-
borderRadius: 16,
94-
marginLeft: 32,
95-
marginRight: 32,
96-
marginBottom: bottom,
97-
backgroundColor: '#000',
98-
shadowColor: '#000',
99-
shadowOffset: {
100-
width: 0,
101-
height: 12,
102-
},
103-
shadowOpacity: 0.58,
104-
shadowRadius: 16.0,
105-
106-
elevation: 24,
107-
}),
108-
[bottom]
109-
);
110-
11186
const tabBarOptions = useMemo(
11287
() => ({
11388
safeAreaInsets: {
11489
bottom: 0,
11590
},
116-
style: tabBarStyle,
91+
style: {
92+
position: 'absolute',
93+
left: 0,
94+
right: 0,
95+
bottom: 0,
96+
borderRadius: 16,
97+
marginLeft: 32,
98+
marginRight: 32,
99+
marginBottom: bottom,
100+
backgroundColor: '#000',
101+
shadowColor: '#000',
102+
shadowOffset: {
103+
width: 0,
104+
height: 12,
105+
},
106+
shadowOpacity: 0.58,
107+
shadowRadius: 16.0,
108+
109+
elevation: 24,
110+
},
117111
}),
118-
[tabBarStyle]
112+
[bottom]
119113
);
120114

121115
// render

‎example/src/screens/FlashyStyled.tsx‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useMemo } from 'react';
2-
import { StyleProp, ViewStyle } from 'react-native';
32
import { useSafeArea } from 'react-native-safe-area-context';
43
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
54
import AnimatedTabBar, {
@@ -80,38 +79,33 @@ const FlashyStyledScreen = () => {
8079
return 20 + bottom + 12 * 2 + 12 * 2 + 12;
8180
}, [bottom]);
8281

83-
const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
84-
() => ({
85-
position: 'absolute',
86-
left: 0,
87-
right: 0,
88-
bottom: 0,
89-
borderRadius: 16,
90-
marginLeft: 32,
91-
marginRight: 32,
92-
marginBottom: bottom,
93-
backgroundColor: '#000',
94-
shadowColor: '#000',
95-
shadowOffset: {
96-
width: 0,
97-
height: 12,
98-
},
99-
shadowOpacity: 0.58,
100-
shadowRadius: 16.0,
101-
102-
elevation: 24,
103-
}),
104-
[bottom]
105-
);
106-
10782
const tabBarOptions = useMemo(
10883
() => ({
10984
safeAreaInsets: {
11085
bottom: 0,
11186
},
112-
style: tabBarStyle,
87+
style: {
88+
position: 'absolute',
89+
left: 0,
90+
right: 0,
91+
bottom: 0,
92+
borderRadius: 16,
93+
marginLeft: 32,
94+
marginRight: 32,
95+
marginBottom: bottom,
96+
backgroundColor: '#000',
97+
shadowColor: '#000',
98+
shadowOffset: {
99+
width: 0,
100+
height: 12,
101+
},
102+
shadowOpacity: 0.58,
103+
shadowRadius: 16.0,
104+
105+
elevation: 24,
106+
},
113107
}),
114-
[tabBarStyle]
108+
[bottom]
115109
);
116110

117111
// render

‎example/src/screens/MaterialStyled.tsx‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useMemo } from 'react';
2-
import { StatusBar, StyleProp, ViewStyle } from 'react-native';
2+
import { StatusBar } from 'react-native';
33
import { useSafeArea } from 'react-native-safe-area-context';
44
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
55
import AnimatedTabBar, {
66
TabsConfig,
77
MaterialTabBarItemConfig,
88
} from '@gorhom/animated-tabbar';
99
import DummyScreen from './Dummy';
10-
import HomeSVG from '../svg/HomeSVG';
10+
import HomeIcon from '../components/iconWithBadge';
1111
import LikeSVG from '../svg/LikeSVG';
1212
import SearchSVG from '../svg/SearchSVG';
1313
import ProfileSVG from '../svg/ProfileSVG';
@@ -18,7 +18,7 @@ const Tab = createBottomTabNavigator<MainTabsParams>();
1818
const tabs: TabsConfig<MaterialTabBarItemConfig, MainTabsParams> = {
1919
Home: {
2020
icon: {
21-
component: HomeSVG,
21+
component: HomeIcon,
2222
color: 'rgba(255,255,255,1)',
2323
},
2424
ripple: {
@@ -64,38 +64,33 @@ const MaterialStyledScreen = () => {
6464
return 20 + bottom + 12 * 2 + 12 * 2 + 12;
6565
}, [bottom]);
6666

67-
const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
68-
() => ({
69-
position: 'absolute',
70-
left: 0,
71-
right: 0,
72-
bottom: 0,
73-
borderRadius: 16,
74-
marginLeft: 32,
75-
marginRight: 32,
76-
marginBottom: bottom,
77-
backgroundColor: '#000',
78-
shadowColor: '#000',
79-
shadowOffset: {
80-
width: 0,
81-
height: 12,
82-
},
83-
shadowOpacity: 0.58,
84-
shadowRadius: 16.0,
85-
86-
elevation: 24,
87-
}),
88-
[bottom]
89-
);
90-
9167
const tabBarOptions = useMemo(
9268
() => ({
9369
safeAreaInsets: {
9470
bottom: 0,
9571
},
96-
style: tabBarStyle,
72+
style: {
73+
position: 'absolute',
74+
left: 0,
75+
right: 0,
76+
bottom: 0,
77+
borderRadius: 16,
78+
marginLeft: 32,
79+
marginRight: 32,
80+
marginBottom: bottom,
81+
backgroundColor: '#000',
82+
shadowColor: '#000',
83+
shadowOffset: {
84+
width: 0,
85+
height: 12,
86+
},
87+
shadowOpacity: 0.58,
88+
shadowRadius: 16.0,
89+
90+
elevation: 24,
91+
},
9792
}),
98-
[tabBarStyle]
93+
[bottom]
9994
);
10095
return (
10196
<>

0 commit comments

Comments
 (0)