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

Prop Name	Type	Default	Description
value	boolean	false	Current state of the switch (on/off).
disabled	boolean	false	If true, the switch will be unclickable.
trackWidth	number	95	Width of the track.
trackHeight	number	45	Height of the track.
circleSize	number	40	Diameter of the circle.
activeText	string	none	Text displayed when the switch is active.
inactiveText	string	none	Text displayed when the switch is inactive.
animationDuration	number	600	Duration of the switch animation in milliseconds. If 0 animations are disabled.
trackActiveColor	string	'#3dcc63'	Background color of the track when the switch is active.
trackInactiveColor	string	'#bdbdbd'	Background color of the track when the switch is inactive.
circleActiveColor	string	white	Color of the circle when the switch is active.
circleInactiveColor	string	white	Color of the circle when the switch is inactive.
circleOffset	number	0	Offset position of the circle.
textStyle	textStyle	none	Custom style for the active/inactive text.
trackStyle	ViewStyle	none	Custom style for the track.
enableDrag	boolean	false	If true, enables dragging the switch instead of tapping.
circleSlide	boolean	false	If true, enables sliding animation for the circle.
circleStyle	ViewStyle	none	Custom style for the circle.
onValueChange	function	none	Callback function called when the switch value changes.
renderCircleChild	React.JSX.Element | React.ReactNode	none	Custom content to render inside the circle.