Tabs

Reusable Tabs component

Example

import {useState} from 'react';

import {createStyles, Tabs, useStyles, View} from '@lad-tech/mobydick-core';


const TABS_TEST = [
  {value: 'tab1', label: 'tab1'},
  {value: 'tab2', label: 'tab2'},
  {value: 'tab3', label: 'tab3'},
  {value: 'tab4', label: 'tab4'},
  {value: 'tab5', label: 'tab5'},
  {value: 'tab6', label: 'tab6'},
  {value: 'tab7', label: 'tab7'},
  {value: 'tab8', label: 'tab8'},
  {value: 'tab9', label: 'tab9'},
];

export const TabsWidget = () => {
  const [styles] = useStyles(stylesFn);

  const [activeValue, setActiveValue] = useState<string | number>('tab1');

  return (
    <View style={styles.container}>
      <Tabs
        list={TABS_TEST}
        onPressCommon={item => setActiveValue(item.value)}
        activeValue={activeValue}
      />
    </View>
  );
};

const stylesFn = createStyles(({spaces}) => ({
  container: {
    gap: spaces.Space16,
    alignItems: 'center',
  },
}));

Props

Required

list

Type
tab[]

Data for tabs

Required

activeValue

TYPE
string | number

The value that will be selected as active tab

containerStyle

TYPE
ViewStyle

Custom styles for tabs container

contentContainerStyle

TYPE
ViewStyle

Custom styles for tabs content container

fontTab

Type	DEFAULT
TypographyProp	'Regular-Tertiary-XS'

Font for tab

fontActiveTab

Type	DEFAULT
TypographyProp	'Regular-White-XS'

Font for active tab

backgroundColorTab

Type	DEFAULT
string	colors.BgTertiary

Background color for tab

backgroundColorActiveTab

Type	DEFAULT
string	colors.ElementBase

Background color for active tab

onPressCommon

TYPE
(item: ITab) => void

OnPress for all tabs

styleTab

TYPE
ViewStyle

Custom styles for tab

styleActiveTab

TYPE
ViewStyle

Custom styles for active tab