https://github.com/mmusaib/react-native-toggle-input

Customized toggle button input for react native and expo
https://github.com/mmusaib/react-native-toggle-input

android easy-toggle-android easy-toggle-ios expo expo-toggle expo-toggle-button expo-toggle-switch ios ios-toggle-button ios-toggle-switch react react-native react-native-custom-toggle-button react-native-toggle react-native-toggle-button react-native-toggle-switch web

Last synced: 12 months ago
JSON representation

Customized toggle button input for react native and expo

• Host: GitHub
• URL: https://github.com/mmusaib/react-native-toggle-input
• Owner: mmusaib
• License: mit
• Created: 2022-08-31T08:18:56.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-18T16:02:49.000Z (over 1 year ago)
• Last Synced: 2025-04-21T00:35:43.471Z (12 months ago)
• Topics: android, easy-toggle-android, easy-toggle-ios, expo, expo-toggle, expo-toggle-button, expo-toggle-switch, ios, ios-toggle-button, ios-toggle-switch, react, react-native, react-native-custom-toggle-button, react-native-toggle, react-native-toggle-button, react-native-toggle-switch, web
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-toggle-input
• Size: 28.3 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          
|                          | |  |   |   |

| --------------------------------------- | -------- | ---------- |---------- |---------- |

| ![NPM VERSION](https://img.shields.io/npm/v/react-native-toggle-input?style=for-the-badge) | ![NPM WEEKLY DOWNLOADS](https://img.shields.io/npm/dw/react-native-toggle-input?color=%232CA215&label=WEEKLY%20DOWNLOADS&style=for-the-badge) | ![GITHUB STAR](https://img.shields.io/github/stars/mmusaib/react-native-toggle-input?label=Give%20Us%20A%20Star&style=for-the-badge) | ![YOUTUBE VIEWS](https://img.shields.io/youtube/channel/views/UCSwIR2KBHiqiProH3Me8IZQ?label=YOUTUBE%20VIEWS&style=for-the-badge) | ![NPM LIFETIME DOWNLOADS](https://img.shields.io/npm/dt/react-native-toggle-input?color=%232CA215&style=for-the-badge)






  🔛 React Native Custom Toggle Input





🟢 Customizable React Native Toggle Switch with easy to use props"











  

    

  

  


  Toggle Input Demo



Customizable and Easy to use toggle switch.


-   Use the color of your choice

-   Use bordered or filled toggle switch upon your choice

-   Works on all the platforms Android, Ios and Web in the same way

-   Zero dependencies

# Compatibility

|  iOS  | Android | Web | Expo |

--------|---------|-----|------|

|  ✅  |    ✅    | ✅ |  ✅  |

# 🔌 Installation

```sh

$ npm install react-native-toggle-input

```

OR

```sh

$ yarn add react-native-toggle-input

```

# 😎 Basic Usage

```jsx

import Toggle from 'react-native-toggle-input'

const App = () => {

  const [toggle, setToggle] = React.useState(false);

  

  return(

    

  )

};

```

For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-toggle-input)

# ⭐ Props

| Name | Type | Description |

| ---- | ---- | ----------- |

| color | String | Color of the toggle switch (Optional)

| size | Number | Size of the toggle switch (Optional)

| filled | boolean | If you want to use filled toggle switch set it to true (Optional)

| circleColor | String | Use the color you want to give to the circle inside swith (Required for filled switch)

| toggle | boolean | Default value of the toggle switch (Required)

| setToggle | Function | Pass the function that will be used to set toggle status (Required)

| onTrue | Function | Pass the function that will executed after the switch has been turned on

| onFalse | Function | Pass the function that will executed after the switch has been turned off

# 😎 Advanced Usage

```jsx

import Toggle from 'react-native-toggle-input'

const App = () => {

  const [toggle, setToggle] = React.useState(false);

  

  return(

    

  )

};

```



  

    

  

  


  Toggle Input Filled Demo



# ▶️ Watch Tutorial Video

[![Watch video](https://i.imgur.com/3ovVT8T.png)](https://youtu.be/_MemajXfkMw&t=15s)

For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-toggle-input)