Skip to content

Instantly share code, notes, and snippets.

@steniowagner
Created June 17, 2019 03:50
Show Gist options
  • Save steniowagner/f802929ed6e1a8167c50d0f85294bc6a to your computer and use it in GitHub Desktop.
Save steniowagner/f802929ed6e1a8167c50d0f85294bc6a to your computer and use it in GitHub Desktop.
import React from "react";
import { TouchableOpacity, Text, StyleSheet, View } from "react-native";
import TVEventHandler from "TVEventHandler";
import Video from "react-native-video";
const ITEMS = [
{
color: "#f0f",
text: "Rosa"
},
{ color: "#00f", text: "Azul" },
{ color: "#ff0", text: "Amarelo" },
{ color: "#0f0", text: "Verde" }
];
class App extends React.Component {
_tvEventHandler = null;
state = {
itemClicked: "",
indexSelected: 0
};
_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function(cmp, evt) {
const { indexSelected } = cmp.state;
console.log(indexSelected);
if (evt && evt.eventType === "right") {
if (indexSelected < 3) {
cmp.setState({ indexSelected: indexSelected + 1 });
}
}
if (evt && evt.eventType === "select") {
cmp.setState({ itemClicked: ITEMS[indexSelected].text });
}
if (evt && evt.eventType === "left") {
if (indexSelected > 0) {
cmp.setState({ indexSelected: indexSelected - 1 });
}
}
if (evt && evt.eventType === "playPause") {
// cmp.setState({ itemClicked: ITEMS[indexSelected] });
}
});
}
_disableTVEventHandler() {
if (this._tvEventHandler) {
this._tvEventHandler.disable();
delete this._tvEventHandler;
}
}
componentDidMount() {
this._enableTVEventHandler();
}
componentWillUnmount() {
this._disableTVEventHandler();
}
render() {
const { indexSelected, itemClicked } = this.state;
return (
<View
style={{
backgroundColor: "#121212",
width: "100%",
height: "100%"
}}
>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
}}
>
{ITEMS.map((item, index) => (
<TouchableOpacity
key={item.color}
style={{
width: 200,
height: 100,
marginVertical: 80,
backgroundColor: item.color,
borderRadius: 4,
borderWidth: 5,
borderColor: index === indexSelected ? "#f00" : "#121212"
}}
/>
))}
</View>
<View
style={{
marginTop: 50
}}
>
<Text
style={{
color: "#fff",
textAlign: "center",
fontSize: 44
}}
>
Item Clicado: {itemClicked}
</Text>
<Text
style={{
marginTop: 50,
color: "#fff",
textAlign: "center",
fontSize: 44
}}
>
Item Focado: {ITEMS[indexSelected].text}
</Text>
</View>
</View>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment