A highly customizable on/off toggle switch component for React Native.
1. Install and import the switch component.
# Yarn
$ yarn add react-native-switch
# NPM
$ npm i react-native-switchimport { 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
Author: shahen94
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/shahen94/react-native-switch
License: MIT