🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Native component helps you create customizable, Material Design inspired toggle switches for your native apps.

Form React Native

Documentation

Customizable material switch for react-native

Content

Installation

npm install react-native-material-switch

Usage example

var Switch = require('react-native-material-switch');  var Application = React.createClass({   render: function() {     return (       <View>         <Switch onChangeState={(state)=>{alert(state)}}/>       </View>     );   } });

Properties

  • active (Boolean) - Initial switch state (default: false),
  • style (Object) - Styles for outer container (margins, ...),
  • inactiveButtonColor (String) - Button color (default: '#2196F3'),
  • inactiveButtonPressedColor (String) (default: '#42A5F5'),
  • activeButtonColor (String) (default: '#FAFAFA'),
  • activeButtonPressedColor (String) (default: '#F5F5F5'),
  • buttonShadow (Object) - Shadow style for button (default: { shadowColor: '#000', shadowOpacity: 0.5, shadowRadius: 1, shadowOffset: { height: 1, width: 0 }},
  • activeBackgroundColor (String) - (default: 'rgba(255,255,255,.5)'),
  • inactiveBackgroundColor (String) - (default: 'rgba(0,0,0,.5)'),
  • buttonRadius (Number) - (default: 15),
  • switchWidth (Number) - (default: 40),
  • switchHeight (Number) - (default: 20),
  • buttonContent (React.Component) - Custom inline content for switch button (default: null),
  • enableSlide (Boolean) - (default: true),
  • enableSlideDragging - (default: true) - Allows to change the position of the toggle by sliding. Does not work in react-native-web. If disabled, you can only toggle by pressing,
  • switchAnimationTime (Number) - Switch animation duration (default: 200),

Events

  • onActivate: This function is called when the switch is activated.
  • onDeactivate: This function is called when the switch is deactivated.
  • onChangeState: Sends the current state of switch.

Live example

git clone [email protected]:Recr0ns/react-native-material-switch.git cd react-native-material-switch/examples npm install open ios/switchExample.xcodeproj

Then Cmd+R to start the React Packager, build and run the project in the simulator.

License

MIT License

Questions?

Feel free to create an issue


You May Also Like