Customisable switch component

Customisable switch component for RN and React Native Web

$ npm install --save react-native-switch

or

yarn add react-native-switch Usage

import { Switch } from 'react-native-switch'; export const App = () => ( <Switch value={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'} 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 complete innerCircleStyle={{ alignItems: "center", justifyContent: "center" }} // style for inner animated circle for what you (may) be rendering inside the circle outerCircleStyle={{}} // style for outer animated circle renderActiveText={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 slider switchRightPx={2} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider switchWidthMultiplier={2} // multiplied by the `circleSize` prop to calculate total width of the Switch switchBorderRadius={30} // Sets the border Radius of the switch slider. If unset, it remains the circleSize. /> ) Switch

If this project was helpful to you, please