tab button add

App.js

@@ -6,6 +6,7 @@ import { AppLoading } from "expo";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { Home } from "./src/screens/app";
+import AppNavigation from "./src/navigation/AppNavigation";
 
 const Stack = createNativeStackNavigator();
 
@@ -21,7 +22,11 @@ export default function App() {
  return (
  <NavigationContainer>
  <Stack.Navigator>
- <Stack.Screen name="Home" component={Home} />
+ <Stack.Screen
+ options={{ headerShown: false }}
+ name="AppNavigation"
+ component={AppNavigation}
+ />
  </Stack.Navigator>
  </NavigationContainer>
  );

src/navigation/AppNavigation.js

@@ -0,0 +1,72 @@
+import { StyleSheet, Text, View, Image } from "react-native";
+import React from "react";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+// import Home from "../screens/app";
+import Camera from "../screens/app/Camera";
+import Search from "../screens/app/Search";
+import Favourite from "../screens/app/Favourite";
+import { Images } from "../theme";
+import Box from "../screens/app/Box";
+import Home from "../screens/app/Home";
+
+const Tab = createBottomTabNavigator();
+
+const AppNavigation = () => {
+ return (
+ <Tab.Navigator
+ screenOptions={({ route }) => ({
+ tabBarIcon: ({ focused }) => {
+ let iconName;
+ if (route.name === "Home") {
+ iconName = focused ? Images.homeActive : Images.homeInActive;
+ } else if (route.name === "Box") {
+ iconName = focused ? Images.BoxInActive : Images.BoxActive;
+ } else if (route.name === "Camera") {
+ iconName = focused ? Images.CameraActive : Images.CameraInActive;
+ } else if (route.name === "Favourite") {
+ iconName = focused
+ ? Images.favouriteActive
+ : Images.favouriteInActive;
+ } else if (route.name === "Search") {
+ iconName = Images.search;
+ }
+
+ return (
+ <Image
+ style={{ width: 24, height: 24 }}
+ resizeMode="contain"
+ source={iconName}
+ />
+ );
+ },
+ tabBarLabel: () => null,
+ })}
+ >
+ <Tab.Screen
+ name="Home"
+ component={Home}
+ options={{ headerShown: false }}
+ />
+ <Tab.Screen name="Box" component={Box} options={{ headerShown: false }} />
+ <Tab.Screen
+ name="Camera"
+ component={Camera}
+ options={{ headerShown: false }}
+ />
+ <Tab.Screen
+ name="Search"
+ component={Search}
+ options={{ headerShown: false }}
+ />
+ <Tab.Screen
+ name="Favourite"
+ component={Favourite}
+ options={{ headerShown: false }}
+ />
+ </Tab.Navigator>
+ );
+};
+
+export default AppNavigation;
+
+const styles = StyleSheet.create({});

src/navigation/MainNavigation.js

@@ -0,0 +1,21 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+
+const Stack = createNativeStackNavigator();
+
+const MainNavigation = () => {
+ return (
+ <NavigationContainer>
+ <Stack.Navigator>
+ <Stack.Screen name="Home" component={AppNavigation} />
+ </Stack.Navigator>
+ </NavigationContainer>
+ );
+};
+
+export default MainNavigation;
+
+const styles = StyleSheet.create({});

src/screens/app/Box.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const Box = () => {
+ return (
+ <View>
+ <Text>Box</Text>
+ </View>
+ );
+};
+
+export default Box;
+
+const styles = StyleSheet.create({});

src/screens/app/Camera.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const Camera = () => {
+ return (
+ <View>
+ <Text>Camera</Text>
+ </View>
+ );
+};
+
+export default Camera;
+
+const styles = StyleSheet.create({});

src/screens/app/Favourite.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const Favourite = () => {
+ return (
+ <View>
+ <Text>Favourite</Text>
+ </View>
+ );
+};
+
+export default Favourite;
+
+const styles = StyleSheet.create({});

src/screens/app/Search.js

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const Search = () => {
+ return (
+ <View>
+ <Text>Search</Text>
+ </View>
+ );
+};
+
+export default Search;
+
+const styles = StyleSheet.create({});

src/screens/app/index.js

@@ -1,4 +1,4 @@
-import Home from "./Home";
-import PlantDetails from "./PlantDetails";
+// import Home from "./Home";
+// import PlantDetails from "./PlantDetails";
 
-export { Home, PlantDetails };
+// export { Home, PlantDetails };

src/theme/images.js

@@ -31,5 +31,16 @@ const images = {
  profile4: require("../../assets/images/plant_4.jpg"),
  profile5: require("../../assets/images/plant_5.jpg"),
  bannerBg: require("../../assets/images/banner_bg.jpg"),
+
+ //tabs icon
+ homeActive: require("../../assets/house.png"),
+ homeInActive: require("../../assets/home.png"),
+ BoxActive: require("../../assets/delivery-box.png"),
+ BoxInActive: require("../../assets/box.png"),
+ CameraActive: require("../../assets/photo.png"),
+ CameraInActive: require("../../assets/camera.png"),
+ search: require("../../assets/search-interface-symbol.png"),
+ favouriteActive: require("../../assets/favorite.png"),
+ favouriteInActive: require("../../assets/heart.png"),
 };
 export default images;