🔘 react-native-toggle-switch

A customizable and lightweight React Native Toggle Switch component with flexible styling and smooth animations.

📦 Installation

npm install @saz10/react-native-toggle-switch
# or
yarn add @saz10/react-native-toggle-switch

Usage

import React from 'react';
import { View } from 'react-native';
import ToggleSwitch from '@saz10/react-native-toggle-switch';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ToggleSwitch
        onChangeSwitch={(isOn) => console.log('Switch toggled:', isOn)}
      />
    </View>
  );
}

Props

The following props can be used to customize the toggle switch: | Prop Name | Type | Default Value | Description | | -------------------- | ------------------------- | ------------- | ------------------------------------------------------------------------------------- | | onState | boolean | false | The initial ON/OFF state of the switch. | | onChangeSwitch | (isOn: boolean) => void | () => {} | Callback triggered whenever the switch is toggled. Receives the updated isOn state. | | isDisabled | boolean | false | Disables the switch if true. | | switchOnColor | string | '#1890FF' | Background color when the switch is ON. | | switchOffColor | string | '#CCCCCC' | Border color when the switch is OFF. | | switchColor | string | '#CCCCCC' | Color of the circular switch button. | | width | number | 60 | Width of the entire toggle switch container. | | buttonDim | number | 30 | Diameter of the circular switch button. | | switchStyle | StyleProp<ViewStyle> | {} | Additional custom styles for the switch button. | | containerStyle | StyleProp<ViewStyle> | {} | Additional custom styles for the switch container. |

Styling Tips

<ToggleSwitch
  onState={false}
  switchOnColor="#34D399"
  switchOffColor="#9CA3AF"
  switchStyle={{
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 3,
  }}
  containerStyle={{
    borderRadius: 30,
    padding: 2,
    backgroundColor: "#7221ff"
  }}
  onChangeSwitch={() => {}}
/>

License

MIT

Made with create-react-native-library