2.0.3 • Published 3 years ago
@reactseals/react-native-leanback v2.0.3
react-native-leanback
Android TV leanback wrapper for React Native
Implementation
Move styles.xml and values.xml to your androidtv resources folder.
Renative implementation
Add this code snipped to your renative.json
"@reactseals/react-native-leanback": {
"version": "1.0.4",
"androidtv": {
"path": "node_modules/@reactseals/react-native-leanback/android",
"package": "com.rs.leanbacknative.LeanbackNativePackage"
}
}
React native implementation implementation
Install via package.json
:
"@reactseals/react-native-leanback": "1.0.4"
Install from the command line:
npm install @reactseals/react-native-leanback@1.0.4
Data Model
{
"id": "1",
"cardImageUrl": "https://miro.medium.com/max/3376/1*0RTfTupYYCswBxAa2LOnog.png",
"backdropUrl": "https://miro.medium.com/max/3376/1*0RTfTupYYCswBxAa2LOnog.png",
"title": "Zeitgeist 2010_ Year in Review",
"description": "Fusce id nisi turpis. Praesent viverra bibendum semper."
}
Usage
Row
Prop | Type | Description |
---|---|---|
data | array | Data for row |
style | object | Container holder style |
title | string | Row title |
attributes.width | integer | Width of row |
attributes.height | integer | Height of row |
attributes.hasImageOnly | boolean | Bool flag which indicates wheter show title or image only |
import { Row } from '@reactseals/react-native-leanback';
<Row
data={data}
attributes={{
width: 313,
height: 173,
hasImageOnly: true,
}}
style={{ width: '100%' }}
title="Title for row"
onFocus={(item) => console.log(item)}
onPress={(item) => console.log(item)}
/>
Grid
Prop | Type | Description |
---|---|---|
data | array | Data for row |
style | object | Container holder style |
title | string | Row title |
attributes.width | integer | Width of row |
attributes.height | integer | Height of row |
attributes.hasImageOnly | boolean | Bool flag which indicates wheter show title or image only |
import { Grid } from 'react-native-leanback';
<Grid
data={data}
attributes={{
width: 313,
height: 173,
hasImageOnly: true,
}}
style={{ width: '100%' }}
onFocus={(item) => console.log(item)}
onPress={(item) => console.log(item)}
/>
2.0.4-beta.2
3 years ago
2.0.3-beta.9
3 years ago
2.0.3-beta.8
3 years ago
2.0.4-beta.1
3 years ago
2.0.4-beta.0
3 years ago
2.0.3
3 years ago
2.0.3-beta.7
3 years ago
2.0.3-beta.6
3 years ago
2.0.3-beta.5
3 years ago
2.0.3-beta.4
3 years ago
2.0.3-beta.3
3 years ago
2.0.3-beta.2
3 years ago
2.0.3-beta.1
3 years ago
2.0.2
3 years ago
2.0.1
3 years ago
2.0.0
3 years ago
2.0.0-beta.7
3 years ago
2.0.0-beta.6
3 years ago
2.0.0-beta.5
3 years ago
2.0.0-beta.2
3 years ago
2.0.0-beta.1
3 years ago
2.0.0-beta.0
3 years ago
2.0.0-beta.4
3 years ago
2.0.0-beta.3
3 years ago
1.0.5-beta.1
3 years ago
1.0.5-beta.2
3 years ago
1.0.5-beta.0
3 years ago
1.0.4
3 years ago
1.0.2
3 years ago
1.0.3
3 years ago
1.0.1
3 years ago