nexle-tvguide-lib/src/tvEPG/components/channel/channelItem.js

TV guide library for Android TV

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TV_GUIDE_CONSTANTS } from '../../constants';
import ChannelLogo from './channelLogo';

export default class ChannelItem extends React.Component {
    constructor(props) {
        super(props);
    }

    static defaultProps = {
        channel: {},
        channelNumber: -1
    }

    shouldComponentUpdate() {
        return false
    }

    render() {
        const { channel, channelNumber, channelHeight, channelWidth } = this.props;
        const { asset } = channel;
        if (!channel) return <View />;
        return (
            <View style={[styles.channel, { height: channelHeight, width: channelWidth }]}>
                <Text style={styles.title} numberOfLines={2}>
                    {channelNumber}.
                </Text>
                <ChannelLogo asset={asset} channelWidth={channelWidth} />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    channel: {
        flex: 1,
        flexDirection: 'row',
        padding: 5,
        backgroundColor: TV_GUIDE_CONSTANTS.THEME_STYLES.CONTAINER_BG_COLOR,
        justifyContent: 'center',
        alignItems: 'center',
    },
    title: {
        color: TV_GUIDE_CONSTANTS.THEME_STYLES.FUTURE_PROGRAM_TEXT_COLOR,
        fontSize: TV_GUIDE_CONSTANTS.THEME_STYLES.CHANNEL_TITLE_FONT_SIZE,
        fontWeight: 'bold',
    },
});