UNPKG

922 BJavaScriptView Raw
1import React, {
2 PropTypes,
3} from 'react';
4
5import {
6 Text, View,
7} from 'react-native';
8
9function Checkbox({
10 checked,
11}) {
12 return (
13 <View style={Checkbox.Style[checked ? 'active' : 'normal']}>
14 {checked && (
15 <View style={Checkbox.Style.check} />
16 )}
17 </View>
18 );
19}
20
21Checkbox.propTypes = {
22 checked: PropTypes.bool,
23};
24
25Checkbox.defaultProps = {
26 checked: false,
27};
28
29Checkbox.Style = {
30 normal: {
31 width: 16,
32 height: 16,
33 borderRadius: 8,
34 borderWidth: 1,
35 borderColor: '#9c9c9c',
36 },
37 active: {
38 width: 16,
39 height: 16,
40 backgroundColor: '#fc5100',
41 borderRadius: 8,
42 alignItems: 'center',
43 justifyContent: 'center',
44 },
45 check: {
46 width: 9,
47 height: 6,
48 borderLeftWidth: 1,
49 borderBottomWidth: 1,
50 borderColor: '#fff',
51 transform: [
52 { translateY: -2 },
53 { rotate: '-44deg' },
54 ],
55 },
56};
57
58export default Checkbox;