@petros-g/react-native-switch v0.1.8

React Native Switch

🚀 Fast, Smooth, and Performant Switch Component

• 🌍 Universal: Same UI for both Android & iOS.
• 🎬 Animated: Seamlessly animated transitions.
• ⚡ Fast: Optimized for speed and responsiveness.
• 💡 Smooth: Provides a smooth user experience.
• 🏋️ Performant: High-performance rendering.
• 🖱️ Gestures: Supports draggable interactions.
• 🧵 Runs on UI Thread: Does not block the JavaScript thread.

Try it now! Enhance your app with a powerful React Native Switch component!

Installation

To be able to run this screen you need to run the following:

yarn add @petros-g/react-native-switch react-native-gesture-handler react-native-reanimated

or

npm install @petros-g/react-native-switch react-native-gesture-handler react-native-reanimated

Basic Usage

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Switch from 'react-native-animated-switch';

const App = () => {
  const [switchValue, setSwitchValue] = useState(false);

  return (
    <View>
      <Switch
          value={switchValue}
          onValueChange={setSwitchValue}
          enableDrag
          trackWidth={50}
          trackHeight={20}
          circleSize={25}
          circleOffset={3}
          circleActiveColor="white"
          trackActiveColor="#42adff"
          animationDuration={200}
        />
      <Text>The switch is {switchValue ? "On" : "Off"}</Text>
    </View>
  );
};

export default App;

Props