├── .gitignore ├── LICENSE ├── README.md ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 18 | .grunt 19 | 20 | # node-waf configuration 21 | .lock-wscript 22 | 23 | # Compiled binary addons (http://nodejs.org/api/addons.html) 24 | build/Release 25 | 26 | # Dependency directory 27 | # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git 28 | node_modules 29 | 30 | # Optional npm cache directory 31 | .npm 32 | 33 | # Optional REPL history 34 | .node_repl_history 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 ParamoshkinAndrew 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ReactNativeCircleCheckbox 2 | ========= 3 | 4 | Circle-style checkbox component for React Native. 5 | 6 | ## Installation 7 | ``` 8 | npm install react-native-circle-checkbox --save 9 | ``` 10 | ## Usage 11 | 12 | ```js 13 | import CircleCheckBox, {LABEL_POSITION} from 'react-native-circle-checkbox'; 14 | 15 | console.log('My state is: ', checked)} 18 | labelPosition={LABEL_POSITION.RIGHT} 19 | label="Checkbox example" 20 | /> 21 | ``` 22 | 23 | ## Preview 24 | 25 | ![alt tag](https://i.imgur.com/eWLb0Cp.gif "Preview") 26 | 27 | ## Available properties: 28 | 29 | - `checked` : initial state of checkbox. Default: `false` 30 | - `onToggle` : function that will be invoked by pressing to checkbox with checked property as argument. 31 | - `outerSize` : Diameter of outer circle. Minimum: `10`, default: `26` 32 | - `filterSize` : Diameter of underlayer circle. Minimum: `7`, default: `23` 33 | - `innerSize` : Diameter of flag. Minimum: `2`, default: `18` 34 | - `outerColor` : Color of outer circle. Default: `#FC9527` 35 | - `filterColor` : Color of underlayer circle. Default: `#FFF` 36 | - `innerColor` : Color of flag. Default: `#FC9527` 37 | - `label` : Checkbox label. Default: empty 38 | - `labelPosition` : Label rendering position. Default: `right`, may be 'right' or 'left'. For your convenience this package exports `LABEL_POSITION` object with two keys - `RIGHT` and `LEFT`. You can use it for `labelPosition` definition. 39 | - `styleCheckboxContainer`: Styles for checkbox container. 40 | - `styleLabel`: Styles for label. 41 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* 2 | ReactNativeCircleCheckbox 0.1.5 3 | https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox 4 | (c) 2016 Andrew Paramoshkin 5 | ReactNativeCircleCheckbox may be freely distributed under the MIT license. 6 | */ 7 | 8 | 'use strict'; 9 | 10 | import * as React from 'react'; 11 | import PropTypes from 'prop-types'; 12 | import {StyleSheet, Text, TouchableOpacity, View, ViewPropTypes} from 'react-native'; 13 | 14 | export const LABEL_POSITION = { 15 | RIGHT: 'right', 16 | LEFT: 'left' 17 | }; 18 | 19 | export default class CircleCheckBox extends React.Component { 20 | static propTypes = { 21 | checked: PropTypes.bool, 22 | label: PropTypes.string, 23 | outerSize: PropTypes.number, 24 | filterSize: PropTypes.number, 25 | innerSize: PropTypes.number, 26 | outerColor: PropTypes.string, 27 | filterColor: PropTypes.string, 28 | innerColor: PropTypes.string, 29 | onToggle: PropTypes.func.isRequired, 30 | labelPosition: PropTypes.oneOf([LABEL_POSITION.RIGHT, LABEL_POSITION.LEFT]), 31 | styleCheckboxContainer: ViewPropTypes.style, 32 | styleLabel: Text.propTypes.style, 33 | }; 34 | 35 | static defaultProps = { 36 | checked: false, 37 | outerSize: 26, 38 | filterSize: 23, 39 | innerSize: 18, 40 | outerColor: '#FC9527', 41 | filterColor: '#FFF', 42 | innerColor: '#FC9527', 43 | label: '', 44 | labelPosition: LABEL_POSITION.RIGHT, 45 | styleLabel: {} 46 | }; 47 | 48 | constructor(props) { 49 | super(props); 50 | const outerSize = (parseInt(props.outerSize) < 10 || isNaN(parseInt(props.outerSize))) ? 10 : parseInt(props.outerSize); 51 | const filterSize = (parseInt(props.filterSize) > outerSize + 3 || isNaN(parseInt(props.filterSize))) ? outerSize - 3 : parseInt(props.filterSize); 52 | const innerSize = (parseInt(props.innerSize) > filterSize + 5 || isNaN(parseInt(props.innerSize))) ? filterSize - 5 : parseInt(props.innerSize); 53 | 54 | const customStyle = StyleSheet.create({ 55 | _circleOuterStyle: { 56 | width: outerSize, 57 | height: outerSize, 58 | borderRadius: outerSize / 2, 59 | backgroundColor: props.outerColor 60 | }, 61 | _circleFilterStyle: { 62 | width: filterSize, 63 | height: filterSize, 64 | borderRadius: filterSize / 2, 65 | backgroundColor: props.filterColor 66 | }, 67 | _circleInnerStyle: { 68 | width: innerSize, 69 | height: innerSize, 70 | borderRadius: innerSize / 2, 71 | backgroundColor: props.innerColor 72 | } 73 | }); 74 | 75 | this.state = { 76 | customStyle: customStyle 77 | } 78 | } 79 | 80 | render() { 81 | return ( 82 | 83 | 84 | {this._renderLabel(LABEL_POSITION.LEFT)} 85 | 86 | 87 | {this._renderInner()} 88 | 89 | 90 | {this._renderLabel(LABEL_POSITION.RIGHT)} 91 | 92 | 93 | ); 94 | } 95 | 96 | _onToggle() { 97 | if (this.props.onToggle) { 98 | this.props.onToggle(!this.props.checked); 99 | } 100 | } 101 | 102 | _renderInner() { 103 | return this.props.checked ? () : (); 104 | } 105 | 106 | _renderLabel(position) { 107 | return ((this.props.label.length > 0) && (position === this.props.labelPosition)) 108 | ? {this.props.label} 109 | : 110 | } 111 | } 112 | 113 | const styles = StyleSheet.create({ 114 | checkBoxContainer: { 115 | flexDirection: 'row', 116 | alignItems: 'center' 117 | }, 118 | alignStyle: { 119 | justifyContent: 'center', 120 | alignItems: 'center' 121 | }, 122 | checkBoxLabel: { 123 | marginLeft: 5, 124 | marginRight: 5 125 | } 126 | }); 127 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-circle-checkbox", 3 | "version": "0.1.5", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "asap": { 8 | "version": "2.0.6", 9 | "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", 10 | "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" 11 | }, 12 | "core-js": { 13 | "version": "1.2.7", 14 | "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz", 15 | "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=" 16 | }, 17 | "encoding": { 18 | "version": "0.1.12", 19 | "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", 20 | "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", 21 | "requires": { 22 | "iconv-lite": "0.4.21" 23 | } 24 | }, 25 | "fbjs": { 26 | "version": "0.8.16", 27 | "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz", 28 | "integrity": "sha1-XmdDL1UNxBtXK/VYR7ispk5TN9s=", 29 | "requires": { 30 | "core-js": "1.2.7", 31 | "isomorphic-fetch": "2.2.1", 32 | "loose-envify": "1.3.1", 33 | "object-assign": "4.1.1", 34 | "promise": "7.3.1", 35 | "setimmediate": "1.0.5", 36 | "ua-parser-js": "0.7.17" 37 | } 38 | }, 39 | "iconv-lite": { 40 | "version": "0.4.21", 41 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz", 42 | "integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==", 43 | "requires": { 44 | "safer-buffer": "2.1.2" 45 | } 46 | }, 47 | "is-stream": { 48 | "version": "1.1.0", 49 | "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", 50 | "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" 51 | }, 52 | "isomorphic-fetch": { 53 | "version": "2.2.1", 54 | "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz", 55 | "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=", 56 | "requires": { 57 | "node-fetch": "1.7.3", 58 | "whatwg-fetch": "2.0.4" 59 | } 60 | }, 61 | "js-tokens": { 62 | "version": "3.0.2", 63 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", 64 | "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" 65 | }, 66 | "loose-envify": { 67 | "version": "1.3.1", 68 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz", 69 | "integrity": "sha1-0aitM/qc4OcT1l/dCsi3SNR4yEg=", 70 | "requires": { 71 | "js-tokens": "3.0.2" 72 | } 73 | }, 74 | "node-fetch": { 75 | "version": "1.7.3", 76 | "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", 77 | "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==", 78 | "requires": { 79 | "encoding": "0.1.12", 80 | "is-stream": "1.1.0" 81 | } 82 | }, 83 | "object-assign": { 84 | "version": "4.1.1", 85 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 86 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 87 | }, 88 | "promise": { 89 | "version": "7.3.1", 90 | "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", 91 | "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", 92 | "requires": { 93 | "asap": "2.0.6" 94 | } 95 | }, 96 | "prop-types": { 97 | "version": "15.6.1", 98 | "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz", 99 | "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==", 100 | "requires": { 101 | "fbjs": "0.8.16", 102 | "loose-envify": "1.3.1", 103 | "object-assign": "4.1.1" 104 | } 105 | }, 106 | "safer-buffer": { 107 | "version": "2.1.2", 108 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 109 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 110 | }, 111 | "setimmediate": { 112 | "version": "1.0.5", 113 | "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz", 114 | "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=" 115 | }, 116 | "ua-parser-js": { 117 | "version": "0.7.17", 118 | "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.17.tgz", 119 | "integrity": "sha512-uRdSdu1oA1rncCQL7sCj8vSyZkgtL7faaw9Tc9rZ3mGgraQ7+Pdx7w5mnOSF3gw9ZNG6oc+KXfkon3bKuROm0g==" 120 | }, 121 | "whatwg-fetch": { 122 | "version": "2.0.4", 123 | "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", 124 | "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" 125 | } 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-circle-checkbox", 3 | "version": "0.1.6", 4 | "description": "Circle checkbox component for React Native", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "react", 16 | "native", 17 | "facebook", 18 | "component", 19 | "checkbox", 20 | "ios" 21 | ], 22 | "author": "Andrew Paramoshkin ", 23 | "licenses": [ 24 | { 25 | "type": "MIT", 26 | "url": "https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox/blob/master/LICENSE" 27 | } 28 | ], 29 | "bugs": { 30 | "url": "https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox/issues" 31 | }, 32 | "homepage": "https://github.com/paramoshkinandrew/ReactNativeCircleCheckbox", 33 | "dependencies": { 34 | "prop-types": "latest" 35 | }, 36 | "peerDependencies": { 37 | "react": ">=16.2.0", 38 | "react-native": ">=0.52.1" 39 | } 40 | } 41 | --------------------------------------------------------------------------------