React Native Fast Engine SDK

The FAST Engine SDK is a comprehensive Electronic Program Guide (EPG) UI Component library designed for integration with React Native. It empowers developers to efficiently implement a feature-rich EPG experience, showcasing program and scheduling metadata, incorporating lazy loading, and more. This SDK is dependent on the React Native Core SDK, ensuring a seamless integration of essential functionalities for an enhanced EPG interface.

Features
Requirements
Installation
How to Use
Properties

Features

The dotstudioPRO Fast Engine SDK excels in delivering a premier Electronic Program Guide (EPG) UI component, leveraging the capabilities of React Native. With a robust foundation in the Core SDK for efficient API data retrieval, this SDK offers a comprehensive set of features.

Key Features:

Now Next EPG Display Support: The Fast Engine SDK seamlessly renders an Electronic Program Guide with a focus on the "Now | Next" paradigm, providing users with quick access to current and upcoming content.
Full EPG Display Support: Enjoy the flexibility of showcasing a complete Electronic Program Guide, offering a comprehensive overview of scheduled programming.
Callback Handling: The SDK skillfully manages necessary callbacks, ensuring smooth interactions and responsiveness within the application.
Lazy Loading for Enhanced Experience: The Fast Engine SDK incorporates lazy loading of data, enhancing the user experience by loading content for a smoother and more responsive interface.

Requirements

Platform	Minimum Version	Installation	Status
iOS	13.0+	CocoaPods	Fully Tested
tvOS	13.0+	CocoaPods	Fully Tested
Android	Android 5.0: Lollipop (API 21)	npm	Fully Tested
Android TV	Android 5.0: Lollipop (API 21)	npm	Fully Tested
Fire TV	Android 5.0: Lollipop (API 21)	npm	Fully Tested

Installation

Utilize the command below to effortlessly install the FAST Engine SDK in your React Native project:

yarn add @dotstudiopro/core --ignore-scripts install-peers
yarn add @dotstudiopro/fast-engine --ignore-scripts install-peers

Furthermore, it is essential to include React Native Device Info as a PeerDependency. Please follow the instructions below to ensure proper integration:

yarn add react-native-device-info

When employing npm as your package manager, it is imperative to incorporate the --force or --legacy-peer-deps flag during the installation process to ensure the proper integration of peerDependencies. Our SDKs are designed to accommodate various native dependencies and are optimized for React Native on TV devices. Therefore, including the mentioned flags is essential when utilizing npm as your package manager. This guarantees a smooth and error-free installation, enabling seamless functionality of the SDK in your project.

How to Use

Begin by importing the <EpgComponent> class exposed by @dotstudiopro/fast-engine

import { EpgComponent} from '@dotstudiopro/fast-engine';

Proceed by effortlessly integrating this component anywhere on your screen:

<EpgComponent
    type="FullEPG"
    onSelectEpgChannel={(epgChannel, index) => {
      console.log('samples channel=====>', epgChannel)
      setActiveChannelIndex(index);
      }
    }
    onSelectEpgChannelProgram={(epgChannelProgram, epgChannel, index) => {
      console.log('Samples channel=======>', epgChannelProgram);
      setActiveChannelIndex(index);
    }}
    onDataLoaded={(channels) => {
      console.log('onDataLoaded channels=======>');
    }}
    activeChannelIndex={activeChannelIndex}
    logoAspectRatio={1}
    buttonIcon={PLAY_ICON}
    style={{
      ...
    }}
  />

<EpgComponent
  type="FullEPG"
  onSelectEpgChannel={(epgChannel, index) => {
    setActiveChannelIndex(index);
  }}
  onSelectEpgChannelProgram={(epgChannelProgram, epgChannel, index) => {
    setActiveChannelIndex(index);
  }}
  onDataLoaded={(channels) => {}}
  activeChannelIndex={activeChannelIndex}
  logoAspectRatio={1}
  style={{
  //current time overlay color
  epgCurrentTimeProgressViewBackgroundColor:'#00000000',
  //epg date time bar, progress bar, which shows up just above the EPG grid
  epgCurrentTimeProgressBarViewBackgroundColor:'#00000000',
  //currently playing programs background color, as per the current time
  currentProgramBackgroundColor:'#FFFFFF',
  //whenever the program item is focused, the background color to set
  focusedProgramCellBackgroundColor:'#d3d3d3',
  //currently playing channel border color
  activeBorderColor:'#FFFFFF',
  //currently focused channel border color
  focusedChannelLogoBorderColor:'#D3D3D3',
  //regular focused channel background color
  channelLogoBackgroundColor:'#000000',
  //currently focused channel background color
  focusedChannelLogoBackgroundColor:'#D3D3D3',
  //EPG component background color, needs to be transparent by default
  backgroundColor:'#00000000',
  tintColor:'#FFFFFF',
  unselectedColor:'#D3D3D3',
  currentProgramColor:'#FFFFFF',
  borderColor:'#FFFFFF',
  titleColor:'#FFFFFF',
  metadataColor:'#FFFFFF',
  activeColor:'#D3D3D3',
  focusColor:'#FFFFFF',
  channel: {
    backgroundColor:'#D3D3D3',
  },
  activeChannel: {
    backgroundColor:'#FFFFFF',
  },
  program:{
    backgroundColor:'#000000',
    currentProgramBackgroundColor:'#FFFFFF',
    title: {
      color:'#FFFFFF',
    },
    time: {
      color:'#FFFFFF',
    },
    currentWatchingText: {
      color:'#FFFFFF',
    },
  },
  focusedProgram:{
    backgroundColor:'#D3D3D3',
    currentProgramBackgroundColor:'#D3D3D3',
    title: {
      color:'#000000',
    },
    time: {
      color:'#000000',
    },
    currentWatchingText: {
      color:'#000000',
    },
  },
  currentProgram:{
    backgroundColor:'#000000',
    currentProgramBackgroundColor:'#FFFFFF',
    title: {
      color:'#000000',
    },
    time: {
      color:'#000000',
    },
    currentWatchingText: {
      color:'#000000',
    },
  },
  activeProgram: {
  },
  epgDateTime: {
    color:'#FFFFFF',
    fontSize:15,
  },
}}
/>

Properties

The EPG Component necessitates the following instantiation options to be provided during initialization:

Key	Type	Description	Optional
type	FullEPG / NowNext	type FullEPG represents full 7 days of EPG while type NowNext show 2 Column Electronic Program Guide.	Yes
activeChannelIndex	number	represents currently selected Channel in EPG. This shows active border around the Channel Logo.	Yes
logoAspectRatio	number	Aspect ratio of the Channel Logo.	Yes
onSelectEpgChannel (epgChannel, index)	Callback	Callback fired when a channel is selected. - epgChannel gives selected EPGChannel Object. - index gives index of selected EPG Channel.	Yes
onSelectEpgChannelProgram (epgChannelProgram, epgChannel, index)	Callback	Callback fired when a specific program is selected. - epgChannelProgram gives selected EPGChannelProgram Object. - epgChannel gives selected EPGChannel Object. - index gives index of selected EPG Channel.	Yes
onDataLoaded	Callback	Callback fired when the EPG component state has updated with data from the Core SDK.	Yes
style	JSX Object Literal	Optional JSX style object.	Yes

Detail Style object is as below. '.' in below style object represents sub json object.

Style Name	Type	Value
backgroundColor	String	'#ffffff'
epgCurrentTimeProgressViewBackgroundColor	String	'#00000000'
epgCurrentTimeProgressBarViewBackgroundColor	String	'#00000000'
currentProgramBackgroundColor	String	'#FFFFFF'
focusedProgramCellBackgroundColor	String	'#D3D3D3'
activeBorderColor	String	'#FFFFFF'
borderColor	String	'#FFFFFF'
focusedChannelLogoBackgroundColor	String	'#D3D3D3'
channelLogoBackgroundColor	String	'#000000'
epgDateTime.color	String	'#FFFFFF'
epgDateTime.fontFamily	font family	'roboto-regular'
epgDateTime.fontSize	number	14
epgDateTime.paddingHorizontal	number	14
epgDateTime.marginHorizontal	number	14
timeBar.color	String	'#FFFFFF'
timeBar.fontFamily	font family	'roboto-regular'
timeBar.fontSize	number	14
program.backgroundColor	String	'#000000'
program.currentProgramBackgroundColor	String	'#FFFFFF'
program.title.color	String	'#FFFFFF'
program.title.fontFamily	font family	'roboto-regular'
program.title.fontSize	number	14
program.time.color	String	'#FFFFFF'
program.time.fontFamily	font family	'roboto-regular'
program.time.fontSize	number	14
program.currentWatchingText.color	String	'#FFFFFF'
focusedProgram.backgroundColor	String	'#000000'
focusedProgram.currentProgramBackgroundColor	String	'#FFFFFF'
focusedProgram.title.color	String	'#FFFFFF'
focusedProgram.title.fontFamily	font family	'roboto-regular'
focusedProgram.title.fontSize	number	14
focusedProgram.time.color	String	'#FFFFFF'
focusedProgram.time.fontFamily	font family	'roboto-regular'
focusedProgram.time.fontSize	number	14
focusedProgram.currentWatchingText.color	String	'#FFFFFF'
currentProgram.backgroundColor	String	'#000000'
currentProgram.currentProgramBackgroundColor	String	'#FFFFFF'
currentProgram.title.color	String	'#FFFFFF'
currentProgram.title.fontFamily	font family	'roboto-regular'
currentProgram.title.fontSize	number	14
currentProgram.time.color	String	'#FFFFFF'
currentProgram.time.fontFamily	font family	'roboto-regular'
currentProgram.time.fontSize	number	14
currentProgram.currentWatchingText.color	String	'#FFFFFF'

Updated November 10, 2023 15:01

React Native Fast Engine SDK

Features

Requirements

Installation

How to Use

Properties

Get in touch

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Can't find what you're looking for?

In this article

Toggle navigation menu

Toggle navigation menu

<%= category.name %>

<%= section.name %>

Quick links

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Features

Requirements

Installation

How to Use

Properties

Get in touch

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Can't find what you're looking for?

In this article

Toggle navigation menu

Toggle navigation menu

<%= category.name %>

Toggle navigation menu

Categories

<%= section.name %>

Quick links

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>