ā Customizable toggle button input for React Native and Expo
npm install react-native-toggle-input| | | | | |
| --------------------------------------- | -------- | ---------- |---------- |---------- |
| !NPM VERSION | !NPM WEEKLY DOWNLOADS | !GITHUB STAR | !YOUTUBE VIEWS | !NPM LIFETIME DOWNLOADS
src="https://i.imgur.com/TFqRrYs.gif"
title="Toggle Input Demo"
>
Toggle Input Demo
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)
ā 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(
color={"#4C956C"}
size={30}
filled={true}
circleColor={"white"}
toggle={toggle}
setToggle={setToggle}
/>
)
};
`
src="https://i.imgur.com/6lzF8ux.gif"
title="Toggle Input Filled Demo"
>
Toggle Input Filled Demo
ā¶ļø Watch Tutorial Video

For Live Demo` (Expo Snack)