react-native-chating-ui-kit/lib/CometChatTabs/CometChatTabs.js

CometChat React Native UI Kit is a collection of custom UI Components designed to build text , chat and calling features in your application. The UI Kit is developed to keep developers in mind and aims to reduce development efforts significantly

import React, { useState, useEffect } from 'react';
import { FlatList, Image, TouchableOpacity, View, Text, Dimensions } from 'react-native';
import { CometChatContext } from '../shared';
import { CometChatTabsStyle } from './CometChatTabsStyle';
import { TabItemStyle } from "./TabItemStyle";
const { width: screenWidth } = Dimensions.get("window");
export const CometChatTabs = (props) => {
    const { style, tabAlignment = "bottom", } = props;
    const { theme } = React.useContext(CometChatContext);
    const [view, setView] = useState(null);
    const [tabs, setTabs] = useState(props.tabs);
    const _style = new CometChatTabsStyle({
        backgroundColor: theme?.palette.getAccent500(),
        ...style,
    });
    useEffect(() => {
        props.tabs.forEach((tabItem) => {
            tabItem.isActive ? setView(tabItem.childView) : null;
        });
    }, []);
    const getStyleFor = (tab) => {
        const { activeBackgroundColor, activeIconTint, activeTitleTextColor, activeTitleTextFont, iconTint, titleTextColor, titleTextFont, backgroundColor, border, borderRadius, height, width } = new TabItemStyle({
            backgroundColor: theme?.palette.getBackgroundColor(),
            titleTextColor: theme?.palette.getAccent(),
            titleTextFont: theme?.typography.body,
            activeIconTint: theme?.palette.getPrimary(),
            activeTitleTextColor: theme?.palette.getPrimary(),
            activeBackgroundColor: theme?.palette.getSecondary(),
            iconTint: theme?.palette.getAccent600(),
            activeTitleTextFont: theme?.typography.body,
            ...tab.style
        });
        return {
            height,
            width: tabs.length <= 4 ? screenWidth / tabs.length : width,
            border,
            borderRadius,
            backgroundColor: tab.isActive ? activeBackgroundColor : backgroundColor,
            tintColor: tab.isActive ? activeIconTint : iconTint,
            color: tab.isActive ? activeTitleTextColor : titleTextColor,
            titleFont: tab.isActive ? activeTitleTextFont : titleTextFont,
        };
    };
    const tabItemPressed = (item) => {
        let newTabState = tabs.map((tabItem) => {
            return {
                ...tabItem,
                isActive: tabItem.id == item.id ? true : false
            };
        });
        setView(item.childView);
        setTabs(newTabState);
    };
    const TabItemView = ({ index, item }) => {
        let style = getStyleFor(item);
        return (<TouchableOpacity style={[style, { justifyContent: "center", alignItems: "center" }]} onPress={() => tabItemPressed(item)}>
                {item.icon && <Image source={item.icon} style={{ tintColor: style.tintColor }}/>}
                {item.title && <Text style={{ color: style.color, ...style.titleFont }}>{item.title}</Text>}
            </TouchableOpacity>);
    };
    const TabsList = () => {
        return <FlatList style={[_style]} data={tabs} horizontal={true} keyExtractor={(tabItem) => tabItem.id.toString()} renderItem={(tabItem) => TabItemView(tabItem)}/>;
    };
    return (<View style={{ flex: 1 }}>
            {tabAlignment == "top" && <TabsList />}
            <View style={{ flex: 1 }}>
                {view}
            </View>
            <View>
                {tabAlignment == "bottom" && <TabsList />}
            </View>
        </View>);
};
//# sourceMappingURL=CometChatTabs.js.map