phodal/growth

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, Text, Image, TouchableHighlight } from 'react-native';
import AppStyle from '../../../theme/styles';

class MoreItem extends Component {
  static propTypes = {
    imageParentStyle: View.propTypes.style,
    image: PropTypes.oneOfType([
      PropTypes.shape({
        uri: PropTypes.string,
      }),
      // Opaque type returned by require('./image.jpg')
      PropTypes.number,
      // Multiple sources
      PropTypes.arrayOf(
        PropTypes.shape({
          uri: PropTypes.string,
          width: PropTypes.number,
          height: PropTypes.number,
        }))]),
    imageStyle: Image.propTypes.style,
    title: PropTypes.string.isRequired,
    titleColor: PropTypes.string,
    titleStyle: Text.propTypes.style,
    onclick: PropTypes.func,
    top: PropTypes.number,
  };

  static defaultProps = {
    imageParentStyle: AppStyle.discoverMoreItem,
    image: '',
    imageStyle: AppStyle.discoverMoreItemImage,
    title: '',
    titleColor: '#03a9f4',
    titleStyle: AppStyle.discoverMoreItemTitle,
    onclick: () => {},
    top: 0,
  };

  render = () => (
    <TouchableHighlight
      onPress={this.props.onclick}
      style={{ flex: 1, marginTop: this.props.top }}
    >
      <View style={this.props.imageParentStyle}>
        <Image source={this.props.image} style={this.props.imageStyle} >
          <View style={this.props.titleStyle}>
            <Text style={{ color: this.props.titleColor }}>{this.props.title}</Text>
          </View>
        </Image>
      </View>
    </TouchableHighlight>
  );
}
export default MoreItem;