Nine Pedestrians Mesmerized
Wondering what’s next for npm?Check out our public roadmap! »

@5stones/react-native-switch
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

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

If this project was helpful to you, please Buy Me A Coffee

Install

npm i @5stones/react-native-switch

DownloadsWeekly Downloads

37

Version

2.0.0

License

MIT

Unpacked Size

13.3 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar