react-native-switch-tab

react-native-switch-tab is a custom tab component for React Native applications. It provides a simple and customizable way to implement tab navigation in your app. Here's a breakdown of its features and structure

1.MainTab Component: This component serves as the main container for the tab navigation.

2.Props:tabs: An array of objects representing each tab. Each object should have a title and content property. The title is the display text of the tab, and the content is the component/content to be displayed when the tab is active.

3.activeTabStyle: Style object for the active tab.

4.inactiveTabStyle: Style object for the inactive tabs.

5.activeTextStyle: Style object for the text of the active tab.

6.inactiveTextStyle: Style object for the text of the inactive tabs.

7.tabContentStyle: Style object for the container of the tab content.

9.State Management:activeTab: This state variable keeps track of the currently active tab index.

10.Rendering Tabs:The renderTab function maps through the tabs array and generates a TouchableOpacity component for each tab.the isActive variable determines whether the current tab being rendered is active or not, based on its index.

11.Handling Tab Press:The handleTabPress function updates the activeTab state when a tab is pressed.

12.Styling:The component provides default styles for the container, tabs container, individual tabs, and tab content. These styles can be customized by passing corresponding style objects as props.

13.Usage:You can use this component by importing it and passing the necessary props, including the array of tabs with their content.

Overall, react-native-switch-tab simplifies the implementation of tab navigation in React Native apps while offering flexibility in customization through its props and styling options.

Installation

Install react-native-switch-tab

import React from "react";

import { View, Text } from "react-native";

import { SwitchTab } from 'react-native-switch-tab';

const Tab1Content = () => (
  
  <View>

    <Text>Content of Tab 1</Text>
  </View>
);

const Tab2Content = () => (

  <View>

    <Text>Content of Tab 2</Text>
  </View>

);


const tabs = [
  { title: "Tab 1", content: <Tab1Content /> },

  { title: "Tab 2", content: <Tab2Content /> },

];

const App = () => {

  return (

    <SwitchTab
      tabs={tabs}
      activeTabStyle={{ borderBottomWidth: 3, borderBottomColor: "blue" }}
      inactiveTabStyle={{ borderBottomWidth: 0 }}
      activeTextStyle={{ color: "blue", fontWeight: "bold" }}
      inactiveTextStyle={{ color: "black" }}
      tabContentStyle={{ backgroundColor: "white" }}
    />
  );
};

export default App;