I am building an Android TV application. I have tried many carousel packages but nothing fits my needs. So I decided to make my own using ScrollView. The only requirements I had were, the image should be full screen and the keyboard (Arrow keys on D-Pad) should function as expected. I have horizontal activated. Using the pagingEnabled works as expected but only if I swipe. If I press the left and right arrow keys on the keyboard or D-Pad, it scrolls to the last page instead of the next page. Here is where I have gone so far (Full Code):
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, ScrollView, ImageBackground } from 'react-native';
import {Dimensions } from "react-native";
export default class MovieScreen extends Component {
constructor(props) {
super(props);
this.state = {
width: 100,
height: 75,
index: 0,
testIndex: 1,
activeSlide: 0,
entries: [
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png"
},
]
}
}
render() {
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
return (
<View>
<ScrollView horizontal={true} style={styles.scrollBox} pagingEnabled
>
{
this.state.entries.map((e, index) => {
return (
<View key={index}>
<ImageBackground source={{uri: 'https://www.ecopetit.cat/wpic/mpic/4-41961_1080p-fox-wallpaper-hd.png'}} style={{ width: viewportWidth, height: viewportHeight }}>
<Text>test</Text>
</ImageBackground>
</View>
)
})
}
</ScrollView>
</View>
);
}
}
const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');
const styles = StyleSheet.create({
imageCard: {
width: viewportWidth,
height: viewportHeight
},
})
As shown here, I am using pagingEnabled on the ScrollView but the keyboard arrow keys goes to the last page.
