npm package: @saz10/react-native-toggle-switch
Description: A react native toggle switch with customisable styling
Author: saz10
Latest version: 1.0.1

# 🔘 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
```
<div style="display: flex; gap: 60px; padding-left:40px;">
  <img src="assets/video1.gif" alt="Toggle switch dark" width="60px" height="35px margin-right:15px"/>
  <img src="assets/video2.gif" alt="Toggle switch light" width="60px" height="35px"/>
</div>
<!-- <br> -->

## 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={() => {}}
/>
```
<div style="display: flex;  gap: 60px; padding-left:40px;">
  <img src="assets/image1.jpeg" alt="Customized background toggle switch" width="60px" height="35px margin-right:15px" />
  <img src="assets/image2.jpeg" alt="Customized toggle switch button" width="60px" height="35px"/>
</div>

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)