react-native-animated-tab

A React Native component for creating an animated tab interface with customizable styles and animations.

• Description: A React Native component for creating an animated tab interface.

Installation

To install the package, use npm or yarn:

Using npm

npm install react-native-animated-tab

Using yarn

yarn add react-native-animated-tab

Usage

To use the Tab component in your React Native project, follow these steps:

Import the Component

import Tab from 'react-native-animated-tab';

Example

Here's a basic example of how to use the Tab component:

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import Tab from "react-native-animated-tab";

const App = () => {
  const [selectedOption, setSelectedOption] = useState("Option 1");
  const options = ["Option 1", "Option 2", "Option 3"];

  return (
    <View style={styles.container}>
      <Tab
        options={options}
        animationType="spring"
        activeLabelColor="#fff"
        inactiveLabelColor="teal"
        activeBackgroundColor="teal"
        selectedOption={selectedOption}
        onOptionPress={setSelectedOption}
        springConfig={{damping: 18, stiffness: 150}}
        containerStyle={{marginVertical: 30, backgroundColor: '#fff'}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#fff",
    justifyContent: "center",
  },
});

export default App;

Demo

Check out the demo of the component in action:

Ios

Android

Props

Prop	Type	Default	Description
options	Array	N/A	Array of tab options to display.
selectedOption	String	N/A	Currently selected tab option.
onOptionPress	Function	N/A	Callback function when a tab option is pressed.
height	Number	54	Height of the tab component.
borderRadius	Number	9	Border radius for the tab component.
activeLabelColor	String	"black"	Text color for the active label.
inactiveLabelColor	String	"gray"	Text color for the inactive labels.
activeBackgroundColor	String	"white"	Background color for the active tab.
inactiveBackgroundColor	String	"lightgray"	Background color for inactive tabs.

License

This project is licensed under the ISC License.

Contact

If you have any questions or issues, please open an issue on the GitHub repository or contact the author directly.