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-imageData
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
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>
)
}