nomadmania-app/src/components/HorizontalTabView/index.tsx

import React from 'react';
import { View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
import { Tabs, MaterialTabBar } from 'react-native-collapsible-tab-view';
import { styles } from './styles';
import { Colors } from 'src/theme';

import MarkToUpIcon from '../../../assets/icons/mark-to-up.svg';
import BanIcon from 'assets/icons/messages/ban.svg';
import MessagesDot from '../MessagesDot';

interface Route {
  key: string;
  title?: string;
  icon?: string;
}

type Props = {
  index: number;
  setIndex: React.Dispatch<React.SetStateAction<number>>;
  routes: Route[];
  renderScene: (props: { route: any }) => React.ReactNode;
  withMark?: boolean;
  lazy?: boolean;
  withNotification?: number;
  maxTabHeight?: number;
  tabBarStyle?: StyleProp<ViewStyle>;
  sceneStyles?: StyleProp<ViewStyle>;
};

export const HorizontalTabView: React.FC<Props> = ({
  index,
  setIndex,
  routes,
  renderScene,
  withMark,
  lazy = false,
  withNotification = 0,
  maxTabHeight,
  tabBarStyle = {},
  sceneStyles = {}
}) => {
  const TabItemComponent = ({ name, index: tabIndex, onPress, label, style, onLayout }: any) => {
    const fullRoute = routes.find((r) => r.key === name);

    return (
      <Pressable
        onPress={() => onPress(name)}
        onLayout={onLayout}
        style={[styles.tabLabelWrapper, style, withNotification > 0 ? { marginTop: 3 } : {}]}
      >
        <View
          style={[
            styles.tabLabelContainer,
            maxTabHeight ? { maxHeight: maxTabHeight } : {},
            tabIndex === index ? { backgroundColor: Colors.ORANGE, borderColor: Colors.ORANGE } : {}
          ]}
        >
          {fullRoute?.icon === 'ban' ? (
            <BanIcon
              width={15}
              height={15}
              fill={tabIndex === index ? Colors.WHITE : Colors.DARK_BLUE}
            />
          ) : (
            <Text style={[styles.label, tabIndex === index ? { color: Colors.WHITE } : {}]}>
              {fullRoute?.title ?? label}
            </Text>
          )}
          {withMark ? (
            <MarkToUpIcon height={16} width={16} style={styles.icon} stroke={undefined} />
          ) : null}
        </View>

        {withNotification > 0 && fullRoute?.key === 'received' ? (
          <View style={styles.notificationContainer}>
            <MessagesDot messagesCount={withNotification} />
          </View>
        ) : null}
      </Pressable>
    );
  };

  return (
    <Tabs.Container
      renderTabBar={(props) => (
        <MaterialTabBar
          {...props}
          scrollEnabled
          indicatorStyle={{ height: 0 }}
          activeColor={Colors.ORANGE}
          inactiveColor={Colors.DARK_BLUE}
          keepActiveTabCentered
          contentContainerStyle={{ paddingHorizontal: 0 }}
          style={[styles.tabBar, tabBarStyle]}
          tabStyle={[styles.tabStyle, maxTabHeight ? { maxHeight: maxTabHeight } : {}]}
          TabItemComponent={TabItemComponent}
        />
      )}
      onIndexChange={setIndex}
      initialTabName={routes[index]?.key}
      lazy={lazy}
      headerHeight={0}
      headerContainerStyle={styles.tabBar}
      containerStyle={[tabBarStyle]}
      tabBarHeight={40}
    >
      {routes.map((route) => (
        <Tabs.Tab key={route.key} name={route.key} label={route.title}>
          <View
            style={[
              { flex: 1, width: '100%', paddingTop: 40, paddingHorizontal: '4%' },
              sceneStyles
            ]}
          >
            {renderScene({ route })}
          </View>
        </Tabs.Tab>
      ))}
    </Tabs.Container>
  );
};