feat(tabbar): update readme and package json file

Mindinventory · Nov 8, 2024 · 9601a17 · 9601a17
1 parent 30732cf
commit 9601a17
Show file tree

Hide file tree

Showing 9 changed files with 10,687 additions and 7,786 deletions.
diff --git a/.gitignore b/.gitignore
@@ -80,3 +80,6 @@ lib/
 # React Native Codegen
 ios/generated
 android/generated
+.yarn/
+yarn.lock
+example/yarn.lock
diff --git a/README.md b/README.md
@@ -24,39 +24,7 @@ yarn add @mindinventory/react-native-tab-bar-interaction
 ```
 ## Dependencies
 
-- `react-native-svg`
-- `react-native-svg-transformer`
-
-## Configure dependencies in file metro.config.js update this module export.
-
-```
-const { getDefaultConfig } = require("metro-config");
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts }
-  } = await getDefaultConfig();
-  return {
-    transformer: {
-      babelTransformerPath: require.resolve("react-native-svg-transformer")
-    },
-    resolver: {
-      assetExts: assetExts.filter(ext => ext !== "svg"),
-      sourceExts: [...sourceExts, "svg"]
-    }
-  };
-})();
-
-```
-## create one declarations.d.ts in your root directory.
-```
-declare module "*.svg" {
-  import React from 'react';
-  import { SvgProps } from "react-native-svg";
-  const content: React.FC<SvgProps>;
-  export default content;
-}
-```
+- `react-native-reanimated`
 
 ### Supported platform
 
@@ -102,12 +70,9 @@ const tabs = [
 
 return (
   <Tabbar
-    tabs={tabs}
-    tabBarContainerBackground='#6699ff'
-    tabBarBackground='#fff'
-    activeTabBackground='#6699ff'
-    labelStyle={{ color: '#4d4d4d', fontWeight: '600', fontSize: 11 }}
-    onTabChange={() => console.log('Tab changed')}
+    tabs={tabs}       
+    containerWidth={350}    
+    onTabChange={(tab: TabsType, index: number) => console.log('Tab changed')}
   />
 );
 
@@ -120,19 +85,17 @@ return (
 | prop                       | value    | required/optional | description                                                          |
 | -------------------------- | -------- | ----------------- | -------------------------------------------------------------------- |
 | tabs                       | array    | required          | It is user for showing icon and label.                               |
-| tabBarContainerBackground  | string   | optional          | Use for change tabBar container color.                               |
-| tabBarBackground           | string   | required          | Use for change tabBar background color.                              |
-| activeTabBackground        | string   | optional          | Use for change active tab background color.                          |
-| labelStyle                 | style    | optional          | Use for apply style on tab label.                                    |
-| onTabChange                | function | optional          | Use to perform any action when click on tab.                         |
+| tabBarContainerBackground  | string   | optional          | Use for change tabBar container color.                               |            
+| onTabChange                | function | required          | Use to perform any action when click on tab.                         |
 | containerBottomSpace       | number   | optional          | Use to add space between tabBar container and from bottom of screen. |
-| containerWidth             | number   | optional          | Use for set width of tabBar container                                |
+| containerWidth             | number   | required          | Use for set width of tabBar container                                |
 | containerTopRightRadius    | number   | optional          | Use for add top right radius on tabBar container                     |
 | containerTopLeftRadius     | number   | optional          | Use for add top left radius on tabBar container                      |
 | containerBottomLeftRadius  | number   | optional          | Use for add bottom left radius on tabBar container                   |
 | containerBottomRightRadius | number   | optional          | Use for add bottom right radius on tabBar container                  |
 | defaultActiveTabIndex      | number   | optional          | Use to set default active tab                                        |
 | transitionSpeed            | number   | optional          | Use to set transition speed                                          |
+| circleFillColor            | string   | optional          | Use to set background color for circle                               |
 
 ### tabs
 
@@ -143,12 +106,6 @@ return (
 | inactiveIcon | component | required          | Use for showing tab inactiveIcon icon/image. |
 
 
-# Version Migration
-
-### Version: 2.2.2
-
-How to migrate version [**1.0.0** to **2.1.2+**](VERSION_MIGRATION.md).
-
 # LICENSE!
 
 React-native-tabbar-interaction is [MIT-licensed](https://github.com/Mindinventory/react-native-tabbar-interaction/blob/master/LICENSE).

diff --git a/example/package.json b/example/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-native-bottom-tab-bar-example",
+  "name": "react-native-tab-bar-interaction-example",
   "version": "1.0.0",
   "main": "expo/AppEntry.js",
   "scripts": {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import { StyleSheet, View, Text, Dimensions, FlatList } from 'react-native';
-import { TabBar, type TabsType } from 'react-native-bottom-tab-bar';
+import { TabBar, type TabsType } from '@mindinventory/react-native-tab-bar-interaction';
 import LottieView from 'lottie-react-native';
 
 const { width: screenWidth } = Dimensions.get('window');
@@ -49,32 +49,6 @@ const activeSearch = (isPlay: boolean) => {
   );
 };
 
-// const activeSetting = (isPlay: boolean) => {
-//   return (
-//     <View style={{ width: 40, height: 40 }}>
-//       <LottieView
-//         source={require(`../assets/setting.json`)}
-//         autoPlay={isPlay}
-//         loop={false}
-//         style={lottieIconStyle}
-//       />
-//     </View>
-//   );
-// };
-
-// const activeUser = (isPlay: boolean) => {
-//   return (
-//     <View style={{ width: 40, height: 40 }}>
-//       <LottieView
-//         source={require(`../assets/user.json`)}
-//         autoPlay={isPlay}
-//         loop={false}
-//         style={lottieIconStyle}
-//       />
-//     </View>
-//   );
-// };
-
 interface TabsDataType extends TabsType {
   activeTintColor: string;
 }
@@ -96,25 +70,12 @@ const tabData: Array<TabsDataType> = [
     activeTintColor: '#0088cc',
     activeIcon: activeSearch(true),
     inactiveIcon: activeSearch(false),
-  },
-  // {
-  //   name: 'Profile',
-  //   activeTintColor: '#ff6666',
-  //   activeIcon: activeUser(true),
-  //   inactiveIcon: activeUser(false),
-  // },
-  // {
-  //   name: 'Setting',
-  //   activeTintColor: '#66ff99',
-  //   activeIcon: activeSetting(true),
-  //   inactiveIcon: activeSetting(false),
-  // },
+  }, 
 ];
 
 export default function App() {
   const tabs = useMemo(() => tabData, []);
   const flatListRef = useRef<FlatList>(null);
-  // const animation = useRef<LottieView>(null);
 
   const onTabChange = useCallback((_item: TabsType, index: number) => {
     flatListRef.current?.scrollToIndex({
@@ -152,16 +113,8 @@ export default function App() {
       <TabBar
         tabs={tabs as Array<TabsType>}
         onTabChange={onTabChange}
-        containerWidth={screenWidth - 30}
-        // defaultActiveTabIndex={1}
-        // tabBarContainerBackground="red"
-        // transitionSpeed={2000}
-        // circleFillColor="red"
-        containerBottomSpace={30}
-        // containerTopRightRadius={16}
-        // containerTopLeftRadius={16}
-        // containerBottomLeftRadius={16}
-        // containerBottomRightRadius={16}
+        containerWidth={screenWidth - 30}        
+        containerBottomSpace={30}        
       />
     </View>
   );