react-native-animated-tab v1.0.3

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

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.