Feat add tabs components

[omar-bear]

Description

This Pull Request introduces a refined Tabs component for React Native, extending the functionality of the react-native-tab-view library. The component is integrated into the Ficus UI library, offering enhanced customizability and theme adaptability. It is composed of Tabs, TabList, Tab, TabPanel, and TabPanels. The implementation focuses on flexibility and ease of use, maintaining consistency with the design principles of Ficus UI.

How To: Development Approach

The development of the Tabs component involved extending and enhancing the capabilities of the react-native-tab-view library. Here's an overview of the key development steps:

1. Integration with react-native-tab-view: The base functionality of the tabs was built upon the existing react-native-tab-view components. This provided a robust foundation for tab navigation and state management.

2. Component Breakdown:

   • Tabs: Serves as the wrapper component, managing the state and overall layout of the tabs.
   • TabList: A container for Tab components, enabling the listing and arrangement of individual tabs.
   • Tab: Represents an individual tab, which can be customized with different content and styles.
   • TabPanel: A container for the content corresponding to each tab.
   • TabPanels: Wraps around the TabPanel components, managing their display based on the active tab.

3. Customization and Theming:

   • Utilized the useTheme hook from Ficus UI to ensure that the tabs are adaptable to different themes.
   • Developed a getStyle function to process and apply styles dynamically based on the provided props and theme context.

4. Responsive Design:

   • Incorporated useWindowDimensions from React Native to make the component responsive to changes in screen size.

5. Props and Types Definition:

   • Defined comprehensive prop types for each component (TabsProps, TabListProps, etc.) to ensure clear, consistent, and type-safe usage.
   • Extended the props to include additional customization options specific to the tab navigation experience.

6. Styling and Layout:

   • Created a set of styles for each component using StyleSheet from React Native, allowing for extensive customization.
   • Addressed specific styling challenges, such as a workaround for a known issue with TabView from react-native-tab-view.

Through these steps, the Tabs component was developed to be a flexible, customizable, and theme-adaptable addition to the Focus UI library, enhancing the standard functionality provided by react-native-tab-view.

Current Problem

Currently, the component works seamlessly when integrated into external projects. However, an issue arises when it is used within the example folder of the project. This inconsistency indicates a potential environment-specific problem that needs further investigation to ensure uniform functionality across different setups.

Demo

For a practical demonstration of the Tabs component, consider the following example:

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

const TabsExampleComponent = () => {
  const [index, setIndex] = React.useState(0);
  return (
    <SafeAreaView style={{ flex: 1, paddingTop: 20 }}>
      <Tabs initialPage={0} onChangeTab={setIndex} selectedTab={index} mt="md">
        <TabList>
          <Tab name="first">
            {({ focused }) => (
              <Text color={focused ? 'red.500' : 'black'}>Tab 1</Text>
            )}
          </Tab>
          <Tab name="second">
            <Text>Tab 2</Text>
          </Tab>
          <Tab name="third">Tab 3</Tab>
        </TabList>
        <TabPanels>
          <TabPanel linkedTo="first" bg="red.800">
            <Text color="red.600">Content for the first tab</Text>
          </TabPanel>
          <TabPanel linkedTo="second" bg="gray.600">
            <Text>Content for the second tab</Text>
          </TabPanel>
          <TabPanel linkedTo="third" bg="yellow.400">
            <Text>Content for the third tab</Text>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </SafeAreaView>
  );
};

export default TabsExampleComponent;

This example illustrates the use of the Tabs component with customized tab labels and content, demonstrating its versatility and ease of integration into React Native projects.