feat(v3.0.0): changed the example according to the dribble UI

Mindinventory · Dec 9, 2024 · 0dfdf67 · 0dfdf67
1 parent 9601a17
commit 0dfdf67
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 26 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,9 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { StyleSheet, View, Text, Dimensions, FlatList } from 'react-native';
-import { TabBar, type TabsType } from '@mindinventory/react-native-tab-bar-interaction';
+import {
+  TabBar,
+  type TabsType,
+} from '@mindinventory/react-native-tab-bar-interaction';
 import LottieView from 'lottie-react-native';
 
 const { width: screenWidth } = Dimensions.get('window');
@@ -55,22 +58,22 @@ interface TabsDataType extends TabsType {
 const tabData: Array<TabsDataType> = [
   {
     name: 'Home',
-    activeTintColor: '#FFC0C7',
+    activeTintColor: '#61b769',
     activeIcon: activeHome(true),
     inactiveIcon: activeHome(false),
   },
   {
     name: 'Cart',
-    activeTintColor: '#FF7128',
+    activeTintColor: '#bcc9d7',
     activeIcon: activeList(true),
     inactiveIcon: activeList(false),
   },
   {
     name: 'Search',
-    activeTintColor: '#0088cc',
+    activeTintColor: '#546b7f',
     activeIcon: activeSearch(true),
     inactiveIcon: activeSearch(false),
-  }, 
+  },
 ];
 
 export default function App() {
@@ -100,7 +103,7 @@ export default function App() {
                 },
               ]}
             >
-              <Text>{item.name}</Text>
+              <Text style={styles.titleText}>{item.name}</Text>
             </View>
           );
         }}
@@ -113,25 +116,16 @@ export default function App() {
       <TabBar
         tabs={tabs as Array<TabsType>}
         onTabChange={onTabChange}
-        containerWidth={screenWidth - 30}        
-        containerBottomSpace={30}        
+        containerWidth={screenWidth - 30}
+        containerBottomSpace={30}
       />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  box: {
-    width: 60,
-    height: 60,
-    marginVertical: 20,
-  },
-  slide: {
-    width: screenWidth,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+  container: { flex: 1 },
+  box: { width: 60, height: 60, marginVertical: 20 },
+  slide: { width: screenWidth, justifyContent: 'center', alignItems: 'center' },
+  titleText: { color: 'white' },
 });
diff --git a/src/TabBar/TabBar.tsx b/src/TabBar/TabBar.tsx
@@ -20,7 +20,7 @@ import { TabItem } from './TabItem';
 import AnimatedCircle from './AnimatedCircle';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
-const TRANSITION_SPEED = 500;
+const TRANSITION_SPEED = 300;
 type GenerateSvgPath = (
   position: number,
   adjustedHeight: number,
@@ -101,10 +101,10 @@ export const TabBar = (props: TabBarProps) => {
     tabBarContainerBackground,
     circleFillColor,
     containerBottomSpace,
-    containerTopRightRadius = 0,
-    containerTopLeftRadius = 0,
-    containerBottomLeftRadius = 0,
-    containerBottomRightRadius = 0,
+    containerTopRightRadius = 10,
+    containerTopLeftRadius = 10,
+    containerBottomLeftRadius = 25,
+    containerBottomRightRadius = 25,
     defaultActiveTabIndex,
     transitionSpeed,
   } = props;