rollingswitch

React Native Rolling Switch

A beautifully animated switch component for React Native with two stylish variants:

• Standard Rolling Switch - with smooth 360° rotation and customizable text
• Sun/Moon Rolling Switch - elegant day/night toggle with atmospheric effects

Installation

npm install rollingswitch
# or
yarn add rollingswitch

This package requires react-native-reanimated version 2 or higher:

npm install react-native-reanimated react-native-gesture-handler
# or
yarn add react-native-reanimated react-native-gesture-handler

Follow the Reanimated installation instructions to complete the setup.

Usage

Standard Rolling Switch

A switch that rotates while toggling, with customizable ON/OFF text:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { RollingSwitch } from 'rollingswitch';

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

  return (
    <View style={styles.container}>
      <RollingSwitch
        value={isEnabled}
        onValueChange={(value) => setIsEnabled(value)}
        onColor="#4CAF50"
        offColor="#607D8B"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Sun/Moon Switch

A switch that transforms between sun and moon icons, perfect for light/dark mode toggles:

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { RollingMoonSwitch } from 'rollingswitch';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  return (
    <View style={styles.container}>
      <RollingMoonSwitch
        value={isDarkMode}
        onValueChange={(value) => setIsDarkMode(value)}
        dayColor="#87CEEB"
        nightColor="#1a237e"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Props

RollingSwitch Props

Prop	Type	Default	Description
value	boolean	false	The current state of the switch
onValueChange	function	-	Callback when the value changes
containerStyle	object	{}	Additional styles for the container
ballStyle	object	{}	Additional styles for the rolling ball
onColor	string	'#4CAF50'	Background color when switch is ON
offColor	string	'#607D8B'	Background color when switch is OFF
onTextColor	string	'white'	Text color for ON label
offTextColor	string	'white'	Text color for OFF label
inactiveTextOpacity	number	0.4	Opacity for inactive text
onText	string	'ON'	Text shown when switch is ON
offText	string	'OFF'	Text shown when switch is OFF
indicatorColor	string	'#E53935'	Color of the rotation indicator
disabled	boolean	false	Disables the switch when true

RollingMoonSwitch Props

Prop	Type	Default	Description
value	boolean	false	The current state of the switch
onValueChange	function	-	Callback when the value changes
containerStyle	object	{}	Additional styles for the container
ballStyle	object	{}	Additional styles for the rolling ball
dayColor	string	'#87CEEB'	Background color for day mode (OFF)
nightColor	string	'#1a237e'	Background color for night mode (ON)
disabled	boolean	false	Disables the switch when true

Features

Standard Switch

• Smooth 360° rotation when toggling
• Clockwise rotation when turning ON, counter-clockwise when turning OFF
• Customizable ON/OFF text labels
• Visible rotation indicator
• Fully customizable colors

Moon/Sun Switch

• Beautiful animated transition between Sun and Moon
• Dynamic background elements (stars at night, clouds during day)
• Realistic sun with radial glow effect
• Detailed moon with craters
• Perfect for dark/light theme toggles

Examples

Custom Styled Standard Switch

<RollingSwitch
  value={isEnabled}
  onValueChange={setIsEnabled}
  onColor="#9C27B0"
  offColor="#455A64"
  onText="YES"
  offText="NO"
  onTextColor="#E1BEE7"
  offTextColor="#CFD8DC"
  indicatorColor="#FF4081"
  containerStyle={{
    width: 120,
    height: 60,
    borderRadius: 30,
  }}
  ballStyle={{
    width: 50,
    height: 50,
    borderRadius: 25,
  }}
/>

Custom Styled Moon Switch

<RollingMoonSwitch
  value={isDarkMode}
  onValueChange={setIsDarkMode}
  dayColor="#FFB74D"  // Sunset orange
  nightColor="#3F51B5" // Deep blue
  containerStyle={{
    width: 120,
    height: 60,
    borderRadius: 30,
  }}
/>

How it Works

The RollingSwitch library uses React Native Reanimated for smooth animations:

• RollingSwitch: Uses useAnimatedStyle, withSpring and withTiming to create fluid transitions. When toggled, the ball moves horizontally and rotates 360 degrees in the appropriate direction.

• RollingMoonSwitch: Animates between sun and moon states with beautifully designed elements. The background changes color while celestial elements (stars/clouds) fade in and out.

License

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

Credits

Created by KunalPrajapati