chore: added icon with badge example

gorhom · Aug 12, 2020 · 66f9cce · 66f9cce
1 parent f9e3834
commit 66f9cce
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 85 deletions.
diff --git a/example/src/components/badge/Badge.tsx b/example/src/components/badge/Badge.tsx
@@ -0,0 +1,58 @@
+import React, { memo, useMemo, useState, useEffect } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+
+interface BadgeProps {
+  iconSize: number;
+}
+
+const BADGE_SIZE = 10;
+
+const BadgeComponent = ({ iconSize }: BadgeProps) => {
+  const [count, setCount] = useState(1);
+  const containerStyle = useMemo(
+    () => ({
+      ...styles.container,
+      transform: [
+        { translateX: (iconSize - BADGE_SIZE / 1.5) / 2 },
+        { translateY: (iconSize - BADGE_SIZE / 1.5) / -2 },
+      ],
+    }),
+    [iconSize]
+  );
+
+  useEffect(() => {
+    const intervalId = setInterval(() => setCount(state => state + 1), 2500);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, []);
+
+  return (
+    <View style={containerStyle}>
+      <Text style={styles.count}>{count}</Text>
+    </View>
+  );
+};
+
+const Badge = memo(BadgeComponent);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    alignSelf: 'center',
+    minWidth: BADGE_SIZE,
+    minHeight: BADGE_SIZE,
+    borderRadius: BADGE_SIZE,
+    backgroundColor: 'red',
+  },
+  count: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    margin: 1,
+    lineHeight: BADGE_SIZE,
+    fontSize: 6,
+  },
+});
+
+export default Badge;
diff --git a/example/src/components/badge/index.ts b/example/src/components/badge/index.ts
@@ -0,0 +1 @@
+export { default } from './Badge';
diff --git a/example/src/components/iconWithBadge/IconWithBadge.tsx b/example/src/components/iconWithBadge/IconWithBadge.tsx
@@ -0,0 +1,17 @@
+import React, { memo } from 'react';
+import HomeSVG from '../../svg/HomeSVG';
+import Badge from '../badge';
+import { SVGProps } from '../../svg/types';
+
+const IconWithBadgeComponent = (props: SVGProps) => {
+  return (
+    <>
+      <HomeSVG {...props} />
+      <Badge iconSize={props.size} />
+    </>
+  );
+};
+
+const IconWithBadge = memo(IconWithBadgeComponent);
+
+export default IconWithBadge;
diff --git a/example/src/components/iconWithBadge/index.ts b/example/src/components/iconWithBadge/index.ts
@@ -0,0 +1 @@
+export { default } from './IconWithBadge';
diff --git a/example/src/screens/BubbleStyled.tsx b/example/src/screens/BubbleStyled.tsx
@@ -1,13 +1,12 @@
 import React, { useMemo } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
   TabsConfig,
   BubbleTabBarItemConfig,
 } from '@gorhom/animated-tabbar';
 import DummyScreen from './Dummy';
-import HomeSVG from '../svg/HomeSVG';
+import HomeIcon from '../components/iconWithBadge';
 import LikeSVG from '../svg/LikeSVG';
 import SearchSVG from '../svg/SearchSVG';
 import ProfileSVG from '../svg/ProfileSVG';
@@ -21,7 +20,7 @@ const tabs: TabsConfig<BubbleTabBarItemConfig, MainTabsParams> = {
       color: 'white',
     },
     icon: {
-      component: HomeSVG,
+      component: HomeIcon,
       activeColor: 'rgba(255,255,255,1)',
       inactiveColor: 'rgba(68,68,68,1)',
     },
@@ -84,38 +83,33 @@ const BubbleStyledScreen = () => {
     return 20 + bottom + 12 * 2 + 12 * 2 + 12;
   }, [bottom]);
 
-  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
-    () => ({
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderRadius: 16,
-      marginLeft: 32,
-      marginRight: 32,
-      marginBottom: bottom,
-      backgroundColor: '#000',
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 12,
-      },
-      shadowOpacity: 0.58,
-      shadowRadius: 16.0,
-
-      elevation: 24,
-    }),
-    [bottom]
-  );
-
   const tabBarOptions = useMemo(
     () => ({
       safeAreaInsets: {
         bottom: 0,
       },
-      style: tabBarStyle,
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 16,
+        marginLeft: 32,
+        marginRight: 32,
+        marginBottom: bottom,
+        backgroundColor: '#000',
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 12,
+        },
+        shadowOpacity: 0.58,
+        shadowRadius: 16.0,
+
+        elevation: 24,
+      },
     }),
-    [tabBarStyle]
+    [bottom]
   );
 
   // render

diff --git a/example/src/screens/FlashyStyled.tsx b/example/src/screens/FlashyStyled.tsx
@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
@@ -80,38 +79,33 @@ const FlashyStyledScreen = () => {
     return 20 + bottom + 12 * 2 + 12 * 2 + 12;
   }, [bottom]);
 
-  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
-    () => ({
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderRadius: 16,
-      marginLeft: 32,
-      marginRight: 32,
-      marginBottom: bottom,
-      backgroundColor: '#000',
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 12,
-      },
-      shadowOpacity: 0.58,
-      shadowRadius: 16.0,
-
-      elevation: 24,
-    }),
-    [bottom]
-  );
-
   const tabBarOptions = useMemo(
     () => ({
       safeAreaInsets: {
         bottom: 0,
       },
-      style: tabBarStyle,
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 16,
+        marginLeft: 32,
+        marginRight: 32,
+        marginBottom: bottom,
+        backgroundColor: '#000',
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 12,
+        },
+        shadowOpacity: 0.58,
+        shadowRadius: 16.0,
+
+        elevation: 24,
+      },
     }),
-    [tabBarStyle]
+    [bottom]
   );
 
   // render

diff --git a/example/src/screens/MaterialStyled.tsx b/example/src/screens/MaterialStyled.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
-import { StatusBar, StyleProp, ViewStyle } from 'react-native';
+import { StatusBar } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import AnimatedTabBar, {
   TabsConfig,
   MaterialTabBarItemConfig,
 } from '@gorhom/animated-tabbar';
 import DummyScreen from './Dummy';
-import HomeSVG from '../svg/HomeSVG';
+import HomeIcon from '../components/iconWithBadge';
 import LikeSVG from '../svg/LikeSVG';
 import SearchSVG from '../svg/SearchSVG';
 import ProfileSVG from '../svg/ProfileSVG';
@@ -18,7 +18,7 @@ const Tab = createBottomTabNavigator<MainTabsParams>();
 const tabs: TabsConfig<MaterialTabBarItemConfig, MainTabsParams> = {
   Home: {
     icon: {
-      component: HomeSVG,
+      component: HomeIcon,
       color: 'rgba(255,255,255,1)',
     },
     ripple: {
@@ -64,38 +64,33 @@ const MaterialStyledScreen = () => {
     return 20 + bottom + 12 * 2 + 12 * 2 + 12;
   }, [bottom]);
 
-  const tabBarStyle = useMemo<StyleProp<ViewStyle>>(
-    () => ({
-      position: 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      borderRadius: 16,
-      marginLeft: 32,
-      marginRight: 32,
-      marginBottom: bottom,
-      backgroundColor: '#000',
-      shadowColor: '#000',
-      shadowOffset: {
-        width: 0,
-        height: 12,
-      },
-      shadowOpacity: 0.58,
-      shadowRadius: 16.0,
-
-      elevation: 24,
-    }),
-    [bottom]
-  );
-
   const tabBarOptions = useMemo(
     () => ({
       safeAreaInsets: {
         bottom: 0,
       },
-      style: tabBarStyle,
+      style: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 16,
+        marginLeft: 32,
+        marginRight: 32,
+        marginBottom: bottom,
+        backgroundColor: '#000',
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 12,
+        },
+        shadowOpacity: 0.58,
+        shadowRadius: 16.0,
+
+        elevation: 24,
+      },
     }),
-    [tabBarStyle]
+    [bottom]
   );
   return (
     <>