37 lines
1.8 KiB
TypeScript
37 lines
1.8 KiB
TypeScript
import { ColorsStatus } from '@/constants/ColorsStatus';
|
|
import Styles from '@/constants/Styles';
|
|
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
|
|
import { TabTriggerSlotProps } from 'expo-router/ui';
|
|
import { ComponentProps, Ref } from 'react';
|
|
import { Pressable, View } from 'react-native';
|
|
import Text from './Text';
|
|
|
|
type Feather = ComponentProps<typeof Feather>['name'];
|
|
type Ionicons = ComponentProps<typeof Ionicons>['name'];
|
|
type AntDesign = ComponentProps<typeof AntDesign>['name'];
|
|
type MaterialCommunityIcons = ComponentProps<typeof MaterialCommunityIcons>['name'];
|
|
|
|
export type TabButtonProps = TabTriggerSlotProps & {
|
|
iconType: 'Feather' | 'Ionicons' | 'AntDesign' | 'MaterialCommunityIcons';
|
|
iconF?: Feather
|
|
iconI?: Ionicons
|
|
iconA?: AntDesign
|
|
iconM?: MaterialCommunityIcons
|
|
ref: Ref<View>;
|
|
n: number
|
|
};
|
|
|
|
export function ButtonTabExpo({ iconType, iconF, iconI, iconA, iconM, children, isFocused, n, ...props }: TabButtonProps) {
|
|
return (
|
|
<Pressable
|
|
{...props}
|
|
style={[Styles.btnTab, (isFocused) && ColorsStatus.orange, { width: n == 2 ? '50%' : 'auto' }]}>
|
|
{iconType == 'Feather' && <Feather name={iconF} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
|
{iconType == 'Ionicons' && <Ionicons name={iconI} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
|
{iconType == 'AntDesign' && <AntDesign name={iconA} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
|
{iconType == 'MaterialCommunityIcons' && <MaterialCommunityIcons name={iconM} color={isFocused == false ? 'black' : 'white'} size={20} />}
|
|
<Text style={[Styles.textMediumSemiBold, Styles.ml10, { color: isFocused ? 'white' : 'black' }]}>{children}</Text>
|
|
</Pressable>
|
|
);
|
|
}
|