A highly customizable on/off toggle switch component for React Native.

How to use it:

1. Install and import the switch component.

# Yarn
$ yarn add react-native-switch

# NPM
$ npm i react-native-switch
import { Switch } from 'react-native-switch';

2. Add the switch component to the app.

export const App = () => (
  <Switch />
)

3. Possible component props to customize the switch.

value: false,
onValueChange: () => null,
renderInsideCircle: () => null,
innerCircleStyle: {},
disabled: false,
activeText: "On",
inActiveText: "Off",
backgroundActive: "green",
backgroundInactive: "gray",
circleActiveColor: "white",
circleInActiveColor: "white",
circleBorderActiveColor: "rgb(100, 100, 100)",
circleBorderInactiveColor: "rgb(80, 80, 80)",
circleSize: 30,
barHeight: null,
circleBorderWidth: 1,
changeValueImmediately: true,
innerCircleStyle: { alignItems: "center", justifyContent: "center" },
outerCircleStyle: {},
renderActiveText: true,
renderInActiveText: true,
switchLeftPx: 2,
switchRightPx: 2,
switchWidthMultiplier: 2,
switchBorderRadius: null,
testID: null

Preview:

customizable-switch-component-for-react-native

Download Details:

Author: shahen94

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/shahen94/react-native-switch

License: MIT

Credit: Source link