react-native-switch

Customisable switch component for RN and React Native Web

Installation

$ npm install --save react-native-switch

or

yarn add react-native-switch

Usage

import{Switch}from'react-native-switch';exportconstApp=()=>(<Switchvalue={true}onValueChange={(val)=>console.log(val)}disabled={false}activeText={'On'}inActiveText={'Off'}circleSize={30}barHeight={1}circleBorderWidth={3}backgroundActive={'green'}backgroundInactive={'gray'}circleActiveColor={'#30a566'}circleInActiveColor={'#000000'}changeValueImmediately={true}renderInsideCircle={()=><CustomComponent/>}// custom component to render inside the Switch circle (Text, Image, etc.)changeValueImmediately={true}// if rendering inside circle, change state immediately or wait for animation to completeinnerCircleStyle={{alignItems: "center",justifyContent: "center"}}// style for inner animated circle for what you (may) be rendering inside the circleouterCircleStyle={{}}// style for outer animated circlerenderActiveText={false}renderInActiveText={false}switchLeftPx={2}// denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the sliderswitchRightPx={2}// denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the sliderswitchWidthMultiplier={2}// multipled by the `circleSize` prop to calculate total width of the SwitchswitchBorderRadius={30}// Sets the border Radius of the switch slider. If unset, it remains the circleSize./>)

Switch