1.0.8 • Published 8 months ago

@meksiabdou/react-native-switch v1.0.8

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

@meksiabdou/react-native-switch

Customisable switch component for React Native

bundlephobia downloads npm license Known Vulnerabilities

Watch the video

Requirements

Installation

npm install @meksiabdou/react-native-switch
yarn add @meksiabdou/react-native-switch

Usage

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import Switch from '@meksiabdou/react-native-switch';

export default function App() {
  const [value, setValue] = React.useState(false);
  return (
    <View style={styles.container}>
      <View>
        <Switch
          value={value}
          width={70}
          onValueChange={() => setValue(!value)}
          activeText="ON"
          inActiveText="OFF"
          circleSize={24}
          textStyle={{ fontSize: 13 }}
          disabled={false}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ccc',
  },
});

Switch Props

nametypedefault
widthnumber100
valuebooleanfalse
onValueChangefunctionundefined
onAnimationEndfunctionundefined
disabledbooleanfalse
activeTextstringON
inActiveTextstringOFF
circleSizenumber30
switchBorderRadiusnumber30
switchPaddingRightnumber2
switchPaddingLeftnumber2
backgroundActivestring#249c00
backgroundInActivestring#333
circleActiveColorstring#fff
circleInActiveColorstring#fff
textStyleTextStyleundefined
switchStyleViewStyleundefined
circleChildrenActiveReactElementundefined
circleChildrenInActiveReactElementundefined

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT


Made with create-react-native-library

1.0.8

8 months ago

1.0.7

8 months ago

1.0.6

9 months ago

1.0.5

1 year ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago