linear-segmented-tab

A React Native segmented tab component.

Installation

npm install linear-segmented-tab

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LSegmentedTab from 'your-library-name';

const App = () => {
  const tabs = [
    { title: 'Tab 1' },
    { title: 'Tab 2' },
    { title: 'Tab 3' }
  ];

  const handleTabChange = (index) => {
    console.log(`Selected tab index: ${index}`);
  };

  return (
    <View style={styles.container}>
      <LSegmentedTab
        tabs={tabs}
        initialIndex={0}
        onChange={handleTabChange}
        spaceEvenly
        pH={20}
        shadow
        gap={25}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Props

• tabs: Array of tab objects. Each object should have a title property. Optionally, you can include renderScene to render custom content for each tab.
• initialIndex: (Optional) The index of the initially selected tab. Default is 0.
• onChange: (Optional) Callback function that is called when the tab changes. Receives the new tab index as an argument.
• spaceEvenly: (Optional) If true, tabs will be spaced evenly within the container.
• headerStyle: (Optional) Custom styles for the header container.
• pH: (Optional) Horizontal padding for the container. Default is 20.
• shadow: (Optional) If true, the header container will have a shadow.
• gap: (Optional) The gap between tabs. Default is 25.

Contributing

If you want to contribute to the development of linear-segmented-tab, please fork the repository and submit a pull request. For any issues or feature requests, please create an issue in the repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgements

• React Native for providing the base framework.
• The community for providing inspiration and feedback.