🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

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

Form React Native

Documentation

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';  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'}     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 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} // multipled 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

switch


You May Also Like