React Native Android TVGuide

An Android TV Guide programs React Native applications.

• [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] React Native
    • Supports and directional controls for TVs
  • TODO:
    • [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 tim

Data

Data is provided in formats defined.

export interface Channel {
  id: number;
  externalChannelId: string;
  description?: string;
  number: number;
  name: string;
  assest: string;
  url?: string;
  category?:string
}

const channeList: Channel[] = [
    // ...
];

export interface Program {
  id: number;
  name: string;
  shortName: string;
  serisName?: string;
  description?: string;
  prName: string;
  startDate: Date;//timestamp
  endDate: Date;//timestamp
  referanceProgramId: string;
  flags: number;
  seriesSeasion?: string;
  responseElementType: string;
  price: number
}
const programList: Program[] = [
    // ...
];

Import to your app:

Import TVGuide 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 TVGuide component;// important! support for load multiple days
• [x] onDateChanged: Functions call back when current date display changed : return Date // important!
• [x] onProgramFocusChange: Functions call back when current program focused changed : return Program // important!
• [x] onSilentLoadMorePrograms: 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 "nexle-tvguide-lib";

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}
                onDateChanged={onDateChanged}
                onProgramFocusChange={onProgramFocusChange}
                onSilentLoadMorePrograms={onSilentLoadMorePrograms}
            />
        </View>
    )
}

Custom Configs layout TVGuide component:

You can change layout:

• [x] timeLineHeaderHeight: Height time line header default = 50;
• [x] numberShowChannel: Number channels display in TVGuide component, default = 4
• [x] numberShowTimeLine: Number Time cell in time line header default 4;// equal 2 hours: 30 minutes per cell
• [x] widthChannelList: Width list channels left of TV Guide component default = 200;
• [x] numberDatesFuture: Number Dates Can show in the future, default = 3;
• [x] numberDatesPast: 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 "nexle-tvguide-lib";

export default function doc() {
    return (
        <View>
          <TVGuide
                tvGuideWidth={TV_GUIDE_CONSTANTS.WIDTH_DEVICE}
                tvGuideHeight={TV_GUIDE_CONSTANTS.HEIGHT_DEVICE * 7 / 10}
                timeLineHeaderHeight={50}
                numberShowChannel={4}
                numberShowTimeLine={6}
                widthChannelList={150}
                channeList={listChannels}
                programList={programsCurrentDisplay}
                numberDatesFuture={3}
                numberDatesPast={2}
                onReachingEndChannel={onReadEndChannelsPrograms}
                currentDate={currentDateDisplay}
                onDateChanged={onDateChanged}
                onProgramFocusChange={onProgramFocusChange}
                onSilentLoadMorePrograms={onSilentLoadMorePrograms}
            />
        </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 "nexle-tvguide-lib";

export default function doc() {
    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: '#fcfcfc',
                    nowTodayProgramBackgroundColor: '#289959',
                    pastProgramBackgroundColor: '#c4c1b5',
                    futureProgramBackgroundColor: '#993328',
                    activeProgramTextColor: '#0ac92a',
                    nowTodayProgramTextColor: '#0a3dc9',
                    pastProgramTextColor: 'grey',
                    futureProgramTextColor: 'white',

                }}
                programContainerStyles={{ borderRadius: 3 }}
                timeIndicatorStyles={{ backgroundColor: '#a6c90a', width: 5, borderRadius: 10 }}
                onDateChanged={onDateChanged}
                onProgramFocusChange={onProgramFocusChange}
                onSilentLoadMorePrograms={onSilentLoadMorePrograms}
            />
        </View>
    )
}