A Checkbox control for ReactNative using ART

Checkbox.js

import React from 'react';
import { ART, TouchableOpacity, Text } from 'react-native';

/**
 * 
 * Example usage below
 * 
 export default class CheckboxDemo extends React.Component {
  state = {
    checked : true
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Checkbox that can toggle</Text>
        <CheckBox
          title='Click Here'
          checked={this.state.checked} 
          onPress={v => this.setState({checked : !this.state.checked})}

          //Optional properties
          style={{padding : 10}}
          size={15}
          textStyles={{color: "blue", paddingLeft: 5}}
          color = '#02A1B8'
          />
      </View>
    );
  }
} 
 */
export default function  CheckBox({checked = true, color = '#02A1B8', size = 15, title, style, textStyles = {paddingLeft : 5},...rest}) {
    const Shape = ART.Shape;
    const Group = ART.Group;
    const Surface = ART.Surface;
    const d = new ART.Path()
      .moveTo(1,1)
      .lineTo(size-1, 1)
      .lineTo(size-1, size-1)
      .lineTo(1, size-1)
      .close();
    const tick = new ART.Path()
      .moveTo(5 * size / 20, 11 * size / 20)
      .lineTo(8 * size / 20, 14 * size / 20)
      .lineTo(15 * size / 20, 7 * size / 20)
    return <TouchableOpacity style={{...style, flexDirection : 'row', alignItems: 'center'}} {...rest}>
      <Surface width={size} height={size}>
      <Group>
        <Shape
        d = {d}
        stroke = {color}
        strokeWidth = '2'
        ></Shape>
        {checked && 
          <Shape
          d = {tick}
          stroke = {color}
          strokeWidth = '2'
          ></Shape>
        }
      </Group>
    </Surface>
    <Text style={textStyles}>{title}</Text>
    </TouchableOpacity>
}