crazycharge-app/component/global/couponTabView.tsx

//the size of the TabView will follow its parent-container's size.

import * as React from 'react';
import {
    View,
    Text,
    useWindowDimensions,
    StyleSheet,
    ImageSourcePropType,
    ScrollView
} from 'react-native';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

import { IndividualCouponComponent } from '../accountPages/walletPageComponent';
import { formatCouponDate } from '../../util/lib';
import { useEffect, useState } from 'react';
import { walletService } from '../../service/walletService';

export interface TabItem {
    imgURL: ImageSourcePropType;
    date: string;
    time: string;
    chargeStationName: string;
    chargeStationAddress: string;
    distance: string;
}

interface TabViewComponentProps {
    titles: string[];
}

const CouponTabViewComponent: React.FC<TabViewComponentProps> = ({
    titles
}) => {
    const [coupons, setCoupons] = useState([]);
    const layout = useWindowDimensions();

    useEffect(() => {
        try {
            const fetchCoupon = async () => {
                const coupon = await walletService.getCoupon();
                setCoupons(coupon);
            };
            fetchCoupon();
        } catch (error) {
            console.log(error);
        }
    }, []);
    //tab 1
    const FirstRoute = () => (
        <ScrollView
            style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}
        >
            <View className="flex-1 flex-col">
                {coupons
                    .filter(
                        (coupon) =>
                            coupon.is_consumned === false &&
                            new Date(coupon.expire_date) > new Date()
                    )
                    .map((coupon, index) => (
                        <IndividualCouponComponent
                            key={index}
                            title={coupon.name}
                            price={coupon.amount}
                            detail={coupon.description}
                            date={formatCouponDate(coupon.expire_date)}
                        />
                    ))}
            </View>
        </ScrollView>
    );

    //tab 2
    const SecondRoute = () => (
        <ScrollView
            style={{ flex: 1, backgroundColor: 'white', marginTop: 14 }}
        >
            <View className="flex-1 flex-col">
                {coupons
                    .filter(
                        (coupon) =>
                            coupon.is_consumned ||
                            new Date(coupon.expire_date) < new Date()
                    )
                    .map((coupon, index) => (
                        <IndividualCouponComponent
                            key={index}
                            title={coupon.name}
                            price={coupon.amount}
                            detail={coupon.description}
                            date={formatCouponDate(coupon.expire_date)}
                        />
                    ))}
            </View>
        </ScrollView>
    );

    const renderScene = SceneMap({
        firstRoute: FirstRoute,
        secondRoute: SecondRoute
    });
    const [routes] = React.useState([
        { key: 'firstRoute', title: titles[0] },
        { key: 'secondRoute', title: titles[1] }
    ]);
    const [index, setIndex] = React.useState(0);

    const renderTabBar = (props: any) => (
        <TabBar
            {...props}
            renderLabel={({ route, focused }) => (
                <Text
                    style={{
                        color: focused ? '#025c72' : '#888888',
                        fontWeight: focused ? '900' : 'thin',
                        fontSize: 20
                    }}
                >
                    {route.title}
                </Text>
            )}
            indicatorStyle={{
                backgroundColor: '#025c72'
            }}
            style={{
                backgroundColor: 'white',
                borderColor: '#DBE4E8',
                elevation: 0,
                marginHorizontal: 15,
                borderBottomWidth: 0.5
            }}
        />
    );
    return (
        <TabView
            navigationState={{ index, routes }}
            renderScene={renderScene}
            onIndexChange={setIndex}
            initialLayout={{ width: layout.width }}
            renderTabBar={renderTabBar}
        />
    );
};
export default CouponTabViewComponent;

const styles = StyleSheet.create({
    container: { flexDirection: 'row' },
    image: { width: 100, height: 100, margin: 15, borderRadius: 10 },
    textContainer: { flexDirection: 'column', gap: 8, marginTop: 20 }
});