_layout.tsx

.tsx

import AboutUsSN from '@/components/AboutUsSN';
import BackupWalletSN from '@/components/BackupWalletSN';
import CustomDrawerContent from '@/components/CustomDrawerContent';
import { actuatedNormalize, actuatedNormalizeVertical } from '@/components/Dimension';
import DrawerIcon from '@/components/DrawerIcon';
import HelpAndSupportSN from '@/components/HelpAndSupportSN';
import HomeIconSN from '@/components/HomeIconSN';
import ReceiveSN from '@/components/ReceiveSN';
import SendLogoSN from '@/components/SendLogoSN';
import SettingsSN from '@/components/SettingsSN';
import TxHistorySN from '@/components/TxHistorySN';
import WalletLogoSN from '@/components/WalletLogoSN';
import { store } from '@/features/store';
import { Poppins_500Medium, useFonts } from '@expo-google-fonts/poppins';
import { useNavigation } from 'expo-router';
import { Drawer } from 'expo-router/drawer';
import { DrawerActions } from '@react-navigation/native';

import {
  StyleSheet, View
} from 'react-native';
import { Provider } from 'react-redux';
import { COLORS } from '../COLORS';
import WBGLBrigdgeSN from '@/components/WBGLBridgeSN';

export default function Layout() {
  // Todo: style this to the figma style by overriding the default design: (follow with the video)
  const [fontsLoaded] = useFonts({
    Poppins_500Medium,
  })

  const navigation = useNavigation()
  return (
    <Provider store={store}>
      <Drawer
        drawerContent={CustomDrawerContent}
        screenOptions={{

          headerLeft: props => (<View style={{ marginLeft: actuatedNormalize(19) }}><DrawerIcon onpress={() => navigation.dispatch(DrawerActions.openDrawer())} /></View>),
          drawerHideStatusBarOnOpen: true,
          drawerActiveBackgroundColor: 'rgba(204, 204, 204, 0.5)',
          drawerInactiveBackgroundColor: COLORS.WHITEOO1,
          drawerActiveTintColor: COLORS.BLACK,
          drawerLabelStyle: {
            marginLeft: -20,
            fontSize: 14,
            fontFamily: fontsLoaded ? 'Poppins_500Medium' : ''
          },
          drawerItemStyle: {
            height: actuatedNormalizeVertical(65),
            margin: actuatedNormalize(11),
            justifyContent: 'center',
            borderRadius: actuatedNormalize(7),
            paddingStart: actuatedNormalize(15),
            marginBottom: actuatedNormalizeVertical(15)
          }
        }}
      >
        <Drawer.Screen
          name="index"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Home',
            title: '',
            // headerStyle: {
            //   backgroundColor: COLORS.WHITE,
            // },

            drawerIcon: ({ size, color }) => (

              <IconContainer>
                <HomeIconSN />
              </IconContainer>)
            // header: (props) => <CustomDrawerHeader props={props} />
          }}
        />
        <Drawer.Screen
          name="wallet"

          options={{
            headerTitleAlign: 'center',
            title: 'Wallet',
            drawerLabel: 'Wallet',
            headerShown: true,
            // header: (props) => <CustomDrawerHeader props={props}/>
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <WalletLogoSN />
              </IconContainer>
            )
          }}

        />

        {/* <Drawer.Screen
          name="send"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Send',
            title: 'Send',
            drawerIcon: ({ size, color }) => (
              <SendLogoSN />
            )

          }}
        /> */}

        <Drawer.Screen
          name="receive"

          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Receive',
            title: 'Receive',
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <ReceiveSN />
              </IconContainer>
            )
          }}
        />
        <Drawer.Screen
          name="transaction-history"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Transaction History',
            title: 'Transaction History',
            drawerIcon: ({ size, color }) => (
              <TxHistorySN />
            )
          }}
        />
        <Drawer.Screen
          name="wbgl-bridge"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'WBGL Bridge',
            title: 'WBGL Bridge',
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <WBGLBrigdgeSN />
              </IconContainer>
            )
          }}
        />


        <Drawer.Screen
          name="backup-wallet"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Backup Wallet',
            title: 'Backup Wallet',
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <BackupWalletSN />
              </IconContainer>
            )
          }}
        />
        <Drawer.Screen
          name="settings"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Settings',
            title: 'Settings',
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <SettingsSN />
              </IconContainer>
            )
          }}

        />

        <Drawer.Screen
          name="help-and-support"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'Help and Support',
            title: 'Help and Support',
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <HelpAndSupportSN />
              </IconContainer>
            )
          }}
        />
        <Drawer.Screen
          name="about-us"
          options={{
            headerTitleAlign: 'center',
            drawerLabel: 'About Us',
            title: 'About Us',
            drawerIcon: ({ size, color }) => (
              <IconContainer>
                <AboutUsSN />
              </IconContainer>
            )
          }}
        />

      </Drawer>
    </Provider >
  );
}

function IconContainer({ children }: any) {
  return (
    <View style={{ backgroundColor: COLORS.WHITE, height: 40, width: 40, alignItems: 'center', justifyContent: 'center', borderRadius: 20 }}>
      {children}
    </View>
  )
}

const styles = StyleSheet.create({
  customHeader: {
    backgroundColor: '#9A6DFF',
    minHeight: actuatedNormalizeVertical(55),
    minWidth: actuatedNormalize(355)
  },
  menuButton: {
    marginTop: actuatedNormalizeVertical(16),
    marginLeft: actuatedNormalize(27),
    marginBottom: actuatedNormalize(7)
  }
})