react-native-ui-lib/typings/lists/gridList/GridListNewItem.js

[](https://travis-ci.org/wix/react-native-ui-lib) [](https://www.npmjs.com/package/react-native-ui-lib) [![NPM Down

import React from "react";
import { View, Text, Image } from "react-native";
import GridListItem from "./GridListItem";
import createStyles from "./style";
import { Colors } from "../../style";
/** THIS IS DEPRECATED */
/**
 * GridListNewItem component
 */
export default class GridListNewItem extends GridListItem {
    generateStyles() {
        this.styles = createStyles(this.props, customStyle);
    }
    renderTop() {
        return <View style={this.styles.topContainer}>{this.renderImage()}</View>;
    }
    renderBottom() {
        return (<View style={this.styles.bottomContainer}>{this.renderTitle()}</View>);
    }
    renderImage() {
        const { imageSource, disabled } = this.props;
        if (imageSource) {
            return (<View style={this.styles.imageContainer}>
          <Image style={[this.styles.image, disabled && this.styles.imageDisabled]} source={imageSource}/>
        </View>);
        }
        return null;
    }
    renderTitle() {
        const { title, disabled } = this.props;
        return (<Text style={[
            this.styles.titleText,
            disabled && this.styles.titleTextDisabled
        ]}>
        {title}
      </Text>);
    }
}
GridListNewItem.displayName = "IGNORE";
GridListNewItem.propTypes = {
    index: PropTypes.number.isRequired,
    imageSource: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
    imageSize: PropTypes.number,
    title: PropTypes.string,
    titleStyle: PropTypes.object,
    onPress: PropTypes.func,
    height: PropTypes.number
};
GridListNewItem.defaultProps = {
    ...GridListItem.defaultProps,
    imageSize: 46
};
const customStyle = {
    innerContainerDisabled: {
        borderColor: Colors.dark70,
        borderWidth: 1,
        backgroundColor: "transparent"
    },
    topContainer: {
        height: 157
    },
    bottomContainer: {
        alignItems: "center",
        flex: 1
    },
    titleTextDisabled: {
        color: Colors.dark60
    },
    imageContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    image: {
        flex: 0
    },
    imageDisabled: {
        tintColor: Colors.dark60
    }
};