UNPKG

react-native-ui-lib

Version:

UI Components Library for React Native ###### Lateset version support RN44

70 lines (62 loc) 1.93 kB
import React from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import Image from '../image'; import {BaseComponent} from '../../commons'; import * as CardPresenter from './CardPresenter'; /** * CardImage belongs inside the Card component */ export default class CardImage extends BaseComponent { static displayName = 'CardImage'; static propTypes = { /** * Image source, either remote source or local */ imageSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]), /** * Image width */ width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Image height */ height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), /** * Image position to determine the right flex-ness of the image and border radius (for Android) * this prop derived automatically from Card parent component */ position: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), testID: PropTypes.string, }; generateStyles() { this.styles = createStyles(this.props); } render() { const {imageSource, style, position} = this.props; const borderStyle = CardPresenter.generateBorderRadiusStyle({position}); if (imageSource) { return ( <View style={[this.styles.container, borderStyle, style]}> <Image source={imageSource} style={[this.styles.image, borderStyle]}/> </View> ); } return null; } } function createStyles({width, height, position}) { const {top, left, right, bottom} = CardPresenter.extractPositionValues(position); return StyleSheet.create({ container: { height: (left || right) ? undefined : height, width: (top || bottom) ? undefined : width, }, image: { width: null, height: null, flex: 1, resizeMode: 'cover', }, }); }