├── .npmignore ├── .gitignore ├── example.png ├── index.js ├── Styles.js ├── .eslintrc ├── LICENCE.md ├── package.json ├── Checkbox.js ├── CheckboxField.js └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | example/ 2 | node_modules/ 3 | .idea/ 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | .idea/ -------------------------------------------------------------------------------- /example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentsylo/react-native-checkbox-field/HEAD/example.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox'; 2 | import CheckboxField from './CheckboxField'; 3 | 4 | export default CheckboxField; 5 | export { 6 | Checkbox, 7 | CheckboxField, 8 | }; 9 | -------------------------------------------------------------------------------- /Styles.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Define the default style props used across both components 3 | */ 4 | export default { 5 | checkboxStyle: { 6 | width: 26, 7 | height: 26, 8 | borderWidth: 2, 9 | borderColor: '#ddd', 10 | borderRadius: 5, 11 | }, 12 | defaultColor: '#fff', 13 | selectedColor: '#247fd2', 14 | disabledColor: '#888', 15 | }; 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true 5 | }, 6 | "extends": [ 7 | "airbnb" 8 | ], 9 | "rules": { 10 | "import/extensions": "off", 11 | "import/no-extraneous-dependencies": "off", 12 | "import/no-unresolved": "off", 13 | "max-len": ["error", 200, 4], 14 | "no-use-before-define": "off", 15 | "react/jsx-filename-extension": "off", 16 | "react/prefer-stateless-function": "off" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /LICENCE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Vincent Lo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-checkbox-field", 3 | "version": "2.0.2", 4 | "description": "Checkbox field component for React Native", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/vincee48/react-native-checkbox-field.git" 9 | }, 10 | "keywords": [ 11 | "react-native", 12 | "checkbox", 13 | "checkbox-field", 14 | "react-component", 15 | "ios", 16 | "android" 17 | ], 18 | "scripts": { 19 | "lint": "eslint ./" 20 | }, 21 | "author": "Vincent Lo ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/vincee48/react-native-checkbox-field/issues" 25 | }, 26 | "homepage": "https://github.com/vincee48/react-native-checkbox-field#readme", 27 | "nativePackage": true, 28 | "peerDependencies": { 29 | "prop-types": "^15.6.0", 30 | "react": "*", 31 | "react-native": ">=0.26.1" 32 | }, 33 | "devDependencies": { 34 | "babel-eslint": "8.0.1", 35 | "eslint": "4.9.0", 36 | "eslint-config-airbnb": "16.1.0", 37 | "eslint-plugin-import": "2.8.0", 38 | "eslint-plugin-jsx-a11y": "6.0.2", 39 | "eslint-plugin-react": "7.4.0" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Checkbox.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { TouchableOpacity, StyleSheet } from 'react-native'; 4 | import Styles from './Styles'; 5 | 6 | export default class Checkbox extends Component { 7 | static propTypes = { 8 | onSelect: PropTypes.func.isRequired, 9 | children: PropTypes.element.isRequired, 10 | defaultColor: PropTypes.string, 11 | selectedColor: PropTypes.string, 12 | disabledColor: PropTypes.string, 13 | selected: PropTypes.bool, 14 | disabled: PropTypes.bool, 15 | checkboxStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), 16 | }; 17 | 18 | static defaultProps = { 19 | checkboxStyle: Styles.checkboxStyle, 20 | defaultColor: Styles.defaultColor, 21 | selectedColor: Styles.selectedColor, 22 | disabledColor: Styles.disabledColor, 23 | disabled: false, 24 | selected: false, 25 | }; 26 | 27 | render() { 28 | const { 29 | disabled, 30 | disabledColor, 31 | selected, 32 | selectedColor, 33 | defaultColor, 34 | onSelect, 35 | checkboxStyle, 36 | children, 37 | } = this.props; 38 | const baseColor = selected ? selectedColor : defaultColor; 39 | const backgroundColor = { 40 | backgroundColor: disabled ? disabledColor : baseColor, 41 | }; 42 | 43 | return ( 44 | 45 | {children} 46 | 47 | ); 48 | } 49 | } 50 | 51 | const styles = StyleSheet.create({ 52 | center: { 53 | justifyContent: 'center', 54 | alignItems: 'center', 55 | }, 56 | }); 57 | -------------------------------------------------------------------------------- /CheckboxField.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { View, Text, TouchableOpacity } from 'react-native'; 4 | import Styles from './Styles'; 5 | import Checkbox from './Checkbox'; 6 | 7 | export default class CheckboxField extends Component { 8 | static propTypes = { 9 | // CheckboxField 10 | label: PropTypes.string, 11 | containerStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), 12 | labelStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), 13 | labelSide: PropTypes.oneOf(['left', 'right']), 14 | 15 | // Checkbox 16 | defaultColor: PropTypes.string, 17 | selectedColor: PropTypes.string, 18 | disabledColor: PropTypes.string, 19 | selected: PropTypes.bool, 20 | onSelect: PropTypes.func.isRequired, 21 | checkboxStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]), 22 | children: PropTypes.element.isRequired, 23 | disabled: PropTypes.bool, 24 | }; 25 | 26 | static defaultProps = { 27 | containerStyle: { 28 | flex: 1, 29 | flexDirection: 'row', 30 | padding: 20, 31 | alignItems: 'center', 32 | }, 33 | label: null, 34 | labelStyle: { 35 | flex: 1, 36 | }, 37 | checkboxStyle: Styles.checkboxStyle, 38 | defaultColor: Styles.defaultColor, 39 | disabledColor: Styles.disabledColor, 40 | selectedColor: Styles.selectedColor, 41 | labelSide: 'left', 42 | disabled: false, 43 | selected: false, 44 | }; 45 | 46 | render() { 47 | const { 48 | onSelect, 49 | disabled, 50 | containerStyle, 51 | labelSide, 52 | labelStyle, 53 | label, 54 | selected, 55 | defaultColor, 56 | selectedColor, 57 | disabledColor, 58 | checkboxStyle, 59 | children, 60 | } = this.props; 61 | 62 | return ( 63 | 64 | 65 | { 66 | labelSide === 'left' ? {label} : null 67 | } 68 | 77 | {children} 78 | 79 | { 80 | labelSide === 'right' ? {label} : null 81 | } 82 | 83 | 84 | ); 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## React Native Checkbox Field 2 | 3 | ![React Native Checkbox Field](example.png?raw=true) 4 | 5 | React Native Checkbox Field is a configurable React Native component which works on both iOS and Android with minimal dependencies. 6 | 7 | - [Installation](#installation) 8 | - [Usage](#usage) 9 | - [Props](#props) 10 | 11 | ### Installation 12 | `npm install --save react-native-checkbox-field` 13 | 14 | ### Usage 15 | ```javascript 16 | import CheckboxField from 'react-native-checkbox-field'; // Field with label 17 | import { Checkbox } from 'react-native-checkbox-field'; // Checkbox only 18 | ``` 19 | 20 | ```javascript 21 | import React, { Component } from 'react'; 22 | import { View, Text } from 'react-native'; 23 | import CheckboxField from 'react-native-checkbox-field'; 24 | import Icon from 'react-native-vector-icons/FontAwesome'; 25 | 26 | export default class Form extends Component { 27 | state = { 28 | selected: false, 29 | }; 30 | 31 | selectCheckbox = () => { 32 | this.setState({ 33 | selected: !this.state.selected, 34 | }); 35 | }; 36 | 37 | render() { 38 | const { selected } = this.state; 39 | 40 | // Only onSelect prop is required 41 | return ( 42 | 48 | 49 | 50 | ) 51 | } 52 | } 53 | ``` 54 | 55 | ### Props 56 | #### CheckboxField 57 | - `label` (String) `null` - The label positioned next to the checkbox 58 | - `labelStyle` (Object) - The style of the text label 59 | ``` 60 | { 61 | flex: 1 62 | } 63 | ``` 64 | - `containerStyle` (Object) - The style of the container surrounding the label and checkbox 65 | ``` 66 | { 67 | flex: 1, 68 | flexDirection: 'row', 69 | padding: 20, 70 | alignItems: 'center' 71 | } 72 | ``` 73 | - `labelSide` (enum('left', 'right')) `left` - The side the label will be positioned with the checkbox. 74 | 75 | #### Checkbox 76 | - `onSelect` (Function) `null` - The function that is run when the checkbox is selected 77 | - `selected` (Boolean) `false` - The value representing the selected state 78 | - `disabled` (Boolean) `false` - Whether the checkbox can receive user interactions 79 | - `disabledColor` (String) `null` - The background color when the checkbox is disabled 80 | - `children` (React.Component) `null` - The component within the checkbox 81 | - `defaultColor` (String) `#fff` - The default color of the checkbox background 82 | - `selectedColor` (String) `#247fd2` - The selected color of the checkbox background 83 | - `checkboxStyle` (Object) 84 | ``` 85 | { 86 | borderWidth: 2, 87 | borderColor: '#ddd', 88 | borderRadius: 5 89 | } 90 | ``` 91 | --------------------------------------------------------------------------------