nexle-tvguide-lib/src/tvEPG/components/header/headerDatePannel.js

TV guide library for Android TV

import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-tvfocus';
import { TV_GUIDE_CONSTANTS } from '../../constants';
import { formatShortDate, compareTwoDates } from '../../util';
const iconPrev = require('../../assets/images/arrow_previous.png');
const iconNext = require('../../assets/images/arrow_next.png');

const today = new Date();

export default function HeaderDatePannel({ currentDate, onFocus, pannelWidth, pannelHeight }) {
    const currentDayDisplay = new Date(currentDate);
    let title = '';
    if (compareTwoDates(today, currentDayDisplay)) {
        title = 'Today';
    } else {
        title = formatShortDate(currentDayDisplay);
    }
    return (
        <View style={[styles.contain, { width: pannelWidth, heigth: pannelHeight }]}>
            {/* <TouchableOpacity onFocus={onFocus}> */}
            <Image style={styles.icon} source={iconPrev} />
            {/* </TouchableOpacity> */}
            <Text style={styles.content}> {title}</Text>
            {/* <TouchableOpacity> */}
            <Image style={styles.icon} source={iconNext} />
            {/* </TouchableOpacity> */}
        </View>
    );
}

const styles = StyleSheet.create({
    contain: {
        color: TV_GUIDE_CONSTANTS.THEME_STYLES.FUTURE_PROGRAM_TEXT_COLOR,
        backgroundColor: TV_GUIDE_CONSTANTS.THEME_STYLES.CONTAINER_BG_COLOR,
        height: TV_GUIDE_CONSTANTS.HEADER_CELL_HEIGHT,
        justifyContent: 'space-between',
        // justifyContent: 'center',
        textAlign: 'center',
        alignItems: 'center',
        flexDirection: 'row',
    },
    content: {
        color: TV_GUIDE_CONSTANTS.THEME_STYLES.FUTURE_PROGRAM_TEXT_COLOR,
        fontSize: TV_GUIDE_CONSTANTS.THEME_STYLES.TIME_LINE_TITLE_FONT_SIZE,
        fontWeight: 'bold',
    },
    icon: {
        width: 24,
        height: 26,
    },
});