🔘 react-native-toggle-switch

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

---

📦 Installation

``bash
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 (

onChangeSwitch={(isOn) => console.log('Switch toggled:', isOn)}
/>

);
}
`

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 | {} | Additional custom styles for the switch button. |
| containerStyle | StyleProp | {} | Additional custom styles for the switch container. |

Styling Tips

`
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