Untitled

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import React, { useEffect, useState } from 'react';
import { Image, Linking, Text, TouchableOpacity, Vibration, View } from 'react-native';
import { ms, mvs } from 'react-native-size-matters';

import images from '../../../assets/images/images';
import { colors } from '../../../constants/colors';
import AccountScreen from '../AccountScreen';
// import MessagesScreen from '../MessagesScreen';
import messaging from '@react-native-firebase/messaging';
import { useIsFocused } from '@react-navigation/native';
import HomeStackNavigator from '../../../navigation/HomeStack';
import { storageRead } from '../../../utils/storageUtils';
import MessagesList from '../MessageList';
import tikTok from '../TikTok';
const Tab = createBottomTabNavigator();

const MainTabScreen = ({ navigation, route }) => {
  const isFocused = useIsFocused();
  const [useDetail, setUserDetail] = useState();

  useEffect(() => {
    if (isFocused) {
      checkForUserLogin();
    }
  }, [isFocused]);

  const constructDeepLinkandNavigate = async (userId, chatData) => {
    const baseUrl = 'events6://MessagesScreen';
    const queryParams = {
      userId,
      chatData,
    };

    const queryString = Object.keys(queryParams)
      .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`)
      .join('&');

    console.log(`${baseUrl}?${queryString}`, '`${baseUrl}?${queryString}`');

    try {
      await Linking.openURL(`${baseUrl}?${queryString}`);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    messaging()
      .getInitialNotification()
      .then((message) => {
        const chatData = message?.data?.chatData;

        if (chatData) {
          constructDeepLinkandNavigate(message?.data?.userId, chatData);
        }
      });

    messaging().onNotificationOpenedApp(async (message) => {
      const chatData = message?.data?.chatData;

      if (chatData) {
        constructDeepLinkandNavigate(message?.data?.userId, chatData);
      }
    });
  }, []);

  const checkForUserLogin = async () => {
    const userDetails = await storageRead('user_details');
    setUserDetail(userDetails);

    console.log('Now Default Account is', useDetail?.fullname);
    console.log('Is Default Account is business account', useDetail?.isBusinessAccount);
  };

  if (!useDetail) {
    return null;
  }

  return (
    <Tab.Navigator
      screenOptions={{ headerShown: false }}
      tabBar={(props) => <MyTabBar {...props} />}
    >
      <Tab.Screen name="Home" component={HomeStackNavigator} />
      <Tab.Screen name="Reels" component={tikTok}    />
      {/* <Tab.Screen name="My Events" component={MyEventsScreen} /> */}
      {/* <Tab.Screen name="Shop" component={ShopScreen} /> */}
      <Tab.Screen name="Messages" component={MessagesList} />
      <Tab.Screen name="Settings" component={AccountScreen} />
    </Tab.Navigator>
  );
};


function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ backgroundColor: colors.white }}>
      <View style={{ backgroundColor: colors.primaryGreyColor, height: 2 }} />

      <View style={{ flexDirection: 'row', paddingVertical: mvs(5) }}>
        {state.routes.map((route, index) => {7822031222
          const { options } = descriptors[route.key];
          const label = ''; // Set the label to an empty string to hide it

          const isFocused = state.index === index;

          const onPress = () => {
            Vibration.vibrate(5);

            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name, route.params);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <TouchableOpacity
              key={index} // Add a key prop for better list rendering
              accessibilityRole="button"
              accessibilityState={isFocused ? { selected: true } : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              testID={options.tabBarTestID}
              onPress={onPress}
              onLongPress={onLongPress}
              style={{
                flex: 1,
                alignItems: 'center',
                paddingVertical: mvs(5),
                paddingBottom: mvs(18),
                marginBottom:ms(2)
              }}
            >
              {/* Tab Icon */}
              {route.name === 'Home' && (
                <Image
                  source={isFocused ? images.homeBizTabSelected : images.homeBizTab}
                  style={{ width: ms(20), height: ms(20) }}
                />
              )}
              {route.name === 'Reels' && (
                <Image
                  source={isFocused ? images.Reel : images.ReelBlack}
                  style={{ width: ms(25), height: ms(25) }}
                />
              )}
              {route.name === 'Messages' && (
                <Image
                  source={isFocused ? images.messageTabSelected : images.messageTab}
                  style={{ width: ms(20), height: ms(20) }}
                />
              )}
              {route.name === 'Settings' && (
                <Image
                  source={isFocused ? images.settingTabSelected : images.settingTab}
                  style={{ width: ms(20), height: ms(20)  }}
                />
              )}

              {/* Hide the label by not rendering the Text component */}
              {/* <Text style={{ color: colors.textColor, marginTop: mvs(5) }}>{label}</Text> */}
            </TouchableOpacity>
          );
        })}
      </View>
    </View>
  );
}

export default MainTabScreen;