nkrn-checkbox
Version:
````markdown # react-native-checkbox
1 lines • 2.39 kB
JavaScript
Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName="src\\Checkbox.js";var _slicedToArray=function(){function sliceIterator(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[typeof Symbol==="function"?Symbol.iterator:"@@iterator"](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"])_i["return"]();}finally{if(_d)throw _e;}}return _arr;}return function(arr,i){if(Array.isArray(arr)){return arr;}else if((typeof Symbol==="function"?Symbol.iterator:"@@iterator")in Object(arr)){return sliceIterator(arr,i);}else{throw new TypeError("Invalid attempt to destructure non-iterable instance");}};}();var _react=require("react");var _react2=_interopRequireDefault(_react);var _reactNative=require("react-native");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}var Checkbox=function Checkbox(_ref){var label=_ref.label,_ref$checked=_ref.checked,checked=_ref$checked===undefined?false:_ref$checked,onChange=_ref.onChange,_ref$size=_ref.size,size=_ref$size===undefined?24:_ref$size,_ref$color=_ref.color,color=_ref$color===undefined?"#007BFF":_ref$color;var _useState=(0,_react.useState)(checked),_useState2=_slicedToArray(_useState,2),isChecked=_useState2[0],setIsChecked=_useState2[1];var toggleCheckbox=function toggleCheckbox(){setIsChecked(!isChecked);if(onChange)onChange(!isChecked);};return _react2.default.createElement(_reactNative.TouchableOpacity,{style:styles.container,onPress:toggleCheckbox,__source:{fileName:_jsxFileName,lineNumber:19}},_react2.default.createElement(_reactNative.View,{style:[styles.checkbox,{width:size,height:size,borderColor:color,backgroundColor:isChecked?color:"transparent"}],__source:{fileName:_jsxFileName,lineNumber:20}},isChecked&&_react2.default.createElement(_reactNative.Text,{style:styles.tick,__source:{fileName:_jsxFileName,lineNumber:31}},"\u2713")),label&&_react2.default.createElement(_reactNative.Text,{style:styles.label,__source:{fileName:_jsxFileName,lineNumber:33}},label));};var styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",alignItems:"center"},checkbox:{borderWidth:2,borderRadius:6,justifyContent:"center",alignItems:"center"},tick:{color:"white",fontSize:16},label:{marginLeft:8,fontSize:16,color:"#333"}});exports.default=Checkbox;