├── .github
    └── FUNDING.yml
├── .npmignore
├── README.md
├── RoundCheckbox.js
├── image.png
├── index.d.ts
└── package.json


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [vonovak]
2 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *.png
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React Native Round Checkbox
 2 | 
 3 | Pure js, lightweight checkbox styled as in iOS. Depends on `react-native-vector-icons`
 4 | 
 5 | ### install
 6 | 
 7 | `npm i --save rn-round-checkbox`
 8 | 
 9 | ### Usage
10 | 
11 | `import RoundCheckbox from 'rn-round-checkbox';`
12 | 
13 | ![Example 1](https://raw.githubusercontent.com/vonovak/react-native-round-checkbox/master/image.png 'Example 1')
14 | 
15 | ```
16 | <RoundCheckbox
17 |   size={24}
18 |   checked={this.state.isSelected}
19 |   onValueChange={(newValue) => {console.log(newValue)}}
20 | />
21 | ```
22 | 
23 | ### Props
24 | 
25 | | Property        | Type      | Default       | Description                                   |
26 | | --------------- | --------- | ------------- | --------------------------------------------- |
27 | | icon            | `string`  | ios-checkmark | name of icon (from Ionicons) in the checkbox  |
28 | | backgroundColor | `string`  | '#007AFF'     | background color when checked                 |
29 | | size            | `number`  | 24            | icon size                                     |
30 | | iconColor       | `string`  | 'white'       | icon color                                    |
31 | | borderColor     | `string`  | 'grey'        | border color                                  |
32 | | checked         | `boolean` | false         | checked                                       |
33 | | onValueChange   | function  |               | function called on change with new value      |
34 | | style           | object    | {}            | overwrite styles that are passed to the parent|
35 | 
36 | License: MIT
37 | 


--------------------------------------------------------------------------------
/RoundCheckbox.js:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import PropTypes from 'prop-types';
  3 | import { Animated, View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
  4 | import Icon from 'react-native-vector-icons/Ionicons';
  5 | 
  6 | const hitSlop = { top: 8, bottom: 8, left: 8, right: 8 };
  7 | 
  8 | export default class RoundCheckbox extends React.PureComponent {
  9 |   static propTypes = {
 10 |     onValueChange: PropTypes.func,
 11 |     icon: PropTypes.string,
 12 |     size: PropTypes.number,
 13 |     backgroundColor: PropTypes.string,
 14 |     iconColor: PropTypes.string,
 15 |     borderColor: PropTypes.string,
 16 |     checked: PropTypes.bool,
 17 |     style: PropTypes.object,
 18 |   };
 19 | 
 20 |   static defaultProps = {
 21 |     icon: 'ios-checkmark',
 22 |     size: 24,
 23 |     backgroundColor: '#007AFF',
 24 |     iconColor: 'white',
 25 |     borderColor: 'grey',
 26 |     checked: false,
 27 |     onValueChange: () => {},
 28 |   };
 29 | 
 30 |   constructor(props) {
 31 |     super(props);
 32 |     this.scaleAndOpacityOfCheckbox = new Animated.Value(props.checked ? 1 : 0);
 33 |   }
 34 | 
 35 |   componentDidUpdate(prevProps) {
 36 |     if (this.props.checked !== prevProps.checked) {
 37 |       Animated.timing(this.scaleAndOpacityOfCheckbox, {
 38 |         toValue: this.props.checked ? 1 : 0,
 39 |         duration: 300,
 40 |         useNativeDriver: true,
 41 |       }).start();
 42 |     }
 43 |   }
 44 | 
 45 |   render() {
 46 |     const { size, backgroundColor, borderColor, icon, iconColor, style } = this.props;
 47 |     const iconSize = parseInt(size * 1.3, 10);
 48 | 
 49 |     const bothStyles = {
 50 |       width: size,
 51 |       height: size,
 52 | 
 53 |       borderRadius: size / 2,
 54 |     };
 55 | 
 56 |     const checkedStyles = {
 57 |       backgroundColor,
 58 |       borderColor: backgroundColor,
 59 |       opacity: this.scaleAndOpacityOfCheckbox,
 60 |       transform: [{ scale: this.scaleAndOpacityOfCheckbox }],
 61 |       position: 'absolute',
 62 |       top: 0,
 63 |       left: 0,
 64 |     };
 65 | 
 66 |     return (
 67 |       <TouchableWithoutFeedback hitSlop={hitSlop} onPress={this._onPress} style={style}>
 68 |         <View style={styles.parentWrapper} shouldRasterizeIOS={true}>
 69 |           <Animated.View
 70 |             style={[
 71 |               {
 72 |                 borderColor,
 73 |                 backgroundColor: 'transparent',
 74 |                 opacity: this.scaleAndOpacityOfCheckbox.interpolate({
 75 |                   inputRange: [0, 0.9],
 76 |                   outputRange: [1, 0],
 77 |                 }),
 78 |               },
 79 |               bothStyles,
 80 |               styles.commonWrapperStyles,
 81 |             ]}
 82 |           />
 83 |           <Animated.View style={[checkedStyles, bothStyles, styles.commonWrapperStyles]}>
 84 |             <Icon
 85 |               name={icon}
 86 |               color={iconColor}
 87 |               style={{
 88 |                 height: iconSize,
 89 |                 fontSize: iconSize,
 90 |                 backgroundColor: 'transparent',
 91 |               }}
 92 |             />
 93 |           </Animated.View>
 94 |         </View>
 95 |       </TouchableWithoutFeedback>
 96 |     );
 97 |   }
 98 | 
 99 |   _onPress = () => {
100 |     this.props.onValueChange(!this.props.checked);
101 |   };
102 | }
103 | 
104 | const styles = StyleSheet.create({
105 |   parentWrapper: {
106 |     position: 'relative',
107 |   },
108 |   commonWrapperStyles: {
109 |     borderWidth: 1,
110 |     justifyContent: 'center',
111 |     alignItems: 'center',
112 |   },
113 | });
114 | 


--------------------------------------------------------------------------------
/image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vonovak/react-native-round-checkbox/c539e9fcccc511107256f6c5ebd4c982bdc75c4a/image.png


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { StyleProp, ViewStyle } from 'react-native';
 3 | 
 4 | interface RoundCheckboxProps {
 5 |     onValueChange?: () => void,
 6 |     icon?: string,
 7 |     size?: number,
 8 |     backgroundColor?: string,
 9 |     iconColor?: string,
10 |     borderColor?: string,
11 |     checked?: boolean,
12 |     style?: StyleProp<ViewStyle>;
13 | }
14 | export default class RoundCheckbox extends React.Component<RoundCheckboxProps, any> {
15 | }
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rn-round-checkbox",
 3 |   "version": "1.0.0",
 4 |   "peerDependencies": {
 5 |     "react-native-vector-icons": "*"
 6 |   },
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/vonovak/react-native-round-checkbox"
10 |   },
11 |   "main": "RoundCheckbox.js",
12 |   "type": "index.d.ts"
13 | }
14 | 


--------------------------------------------------------------------------------