Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

15 St Margarets, NY 10033
(+381) 11 123 4567



Customizable Switch Component For React Native

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



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

Previous Next
Test Caption
Test Description goes like this