# nexle-tvguide-lib
> TV guide library for Android TV
Latest version **1.0.6** (published 2021-12-23) · ISC license · 0 weekly downloads
## Install
```sh
npm install nexle-tvguide-lib
pnpm add nexle-tvguide-lib
yarn add nexle-tvguide-lib
bun add nexle-tvguide-lib
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-12-23 |
| First published | 2021-12-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nexle Legacy team |
| Maintainers | sontranvanthai |
| Keywords | tvguide, tv, epg, epg, react, native, epg, react, native, tv, guide, tv, android, tv, guide, rn-tv, guide, rn, epg |
## Links
- npm: https://www.npmjs.com/package/nexle-tvguide-lib
- Repository: https://github.com/sonttv/Nexle-TVGuide-Library
- Homepage: https://github.com/sonttv/Nexle-TVGuide-Library#readme
- Issues: https://github.com/sonttv/Nexle-TVGuide-Library/issues
- npm.io page: https://npm.io/package/nexle-tvguide-lib
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.6 (latest) — 2021-12-23
- 1.0.5 — 2021-12-18
- 1.0.4 — 2021-12-17
- 1.0.3 — 2021-12-17
- 1.0.2 — 2021-12-15
- 1.0.1 — 2021-12-15
- 1.0.0 — 2021-12-15
## README
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.
```ts
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
```tsx
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "nexle-tvguide-lib";
export default function doc() {
return (
)
}
```
### 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;
```tsx
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "nexle-tvguide-lib";
export default function doc() {
return (
)
}
```
### Custom Styles background color, text color...
---
You can custom UI TV Guide components with styles:
```tsx
import React from 'react'
import { View, Text } from 'react-native';
import { TVGuide, TV_GUIDE_CONSTANTS } from "nexle-tvguide-lib";
export default function doc() {
return (
)
}
```
---
_Source: https://npm.io/package/nexle-tvguide-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._