From 12b013f90a453aa2f6563f5a4dc9ea5894cf36fc Mon Sep 17 00:00:00 2001 From: rishal-ERPGULF Date: Sat, 16 Sep 2023 04:18:48 +0530 Subject: [PATCH] UPDATE: botton tab added --- components/Home/WelcomeCard.jsx | 2 - components/Home/YourLavas.jsx | 2 +- navigation/app-navigator.jsx | 6 +-- navigation/home.tabbar.jsx | 48 +++++++++++++++++++++++ navigation/navigator.jsx | 2 +- package-lock.json | 68 +++++++++++++++++++++++++++++++++ package.json | 1 + screens/Home.jsx | 10 ++--- 8 files changed, 127 insertions(+), 12 deletions(-) create mode 100644 navigation/home.tabbar.jsx diff --git a/components/Home/WelcomeCard.jsx b/components/Home/WelcomeCard.jsx index 49b5b4d..f39b046 100644 --- a/components/Home/WelcomeCard.jsx +++ b/components/Home/WelcomeCard.jsx @@ -6,7 +6,6 @@ import { useDispatch, useSelector } from "react-redux"; import { setSignOut } from "../../redux/Slices/AuthSlice"; const WelcomeCard = () => { const fullname = useSelector((state) => state.user.fullname); - const dispatch = useDispatch(); return ( { Home { - dispatch(setSignOut()); }} className="bg-orange-400 w-12 h-12 items-center justify-center rounded-full" > diff --git a/components/Home/YourLavas.jsx b/components/Home/YourLavas.jsx index a6e6cfb..642a7f7 100644 --- a/components/Home/YourLavas.jsx +++ b/components/Home/YourLavas.jsx @@ -130,7 +130,7 @@ const LavaMenu = () => { {/* second row */} - + { return ( - + diff --git a/navigation/home.tabbar.jsx b/navigation/home.tabbar.jsx new file mode 100644 index 0000000..82b3bbb --- /dev/null +++ b/navigation/home.tabbar.jsx @@ -0,0 +1,48 @@ +import React from "react"; +import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; +import { Home } from "../screens"; +import Ionicons from "react-native-vector-icons/Ionicons"; +import { COLORS } from "../constants"; + +const TabStack = createBottomTabNavigator(); + +const HomeTabGroup = () => { + return ( + ({ + tabBarActiveTintColor: COLORS.primary, + tabBarIcon: ({ focused, color }) => { + let iconName; + if (route.name === "home") { + iconName = focused ? "home" : "home-outline"; + return ; + } + if (route.name === "profile") { + iconName = focused ? "person" : "person-outline"; + return ; + } + if (route.name === "chat") { + iconName = focused + ? "chatbubble-ellipses" + : "chatbubble-ellipses-outline"; + return ; + } + }, + headerShown: false, + tabBarShowLabel: false, + tabBarStyle: { + position: "absolute", + height: 80, + borderWidth: 0, + paddingBottom: 25, + }, + })} + > + + + + + ); +}; + +export default HomeTabGroup; diff --git a/navigation/navigator.jsx b/navigation/navigator.jsx index 588f3da..b42a4da 100644 --- a/navigation/navigator.jsx +++ b/navigation/navigator.jsx @@ -8,7 +8,7 @@ import AuthNavigator from "./auth-navigator"; const Navigator = () => { const isLoggedIn = useSelector(selectIsLoggedIn); return ( - + {isLoggedIn ? : } ); diff --git a/package-lock.json b/package-lock.json index 9974ac9..1495762 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "@react-native-async-storage/async-storage": "1.18.2", + "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", "@reduxjs/toolkit": "^1.9.5", @@ -5900,6 +5901,23 @@ "react-native": "*" } }, + "node_modules/@react-navigation/bottom-tabs": { + "version": "6.5.8", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-6.5.8.tgz", + "integrity": "sha512-0aa/jXea+LyBgR5NoRNWGKw0aFhjHwCkusigMRXIrCA4kINauDcAO0w0iFbZeKfaTCVAix5kK5UxDJJ2aJpevg==", + "dependencies": { + "@react-navigation/elements": "^1.3.18", + "color": "^4.2.3", + "warn-once": "^0.1.0" + }, + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0", + "react-native-screens": ">= 3.0.0" + } + }, "node_modules/@react-navigation/core": { "version": "6.4.9", "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.9.tgz", @@ -7090,6 +7108,18 @@ "node": ">=6" } }, + "node_modules/color": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", + "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==", + "dependencies": { + "color-convert": "^2.0.1", + "color-string": "^1.9.0" + }, + "engines": { + "node": ">=12.5.0" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -7103,6 +7133,31 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" }, + "node_modules/color-string": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", + "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", + "dependencies": { + "color-name": "^1.0.0", + "simple-swizzle": "^0.2.2" + } + }, + "node_modules/color/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, "node_modules/colorette": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", @@ -13507,6 +13562,19 @@ "node": ">= 5.10.0" } }, + "node_modules/simple-swizzle": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", + "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", + "dependencies": { + "is-arrayish": "^0.3.1" + } + }, + "node_modules/simple-swizzle/node_modules/is-arrayish": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" + }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", diff --git a/package.json b/package.json index 028657a..796a34a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@react-native-async-storage/async-storage": "1.18.2", + "@react-navigation/bottom-tabs": "^6.5.8", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.9.13", "@reduxjs/toolkit": "^1.9.5", diff --git a/screens/Home.jsx b/screens/Home.jsx index e412065..fd4fd22 100644 --- a/screens/Home.jsx +++ b/screens/Home.jsx @@ -1,16 +1,16 @@ -import { ScrollView } from "react-native"; +import { ScrollView, View } from "react-native"; import React from "react"; import { LavaMenu, QuickAccess, WelcomeCard } from "../components/Home"; -import { SafeAreaView } from "react-native-safe-area-context"; import { useNavigation } from "@react-navigation/native"; - +import Constants from 'expo-constants' const Home = ( ) => { const navigation = useNavigation(); return ( - @@ -26,7 +26,7 @@ const Home = ( ) => { - + ); };