react-native-leanback

Android TV leanback wrapper for React Native

Installation

Move styles.xml and values.xml to your androidtv resources folder.

Install via package.json:

"@reactseals/react-native-leanback": "2.0.3"

Install from the command line:

npm install @reactseals/[email protected]

Usage

import { Row } from '@reactseals/react-native-leanback';

<Row
    data={data}
    attributes={{
        width: 313,
        height: 173,
    }}
    style={{ width: '100%' }}
    title="Title for row"
    onFocus={(item) => console.log(item)}
    onPress={(item) => console.log(item)}
/>

import { Grid } from 'react-native-leanback';

<Grid
    data={data}
    attributes={{
        width: 313,
        height: 173,
    }}
    style={{ width: '100%' }}
    onFocus={(item) => console.log(item)}
    onPress={(item) => console.log(item)}
    onDataIdsReady={(item) => console.log(item)}
/>

Data Model

Key	Required	Description
id	yes	Unique id of the card
cardImageUrl	yes	Card image url
videoUrl	no	Video url
title	no	Title of the card, visible underneath of the image
description	no	Description of the card, visible underneath of the title
displayLiveBadge	no	Hides or displays live stream badge
liveBadgeColor	no	Color of the badge which represents live stream
liveProgressBarColor	no	Progress bar color
overlayImageUrl	no	Url of overlay image visible on the top of the card image
overlayText	no	Overlay text visible on the top of card image
overlayPosition	no	Position of overlay text
progress	no	Percentage which indicates progress of live stream
backgroundColor	no	Background color of the card
programStartTimestamp	no	Timestamp of live stream start. Must be combined with programEndTimestamp then progress gets automatically calculated
programEndTimestamp	no	Timestamp of live stream end. Must be combined with programStartTimestamp then progress gets automatically calculated
viewId	no	Unique viewId which can be used to prevent or force focus. If it's not defined then random unique id is generated automatically

Props

Prop	Type	Default	Description
data	array		Data for row. See Data Model
style	object		Container holder style
title	string		Row title
numOfCols	enum(4, 5, 6)	4	Number how many columns grid should contain(Grid only)
showOnlyFocusedInfo	boolean	false	Show info field block underneath ONLY when card is focused(Grid only)
forbiddenFocusDirections	array of enum('up', 'down', 'left', 'right')		Prevents any element to be focused when user navigates out of grid/row to provided directions
nextFocusUpId	string		Designates the next view to receive focus when the user navigates up
nextFocusDownId	string		Designates the next view to receive focus when the user navigates down
nextFocusLeftId	string		Designates the next view to receive focus when the user navigates left
nextFocusRightId	string		Designates the next view to receive focus when the user navigates right
attributes.width	integer		Width of card
attributes.height	integer		Height of card
attributes.cardShape	enum('round', 'square')	square	Shape of the card
attributes.focusedCardAlignment	enum('left', 'center')	center	Alignment of focus
attributes.numberOfRows	number	1	Number of rows in Row component
attributes.borderRadius	number		Border radius
attributes.imageTransformationMode	enum('noTransformation','centerCrop')	fitCenter	Transformation mode of the card image

Methods

requestFocus()

Imperative method for requesting focus of specific Row or Grid E.g.

ref.current.requestFocus()

Here ref.current refers to the ref passed to the Grid or Row component.

Example

//TODO