@ecreeth/rn-ui/src/components/CheckBox/CheckBoxCheckMark.js

Highly customizable and theming components for React Native

import React, { PureComponent } from 'react';
import { View as RNView, Image as RNImage } from 'react-native';
import PropTypes from 'prop-types';

const checkedImageBase64String = `data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAAAXNSR0IArs4c6QAAAVlJREFUaAXt
l1sOgjAQRYn/fvjtI3GnjTGuy3X42greImMaoLRoQzvkNiklBdp7zqDRqmKjARqgARqgARqgARoY
MFDX9WZgWvcUoA7oL/SLbhInvQOF06adncs6T4EhlWqZvsNJJxFSj0AJnfHBrXwXcs9bKGS4oh9z
Z0m2f0SlbMVMsg3nWIhQc1hOsQcrlcLiHGtkrxQCrFODlgBlEOKGvk0FVwoUcjTtjuPfcFjD9zPp
s8vnaFJJ7K2D9W2lus3C7Xo3R07g2SKhBPInuOxQVj5CDFVLwOz4QI+uHO7NWyn3jUKYGLi9+8zQ
eVFQEjAC7ol7vHBFQv0LVzTURDj7H6ppKqCcsKHP3KsFKueLQsKHRgSPgbOAY82E9slyHYlDcPqg
xOSPcGVWSqBknAinA2oinC6oSDidUAE43VAeuGVAdeCWBSVwHGmABmiABmiABmiABhZh4A0bGoy8
G1WshwAAAABJRU5ErkJggg==
`.replace(/\n/g, '');

const propTypes = {
  checked: PropTypes.bool.isRequired,
  checkedImageSource: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.object,
  ]),
};
const defaultProps = {
  checkedImageSource: { uri: checkedImageBase64String },
};

class CheckBoxCheckMark extends PureComponent {
  render() {
    const {
      checked,
      checkedImageSource,
      ...restProps
    } = this.props;

    return (
      <RNView
        {...restProps}
      >
        { checked && (
          <RNImage
            style={{ width: '100%', height: '100%' }}
            source={checkedImageSource}
          />
        )}
      </RNView>
    );
  }
}

CheckBoxCheckMark.propTypes = propTypes;
CheckBoxCheckMark.defaultProps = defaultProps;

export default CheckBoxCheckMark;