fixed the tabs and navigation drawer as it is in the figma desgin

mobile-app/app/(drawer)/(tabs)/_layout.tsx

@@ -0,0 +1,34 @@
+import { Image, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { Tabs } from 'expo-router'
+import { Feather } from '@expo/vector-icons'
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import EvilIcons from '@expo/vector-icons/EvilIcons';
+import AntDesign from '@expo/vector-icons/AntDesign';
+
+export default function _layout() {
+  return (
+    <Tabs screenOptions={{headerShown: false}}>
+      <Tabs.Screen name='index' options={{
+        title: "Home",
+        tabBarActiveTintColor: "#9747FF",
+        tabBarIcon: ({color}) => {
+        return <MaterialIcons name='home' size={25} color={color} />
+      }}} />
+      <Tabs.Screen name='wallet' options={{title: "wallet", tabBarActiveTintColor: "#9747FF", tabBarIcon :  ({color}) => {
+        return <Ionicons name="wallet-outline" size={25} color={color} />
+      } }} />
+      <Tabs.Screen name='leaderboard' options={{title: "leaderboard", tabBarActiveTintColor: "#9747FF",
+        tabBarIcon: ({color}) => {
+        return <EvilIcons name="trophy" size={28} color={color} />
+      }}} />
+      <Tabs.Screen name='more' options={{title: "more", tabBarActiveTintColor: "#9747FF",
+        tabBarIcon: ({color}) => {
+        return <AntDesign name="appstore-o" size={23} color={color} />
+      }}} />
+    </Tabs>
+  )
+}
+
+const styles = StyleSheet.create({})

mobile-app/app/(drawer)/(tabs)/index.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import React from 'react'
+import { EvilIcons } from '@expo/vector-icons'
+import { DrawerActions, useNavigation } from '@react-navigation/native'
+
+export default function index() {
+  const navigate = useNavigation()
+  return (
+    <View style={{flex: 1, justifyContent:'center', alignItems: 'center'}}>
+      <Text>Index</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({})

mobile-app/app/(drawer)/(tabs)/leaderboard.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function leaderboard() {
+  return (
+    <View style={{flex: 1, justifyContent:'center', alignItems: 'center'}}>
+      <Text>leaderboard</Text>
+    </View>
+  )
+}

mobile-app/app/(drawer)/(tabs)/more.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function more() {
+  return (
+    <View style={{flex: 1, justifyContent:'center', alignItems: 'center'}}>
+      <Text>more</Text>
+    </View>
+  )
+}

mobile-app/app/(drawer)/(tabs)/wallet.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function wallet() {
+  return (
+    <View style={{flex: 1, justifyContent:'center', alignItems: 'center'}}>
+      <Text>wallet</Text>
+    </View>
+  )
+}

mobile-app/app/(drawer)/CustomDrawerItems.tsx

@@ -0,0 +1,46 @@
+import { Image, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { DrawerContentScrollView, DrawerItem } from '@react-navigation/drawer'
+import { router, usePathname } from 'expo-router'
+import { Feather } from '@expo/vector-icons'
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import Octicons from '@expo/vector-icons/Octicons';
+
+ export default function CustomDrawerItems(props: any) {
+  const pathname = usePathname()
+
+  const isActiveRoute = (routePath : string) => {
+    return pathname === routePath
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <View style={{flexDirection: 'row', alignItems:'center', gap:10, paddingVertical: 15, paddingHorizontal: 20, paddingTop: 60, borderBottomWidth: 1, borderColor: '#DBE1E7'}}>
+        <Image style={styles.imageAvatar} source={require('../../assets/images/avatar.png')} />
+        <View>
+          <Text style={{fontWeight:700, fontSize: 20}}>theOxneedeth</Text>
+          <Text style={{fontWeight:200, fontSize: 12}}>0x05e8c...d4b08fd4637c</Text>
+        </View>
+      </View>
+        <DrawerContentScrollView {...props} scrollEnabled={false}>
+            <DrawerItem label={'Profile'} icon={() => <Octicons name='person' size={25} color={'#212121'}/>} onPress={() => router.push('/(drawer)/(tabs)')} />    
+            <DrawerItem label={'Charts'} icon={() => <Ionicons name="chatbubbles-outline" size={24} color={'#212121'}/>} onPress={() => router.push('/(drawer)/(tabs)')} />    
+            <DrawerItem label={'About Us'} icon={() => <Feather name='info' size={25} color={'#212121'}/>} onPress={() => router.push('/(drawer)/(tabs)')}   />    
+            <DrawerItem label={'Settings'} icon={() => <Feather name='settings' size={25} color={'#212121'}/>} onPress={() => router.push('/(drawer)/(tabs)')}/>    
+        </DrawerContentScrollView> 
+
+        <View style={{paddingHorizontal: 10}}>
+          <DrawerItem label={'Log Out'} icon={() => <MaterialIcons name='logout' size={24} color={'#212121'}/>} onPress={() => router.push('/(drawer)/(tabs)')} />
+        </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  imageAvatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 50
+  }
+})

mobile-app/app/(drawer)/_layout.tsx

@@ -0,0 +1,15 @@
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Drawer } from 'expo-router/drawer';
+import CustomDrawerItem from './CustomDrawerItems';
+
+export default function Layout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Drawer screenOptions={{headerShown: false}} drawerContent={(props: any) => {
+        return <CustomDrawerItem {...props} />
+      }}>
+        <Drawer.Screen name='(tabs)' options={{headerShown: false}}/>
+      </Drawer>
+    </GestureHandlerRootView>
+  );
+}

mobile-app/app/(drawer)/profile.tsx

@@ -0,0 +1,10 @@
+import { View, Text } from 'react-native'
+import React from 'react'
+
+export default function profile() {
+  return (
+    <View>
+      <Text>profile</Text>
+    </View>
+  )
+}

mobile-app/app/_layout.tsx

@@ -29,8 +29,13 @@ export default function RootLayout() {
 
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+<<<<<<< HEAD
+      <Stack screenOptions={{headerShown: false}}>
+        <Stack.Screen name='index' options={{headerShown: false}} />
+=======
       <Stack screenOptions={{ headerShown: false }}>
         <Stack.Screen name="index" />
+>>>>>>> 4b52bc85332eecc28d69d39ab2f4c88bc262745a
       </Stack>
       <StatusBar style="auto" />
     </ThemeProvider>

mobile-app/app/index.tsx

@@ -1,12 +1,24 @@
 import { StyleSheet, Text, View } from 'react-native'
 import React from 'react'
+<<<<<<< HEAD
+import { Redirect, router } from 'expo-router'
+
+export default function () {
+  return (
+    // <View style={{margin: 50, backgroundColor: '#ccc', padding: 20}}>
+    //   <Text onPress={() => router.push("/(tabs)")}>TABS</Text>
+    // </View>
+
+    <Redirect href='/(drawer)/(tabs)' />
+=======
 import OnboardingScreen from "./screens/onboarding/onboarding.screen";
 
 export default function index() {
   return (
     <View>
  <OnboardingScreen />
     </View>
+>>>>>>> 4b52bc85332eecc28d69d39ab2f4c88bc262745a
   )
 }