Skip to content

mmusaib/react-native-toggle-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NPM VERSION NPM WEEKLY DOWNLOADS GITHUB STAR YOUTUBE VIEWS NPM LIFETIME DOWNLOADS

🔛 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

$ npm install react-native-toggle-input

OR

$ yarn add react-native-toggle-input

😎 Basic Usage

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

const App = () => {

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

  return(
    <Toggle toggle={toggle} setToggle={setToggle} />
  )

};

For Live Demo (Expo Snack)

⭐ 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

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

const App = () => {

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

  return(
    <Toggle 
        color={"#4C956C"}
        size={30}
        filled={true}
        circleColor={"white"}
        toggle={toggle}
        setToggle={setToggle}
    />
  )

};


Toggle Input Filled Demo

▶️ Watch Tutorial Video

Watch video

For Live Demo (Expo Snack)