https://github.com/shahen94/react-native-switch

Customisable switch component for RN
https://github.com/shahen94/react-native-switch

react react-native switch

Last synced: 14 days ago
JSON representation

Customisable switch component for RN

• Host: GitHub
• URL: https://github.com/shahen94/react-native-switch
• Owner: shahen94
• License: mit
• Created: 2016-10-25T20:06:05.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-04-17T15:25:18.000Z (over 1 year ago)
• Last Synced: 2024-10-11T22:01:26.405Z (about 1 month ago)
• Topics: react, react-native, switch
• Language: JavaScript
• Size: 72.3 KB
• Stars: 295
• Watchers: 9
• Forks: 173
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-switch

Customisable switch component for RN and React Native Web

### Installation

```sh

$ npm install --save react-native-switch

```

or

```sh

yarn add react-native-switch

```

### Usage

```javascript

import { Switch } from 'react-native-switch';

export const App = () => (

   console.log(val)}

    disabled={false}

    activeText={'On'}

    inActiveText={'Off'}

    circleSize={30}

    barHeight={1}

    circleBorderWidth={3}

    backgroundActive={'green'}

    backgroundInactive={'gray'}

    circleActiveColor={'#30a566'}

    circleInActiveColor={'#000000'}

    renderInsideCircle={() => } // 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

![switch](https://cloud.githubusercontent.com/assets/13334788/19770557/c1d935ee-9c70-11e6-931e-8812fbe62774.gif)

##

If this project was helpful to you, please