EPG Component for React Native applications.

React Native Android TV Guide

An Android TV Guide programs React Native applications.

Required system: react-native: "npm:react-native-tvos"

• [x] EPG component
  • Material design similar to Android TV's Live Channels app
  • Supports extended data fields (channel logos, programme series/episode information, programme images, etc)
  • Supports custom actions for programmes (e.g. Open in BBC iPlayer)
  • Renderer support:
    • [x] Support React Native
    • [x] Supports and directional controls for TVs
    • [x] Automatic directional controls handling with react-native-tvos
    • [x] Automatically scroll when using directional controls
    • [x] Support using a custom colour scheme
    • [x] Support callback function to get program focused
    • [x] Support slient load more programs by date
    • [x] Hooks for loading additional data when scrolling to the end of the loaded data
    • [x] Shows the current and next programme and it's start time

Install:

Note: You must be  import two libraries use the  react-native-fast-image and react-native-uuid.

yarn add tvapps-epg-androidtv
yarn add react-native-uuid
yarn add react-native-fast-image

Data

Data is provided in formats defined.

    channel = {
        imageSrc: string,
        id: number,
        externalChannelId: string,
        name: string,
        url: string,
        description: string,
        category: string,
        extrafields: array,
        number: number,
        npvrEnabled: bool,
        isNpvrActivated: bool,
        isCatchupActivated: bool,
        catchupEnabled: bool,
        favouriteEnabled: bool,
        isFavouriteActivated: bool,
        purchaseEnabled: bool,
        isPurchaseActivated: bool,
    };
//default value
    channel =  {
        imageSrc: null,
        id: -1,
        externalChannelId: '',
        name: '',
        url: '',
        description: '',
        category: '',
        extrafields: [],
        number: -1,
        npvrEnabled: false,
        isNpvrActivated: false,
        isCatchupActivated: false,
        catchupEnabled: false,
        favouriteEnabled: false,
        isFavouriteActivated: false,
        purchaseEnabled: false,
        isPurchaseActivated: false,
    }
};
//example value
    channel =  {
        imageSrc: 'https://votvapps-ng-test.tvaas.com/RTEFacade/images/attachments/TV2.png',
        id: 1895201,
        externalChannelId: 'LuxeTV',
        name: 'Luxe TV',
        url: '',
        description: '',
        category: '',
        extrafields: [
            {
                responseElementType: "Extrafield",
                name: "static-playback",
                value: "false"
            }
        ],
        number: 12,
        npvrEnabled: false,
        isNpvrActivated: false,
        isCatchupActivated: false,
        catchupEnabled: false,
        favouriteEnabled: false,
        isFavouriteActivated: false,
        purchaseEnabled: false,
        isPurchaseActivated: false,
    }
};
const channeList =  [
    {
        ...channel
    },
    {
        ...channel   
    },
    ...
];


//PROGRAM DATA FORMART
    program = {
        id:  number,
        name:  string,
        shortName:  string,
        serisName:  string,
        description:  string,
        prName:  string,
        startDate:  number,//(timestamp)
        endDate:  number,//(timestamp)
        startDateAdjusted:  number,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  number,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referanceProgramId:  string,
        flags:  number,
        seriesSeasion:  string,
        responseElementType:  string,
        price:  number,
        imageSrc: string,
        genres:  array,
        prLevel:  number,
    } 
// default value 
    program = {
        id:  -1,
        name:  '',
        shortName:  '',
        serisName:  '',
        description:  '',
        prName:  '',
        startDate:  0,//(timestamp)
        endDate:  0,//(timestamp)
        startDateAdjusted:  0,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  0,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referanceProgramId:  '',
        flags:  0,
        seriesSeasion:  '',
        responseElementType:  '',
        price:  0,
        imageSrc: '',
        genres:  [],
        prLevel:  0,
    }  
//example data
 program = {
        id:  12966715,
        name:  'Los milagros de la rosa',
        shortName:  '',
        serisName:  '',
        description:  '',
        imageSrc: 'https://votvapps-ng-test.tvaas.com/RTEFacade/images/12055411.jpg',
        prName:  'APT',
        startDate:  1641769200000,//(timestamp)
        endDate:  1641776400000,//(timestamp)
        startDateAdjusted:  1641769200000,// default equal to startDate (timestamp), adjusted to fix start of day (00:00:00)
        endDateAdjusted:  1641776400000,// default equal to endDate (timestamp), adjusted to fix end of day (23:59:59)
        referanceProgramId:  '2466657917202201091800120',
        flags:  0,
        seriesSeasion:  '',
        responseElementType:  'Program',
        price:  0.0,
        genres:  [],
        prLevel:  0,
    }



const programList  = [ 
    {
        channelExternalId:'France24Fr2',
        programs: [program,...]
    },
    {
        channelExternalId:'ArteLoop',
        programs: [program,...]
    },
    {
        channelExternalId:'Arte',
        programs: [program,...]
    },
    ....
];

Data example

Data example

Import to your TVapp:

Import TV Guide component with default properties below:

• [x] tvGuideWidth: Width of TV guide component, default Device Width screen size;// important!
• [x] tvGuideHeight: Height of TV guide component, default = (3/4) * Device height screen size;// important!
• [x] channeList: list channels width array data example data type Channel above ;// important!
• [x] programList: list programs width array data example data type Program above;// important!
• [x] currentDate: The date current display data TV Guide component;// important! support for load multiple days
• [x] onDateChange: Functions call back when current date display changed : return Date // important!
• [x] onProgramChange: Functions call back when current program focused changed : return Program // important!
• [x] onLoadingMoreProgramsByTime: Functions call back when focus to index programs need to load next day progrograms or previos day

import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "tvapps-epg-androidtv";

export default function doc() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 3 / 4}
                channeList={listChannels}
                programList={programsCurrentDisplay}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                onDateChange={onDateChange}
                onProgramChange={onProgramChange}
                onLoadingMoreProgramsByTime={onLoadingMoreProgramsByTime}
            />
        </View>
    )
}

Custom Configs layout TV Guide component:

You can change layout:

• [x] timeLineHeaderHeight: Height time line header default = 50;
• [x] numberOfChannelsDisplayed: Number channels display in TV Guide component, default = 4
• [x] numberOfTimelineCellDisplayed: Number Time cell in time line header default 4;// equal 2 hours: 30 minutes per cell
• [x] channelListWidth: Width list channels left of TV Guide component default = 200;
• [x] numberOfFutureDays: Number Dates Can show in the future, default = 3;
• [x] numberOfPastDays: Number Dates Can show in the past, default = 3;

import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "tvapps-epg-androidtv";

export default function ReactTVEPGScreen() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 7 / 10}
                timeLineHeaderHeight={50}
                numberOfChannelsDisplayed={4}
                numberOfTimelineCellDisplayed={6}
                channelListWidth={150}
                channeList={listChannels}
                programList={programsCurrentDisplay}
                numberOfFutureDays={3}
                numberOfPastDays={2}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                onDateChange={onDateChange}
                onProgramChange={onProgramChange}
                onLoadingMoreProgramsByTime={onLoadingMoreProgramsByTime}
            />
        </View>
    )
}

Custom Styles background color, text color...

You can custom UI TV Guide components with styles:

import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "tvapps-epg-androidtv";

export default function Homescreen() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 7 / 10}
                programList={programsCurrentDisplay}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                programStylesColors={{
                    activeProgramBackgroundColor: '#463cb4',
                    currentProgramBacgroundColor: '#FFFFFF',
                    pastProgramBackgroundColor: '#6f42c1',
                    futureProgramBackgroundColor: '#463cb4',
                    activeProgramTextColor: '#FFFFFF',
                    currrentProgramTextColor: '#000000',
                    pastProgramTextColor: '#ffffff',
                    futureProgramTextColor: '#FFFFFF',
                }}
                programContainerStyles={{ borderRadius: 3 }}
                timeIndicatorStyles={{ backgroundColor: '#c34164', width: 5, borderRadius: 10 }}
                onDateChange={onDateChange}
                onProgramChange={onProgramChange}
                onLoadingMoreProgramsByTime={onLoadingMoreProgramsByTime}
            />
        </View>
    )
}

Project Demo import component here:

React native tvapps-epg-androidTV demo