{"id":24598245,"url":"https://github.com/reactseals/react-native-leanback","last_synced_at":"2025-06-12T21:11:27.425Z","repository":{"id":36986482,"uuid":"290720783","full_name":"reactseals/react-native-leanback","owner":"reactseals","description":"Android TV leanback wrapper for React Native","archived":false,"fork":false,"pushed_at":"2022-08-12T08:24:59.000Z","size":346295,"stargazers_count":28,"open_issues_count":7,"forks_count":8,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-29T22:36:34.366Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/reactseals/react-native-leanback","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactseals.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-08-27T08:30:42.000Z","updated_at":"2023-12-17T21:20:16.000Z","dependencies_parsed_at":"2022-07-15T20:47:15.578Z","dependency_job_id":null,"html_url":"https://github.com/reactseals/react-native-leanback","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-leanback","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-leanback/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-leanback/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactseals%2Freact-native-leanback/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactseals","download_url":"https://codeload.github.com/reactseals/react-native-leanback/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235434503,"owners_count":18989606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-24T12:15:26.712Z","updated_at":"2025-01-24T12:15:27.365Z","avatar_url":"https://github.com/reactseals.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-leanback\nAndroid TV leanback wrapper for React Native\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./misc/img/grid.gif\" alt=\"React native leanback row with titles\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./misc/img/row.gif\" alt=\"React native leanback row custom sized\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\nMove [styles.xml][link1] and [values.xml][link2] to your androidtv resources folder.\n\nInstall via `package.json`:\n\n```\n\"@reactseals/react-native-leanback\": \"2.0.3\"\n```\n\nInstall from the command line:\n\n```\nnpm install @reactseals/react-native-leanback@2.0.3\n```\n\n## Usage\n\n```javascript\nimport { Row } from '@reactseals/react-native-leanback';\n\n\u003cRow\n    data={data}\n    attributes={{\n        width: 313,\n        height: 173,\n    }}\n    style={{ width: '100%' }}\n    title=\"Title for row\"\n    onFocus={(item) =\u003e console.log(item)}\n    onPress={(item) =\u003e console.log(item)}\n/\u003e\n```\n\n```javascript\nimport { Grid } from 'react-native-leanback';\n\n\u003cGrid\n    data={data}\n    attributes={{\n        width: 313,\n        height: 173,\n    }}\n    style={{ width: '100%' }}\n    onFocus={(item) =\u003e console.log(item)}\n    onPress={(item) =\u003e console.log(item)}\n    onDataIdsReady={(item) =\u003e console.log(item)}\n/\u003e\n```\n\n\n## Data Model\n\n| Key                     | Required | Description                                                                                                                     |\n| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| `id`                    | `yes`    | Unique id of the card                                                                                                           |\n| `cardImageUrl`          | `yes`    | Card image url                                                                                                                  |\n| `videoUrl`              | `no`     | Video url                                                                                                                       |\n| `title`                 | `no`     | Title of the card, visible underneath of the image                                                                              |\n| `description`           | `no`     | Description   of the card, visible  underneath of the title                                                                     |\n| `displayLiveBadge`      | `no`     | Hides or displays live stream badge                                                                                             |\n| `liveBadgeColor`        | `no`     | Color of the badge which represents live stream                                                                                 |\n| `liveProgressBarColor`  | `no`     | Progress bar color                                                                                                              |\n| `overlayImageUrl`       | `no`     | Url of overlay image visible on the top of the card image                                                                       |\n| `overlayText`           | `no`     | Overlay text visible on the top of card image                                                                                   |\n| `overlayPosition`       | `no`     | Position of overlay text                                                                                                        |\n| `progress`              | `no`     | Percentage which indicates progress of live stream                                                                              |\n| `backgroundColor`       | `no`     | Background color of the card                                                                                                    |\n| `programStartTimestamp` | `no`     | Timestamp of live stream start. Must be combined with `programEndTimestamp` then progress gets automatically calculated         |\n| `programEndTimestamp`   | `no`     | Timestamp of live stream end. Must be combined with `programStartTimestamp` then progress gets automatically calculated         |\n| `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 |\n\n\n## Props\n\n| Prop                                 | Type                                           | Default     | Description                                                                                   |\n| ------------------------------------ | ---------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------- |\n| `data`                               | `array`                                        |             | Data for row. See [Data Model](#data-model)                                                   |\n| `style`                              | `object`                                       |             | Container holder style                                                                        |\n| `title`                              | `string`                                       |             | Row title                                                                                     |\n| `numOfCols`                          | `enum(4, 5, 6)`                                | `4`         | Number how many columns grid should contain(Grid only)                                        |\n| `showOnlyFocusedInfo`                | `boolean`                                      | `false`     | Show info field block underneath ONLY when card is focused(Grid only)                         |\n| `forbiddenFocusDirections`           | `array of enum('up', 'down', 'left', 'right')` |             | Prevents any element to be focused when user navigates out of grid/row to provided directions |\n| `nextFocusUpId`                      | `string`                                       |             | Designates the next view to receive focus when the user navigates up                          |\n| `nextFocusDownId`                    | `string`                                       |             | Designates the next view to receive focus when the user navigates down                        |\n| `nextFocusLeftId`                    | `string`                                       |             | Designates the next view to receive focus when the user navigates left                        |\n| `nextFocusRightId`                   | `string`                                       |             | Designates the next view to receive focus when the user navigates right                       |\n| `attributes.width`                   | `integer`                                      |             | Width of card                                                                                 |\n| `attributes.height`                  | `integer`                                      |             | Height of card                                                                                |\n| `attributes.cardShape`               | `enum('round', 'square')`                      | `square`    | Shape of the card                                                                             |\n| `attributes.focusedCardAlignment`    | `enum('left', 'center')`                       | `center`    | Alignment of focus                                                                            |\n| `attributes.numberOfRows`            | `number`                                       | `1`         | Number of rows in Row component                                                               |\n| `attributes.borderRadius`            | `number`                                       |             | Border radius                                                                                 |\n| `attributes.imageTransformationMode` | `enum('noTransformation','centerCrop')`        | `fitCenter` | Transformation mode of the card image                                                         |\n\n## Methods\n\n### `requestFocus()`\n\nImperative method for requesting focus of specific Row or Grid E.g.\n\n```javascript\nref.current.requestFocus()\n```\n\nHere `ref.current` refers [to the `ref`](https://reactjs.org/docs/react-api.html#reactcreateref) passed to the `Grid` or `Row` component.\n\n## Example\n\n//TODO \n\n[link1]: https://github.com/reactseals/react-native-leanback/blob/master/android/src/main/res/values/styles.xml\n[link2]: https://github.com/reactseals/react-native-leanback/blob/master/android/src/main/res/values/values.xml\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactseals%2Freact-native-leanback","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactseals%2Freact-native-leanback","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactseals%2Freact-native-leanback/lists"}