react-native-ui-lib/src/components/card/CardImage.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import _pt from "prop-types";
import React, { PureComponent } from 'react';
import { View, StyleSheet } from 'react-native';
import Image from "../image";
import * as CardPresenter from "./CardPresenter";
import asCardChild from "./asCardChild";

/**
 * @description: Card.Image, part of the Card component belongs inside a Card (better be a direct child)
 * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CardsScreen.tsx
 */
class CardImage extends PureComponent {
  static propTypes = {
    /**
       * Image width
       */
    width: _pt.oneOfType([_pt.number, _pt.string]),

    /**
       * Image height
       */
    height: _pt.oneOfType([_pt.number, _pt.string]),

    /**
       * The Image position which determines the appropriate flex-ness of the image and border radius (for Android)
       * this prop derived automatically from Card parent component if it rendered as a direct child of the
       * Card component
       */
    position: _pt.arrayOf(_pt.string)
  };
  static displayName = 'Card.Image';

  constructor(props) {
    super(props);
    this.styles = createStyles(props);
  }

  render() {
    const {
      source,
      style,
      testID,
      overlayType,
      context: {
        borderStyle
      }
    } = this.props;

    if (source) {
      return <View style={[this.styles.container, borderStyle, style]}>
          <Image testID={testID} source={source} style={[this.styles.image]} overlayType={overlayType} />
        </View>;
    }

    return null;
  }

}

function createStyles({
  width,
  height,
  context: {
    position
  }
}) {
  const {
    top,
    left,
    right,
    bottom
  } = CardPresenter.extractPositionValues(position);
  return StyleSheet.create({
    container: {
      height: left || right ? undefined : height,
      width: top || bottom ? undefined : width,
      overflow: 'hidden'
    },
    image: {
      width: undefined,
      height: undefined,
      flex: 1,
      resizeMode: 'cover'
    }
  });
}

export default asCardChild(CardImage);