react-native-android-material-v3-switch v1.1.2

React Native Android Material v3 Switch

Overview

The React Native Android Material v3 Switch component provides a modern and customizable switch toggle for React Native applications, designed in accordance with Google's Material Design 3 guidelines. This package is specifically optimized for Android and includes a variety of features to enhance user experience.

Features

• Fully compliant with Material Design 3 specifications.
• Customizable colors for thumb and track.
• Smooth animations for toggle interactions.
• Supports dark mode for seamless UI transitions.
• Accessibility support for screen readers.
• Optimized for performance across Android devices.

Installation

To install the package, you can use either Yarn or npm:

Using Yarn

yarn add react-native-android-material-v3-switch

Using npm

npm install react-native-android-material-v3-switch

Demo

Usage

Here’s a simple example demonstrating how to use the Material V3 Switch in your React Native application:

import React from "react";
import { View, Text } from "react-native";
import MaterialV3Switch from "react-native-android-material-v3-switch";

const App = () => {
  const [isEnabled, setIsEnabled] = React.useState(false);

  const toggleSwitch = () => {
    setIsEnabled((previousState) => !previousState);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Switch is {isEnabled ? "ON" : "OFF"}</Text>
      <MaterialV3Switch
        value={isEnabled}
        onValueChange={toggleSwitch}
        switchColors={{
          activeHandle: "#6200EE",
          inactiveHandle: "#f4f3f4",
          disabledHandle: "#f4f3f4",
          activeTrack: "#81b0ff",
          inactiveTrack: "#767577",
          disabledTrack: "#767577",
          pressedShadow: "#6200EE",
          backgroundColor: "#f4f3f4",
        }}
        disabled={false}
      />
    </View>
  );
};

export default App;

Props

Accessibility

The switch component is designed with accessibility in mind, making it easy for screen reader users to understand the toggle's state and function.

Contributing

Contributions are currently limited to creators of this package only.

License

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