rn-vs-lb 1.0.30 → 1.0.32

package/dist/components/footer/Footer.js

@@ -1,20 +1,91 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+exports.BottomTab = exports.LbTypes = void 0;
+var react_1 = __importStar(require("react"));
 var react_native_1 = require("react-native");
+var theme_1 = require("../../constants/theme");
+var Octicons_1 = __importDefault(require("react-native-vector-icons/Octicons"));
+var Ionicons_1 = __importDefault(require("react-native-vector-icons/Ionicons"));
+var MaterialIcons_1 = __importDefault(require("react-native-vector-icons/MaterialIcons"));
+var LbTypes;
+(function (LbTypes) {
+    LbTypes["OCTICONS"] = "Octicons";
+    LbTypes["IONICONS"] = "Ionicons";
+    LbTypes["MATERIALICONS"] = "MaterialIcons";
+})(LbTypes || (exports.LbTypes = LbTypes = {}));
+var renderIcon = function (tab) {
+    switch (tab.lb) {
+        case LbTypes.OCTICONS:
+            return react_1.default.createElement(Octicons_1.default, { name: tab.iconName, size: tab.size, color: "#475A77" });
+        case LbTypes.IONICONS:
+            return react_1.default.createElement(Ionicons_1.default, { name: tab.iconName, size: tab.size, color: "#475A77" });
+        case LbTypes.MATERIALICONS:
+            return react_1.default.createElement(MaterialIcons_1.default, { name: tab.iconName, size: tab.size, color: "#475A77" });
+        default:
+            return null;
+    }
+};
 var BottomTab = function (_a) {
-    var tabs = _a.tabs;
-    return (react_1.default.createElement(react_native_1.View, { style: styles.tabContainer }, tabs.map(function (tab, index) { return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: index, onPress: tab.onPress, style: [styles.tabButton, tab.isActive && styles.tabButtonActive] },
-        react_1.default.createElement(react_native_1.Text, null, tab.label))); })));
+    var tabs = _a.tabs, onPress = _a.onPress, activeTabIndex = _a.activeTabIndex;
+    var _b = (0, react_1.useState)(activeTabIndex), activeTab = _b[0], setActiveTab = _b[1];
+    (0, react_1.useEffect)(function () {
+        setActiveTab(activeTabIndex);
+    }, [activeTabIndex]);
+    var tabWidth = theme_1.SIZES.width;
+    var tabW = tabWidth < theme_1.SIZES.container ? tabWidth / tabs.length : theme_1.SIZES.container / tabs.length;
+    var circlePosition = (0, react_1.useRef)(new react_native_1.Animated.Value(tabWidth < theme_1.SIZES.container ? tabWidth / 2.5 : theme_1.SIZES.container / 2.5)).current;
+    (0, react_1.useEffect)(function () {
+        react_native_1.Animated.spring(circlePosition, {
+            toValue: activeTab * tabW,
+            useNativeDriver: true,
+        }).start();
+    }, [activeTab]);
+    return (react_1.default.createElement(react_native_1.View, { style: styles.tabContainer },
+        react_1.default.createElement(react_native_1.Animated.View, { style: [
+                styles.circle,
+                {
+                    width: tabW,
+                    transform: [{ translateX: circlePosition }],
+                },
+            ] },
+            react_1.default.createElement(react_native_1.View, { style: styles.circleInner })),
+        tabs.map(function (tab, index) { return (react_1.default.createElement(react_native_1.TouchableOpacity, { key: index, activeOpacity: 0.8, onPress: function () {
+                setActiveTab(index);
+                onPress(tab.route);
+            }, style: styles.tabButton }, renderIcon(tab))); })));
 };
+exports.BottomTab = BottomTab;
 var styles = react_native_1.StyleSheet.create({
     tabContainer: {
         flexDirection: 'row',
         height: 60,
-        backgroundColor: '#f0f0f0',
+        backgroundColor: theme_1.COLORS.card,
         alignItems: 'center',
     },
     tabButton: {
@@ -22,8 +93,26 @@ var styles = react_native_1.StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
-    tabButtonActive: {
-        backgroundColor: '#ddd',
+    circle: {
+        position: 'absolute',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    circleInner: {
+        height: 40,
+        width: 40,
+        borderRadius: 20,
+        backgroundColor: theme_1.COLORS.primary,
+        opacity: 0.15,
+    },
+    iconImage: {
+        width: 20,
+        height: 20,
+    },
+    profileImage: {
+        width: 34,
+        height: 34,
+        borderRadius: 50,
     },
 });
-exports.default = BottomTab;

package/dist/components/footer/index.js

@@ -1,8 +1,6 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomTab = void 0;
+exports.LbTypes = exports.BottomTab = void 0;
 var Footer_1 = require("./Footer");
-Object.defineProperty(exports, "BottomTab", { enumerable: true, get: function () { return __importDefault(Footer_1).default; } });
+Object.defineProperty(exports, "BottomTab", { enumerable: true, get: function () { return Footer_1.BottomTab; } });
+Object.defineProperty(exports, "LbTypes", { enumerable: true, get: function () { return Footer_1.LbTypes; } });

package/dist/types/components/footer/Footer.d.ts

@@ -1,12 +1,20 @@
 import React from 'react';
+export declare enum LbTypes {
+    OCTICONS = "Octicons",
+    IONICONS = "Ionicons",
+    MATERIALICONS = "MaterialIcons"
+}
 interface Tab {
-    key: string;
-    label: string;
-    isActive: boolean;
-    onPress: () => void;
+    name: string;
+    iconName: string;
+    size: number;
+    lb: LbTypes;
+    route: string;
 }
-interface BottomTabProps {
+type BottomTabProps = {
     tabs: Tab[];
-}
-declare const BottomTab: React.FC<BottomTabProps>;
-export default BottomTab;
+    onPress: (route: string) => void;
+    activeTabIndex: number;
+};
+export declare const BottomTab: React.FC<BottomTabProps>;
+export {};

package/dist/types/components/footer/index.d.ts

@@ -1 +1 @@
-export { default as BottomTab } from "./Footer";
+export { BottomTab, LbTypes } from "./Footer";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {