export type HWEvent = {
     eventType: 'up' | 'down' | 'right' | 'left' | 'select' | 'menu' | 'back' | 'playpause' | 'skip_backward'
         | 'skip_forward' | 'page_up' | 'page_down' | 'page_left' | 'page_right' | 'info' | 'more' | string;
     eventKeyAction?: -1 | 1 | 0 | number;
     deviceIdentifier?: {
       uniqueId?: string;
       busId?: number;
       vendorId?: number;
       productId?: number;
       version?: number;
     };
 };

 ## Example
```HWEvent Example

{% comment %}
import React, {useRef, useState} from 'react';
{% endcomment %}
{% comment %}
import {
{% endcomment %}
  ColorValue,
  HWEvent,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  useTVEventHandler,
} from 'react-native';

const backgroundColors = ['#283593', '#1A237E', '#0D47A1', '#1565C0'];

export const App = () => {
  const [backgroundColor, setBackgroundColor] = useState<ColorValue>(
    backgroundColors[0],
  );

  const [buttonText, setButtonText] = useState<string>('myTVEventHandler');
  const colorIdx = useRef<number>(0);

  const styles = getStyles(backgroundColor);
  const myTVEventHandler = (event: HWEvent) => {
    setButtonText(JSON.stringify(event));
  };

  useTVEventHandler(myTVEventHandler);
                                                                                                   1,1           Top
const handleButtonPress = () => {
    // wrapping index through array above
    const nextColor = (colorIdx.current + 1) % backgroundColors.length;
    setBackgroundColor(backgroundColors[nextColor]);
    colorIdx.current = nextColor;
  };

  const hexColor = JSON.stringify(backgroundColor).replace(/"/g, '');

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={handleButtonPress}
        testID="sampleButton">
        <Text style={styles.buttonLabel}>{buttonText}</Text>
      </TouchableOpacity>
      <Text style={styles.colorLabel}>{hexColor}</Text>
    </View>
  );
};

const getStyles = (bgColor: ColorValue) =>
  StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
      backgroundColor: bgColor,
      justifyContent: 'center',
      alignItems: 'center',
    },
    button: {
      alignItems: 'center',
      backgroundColor: '#303030',
      borderColor: 'navy',
      borderRadius: 10,
      borderWidth: 1,
      paddingVertical: 12,
      paddingHorizontal: 32,
    },
    buttonLabel: {
      color: 'white',
      fontSize: 22,
      fontFamily: 'Amazon Ember',
    },
    colorLabel: {
      color: 'white',
      position: 'absolute',
      top: 32,
      right: 32,
      fontSize: 32,
    },
  });