3

Customized toggle button input for react native and expo

 2 years ago
source link: https://reactnativeexample.com/customized-toggle-button-input-for-react-native-and-expo/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

🔛 React Native Custom Toggle Input

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

68747470733a2f2f692e696d6775722e636f6d2f544671527259732e676966

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

$ 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)

😎 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}
    />
  )

};

68747470733a2f2f692e696d6775722e636f6d2f366c7a463875782e676966

Toggle Input Filled Demo

For Live Demo (Expo Snack)

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK