React Native Switch Menu

A customizable animated switch menu component for React Native.

Ekran.Kaydi.2024-12-01.14.46.51.mov

Installation

npm install react-native-switch-menu

or

yarn add react-native-switch-menu

Usage

import { SafeAreaView, Text, View } from "react-native";
import { SwitchMenu, SwitchMenuOption } from "react-native-switch-menu";
import { useState } from "react";

type TabOptions = "tab-1" | "tab-2";

export default function HomeScreen() {
  const [selectedOption, setSelectedOption] = useState<TabOptions>("tab-1");

  const options: SwitchMenuOption<TabOptions>[] = [
    { id: "tab-1", label: "Tab 1" },
    { id: "tab-2", label: "Tab 2" },
  ];

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.card}>
        <SwitchMenu
          options={options}
          defaultOption="tab-1"
          backgroundColor="#F6F6F6"
          onChange={setSelectedOption}
        />
        <Text>{selectedOption === "tab-1" ? "Tab 1" : "Tab 2"}</Text>
      </View>
    </SafeAreaView>
  );
}