Tabs

Component that is based on react-native-tab-view library.

https://github.com/react-navigation/react-navigation (opens in a new tab)

Import

import { Tabs, TabList, Tab, TabPanel, TabPanels } from 'react-native-ficus-ui';

Usage

Default

EDITABLE EXAMPLE

const SimpleTabs = () => {
  const [index, setIndex] = React.useState(0);

  return (
    <Box h={200} w={300}>
      <Tabs
        initialPage={0}
        onChangeTab={setIndex}
        selectedTab={index}
      >
        <TabList>
          <Tab name="first">Tab 1</Tab>
          <Tab name="second">Tab 2</Tab>
          <Tab name="third">Tab 3</Tab>
        </TabList>
        <TabPanels>
          <TabPanel linkedTo="first" p="lg">
            <Text>Content for the first tab</Text>
          </TabPanel>
          <TabPanel linkedTo="second" p="lg">
            <Text>Content for the second tab</Text>
          </TabPanel>
          <TabPanel linkedTo="third" p="lg">
            <Text>Content for the third tab</Text>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
render(<SimpleTabs />)

Custom color

EDITABLE EXAMPLE

const SimpleTabs = () => {
  const [index, setIndex] = React.useState(0);

  return (
    <Box h={200} w={300}>
      <Tabs
        initialPage={0}
        onChangeTab={setIndex}
        selectedTab={index}
        colorScheme="orange"
      >
        <TabList>
          <Tab name="first">Tab 1</Tab>
          <Tab name="second">Tab 2</Tab>
          <Tab name="third">Tab 3</Tab>
        </TabList>
        <TabPanels>
          <TabPanel linkedTo="first" p="lg">
            <Text>Content for the first tab</Text>
          </TabPanel>
          <TabPanel linkedTo="second" p="lg">
            <Text>Content for the second tab</Text>
          </TabPanel>
          <TabPanel linkedTo="third" p="lg">
            <Text>Content for the third tab</Text>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
render(<SimpleTabs />)

Custom label

EDITABLE EXAMPLE

const SimpleTabs = () => {
  const [index, setIndex] = React.useState(0);

  const CustomTabLabel = ({
    focused,
    children,
  }: {
    focused: boolean;
    children: ReactNode;
  }) => (
    <Box bg={focused ? 'teal.600' : 'transparent'} p="md" borderRadius="2xl">
      <Text color={focused ? 'white' : 'teal.500'} fontWeight="bold">
        {children}
      </Text>
    </Box>
  );

  return (
    <Box h={200} w={300}>
      <Tabs
        initialPage={0}
        onChangeTab={setIndex}
        selectedTab={index}
        indicatorStyle={{ backgroundColor: 'transparent' }}
      >
        <TabList>
          <Tab name="first">
            {({ focused }: { focused: boolean }) => (
              <CustomTabLabel focused={focused}>Tab 1</CustomTabLabel>
            )}
          </Tab>
          <Tab name="second">
            {({ focused }: { focused: boolean }) => (
              <CustomTabLabel focused={focused}>Tab 2</CustomTabLabel>
            )}
          </Tab>
          <Tab name="third">
            {({ focused }: { focused: boolean }) => (
              <CustomTabLabel focused={focused}>Tab 3</CustomTabLabel>
            )}
          </Tab>
        </TabList>
        <TabPanels>
          <TabPanel linkedTo="first" p="lg">
            <Text>Content for the first tab</Text>
          </TabPanel>
          <TabPanel linkedTo="second" p="lg">
            <Text>Content for the second tab</Text>
          </TabPanel>
          <TabPanel linkedTo="third" p="lg">
            <Text>Content for the third tab</Text>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </Box>
  );
}
render(<SimpleTabs />)

Props

Extends every Box props and TabViewProps from react-native-tab-view

`colorScheme`

The colorScheme property, will define tabs main color

Type	Required
string	No

`initialPage`

The initial displayed tab index

Type	Required	Default
number	No	0

`selectedTab`

The current selected tab index

Type	Required
number	No

`onChangeTab`

Callback called when current selected tab has changed

Type	Required
(index: number) => void	No

VStack List