TVEventHandler

To respond to D-pad events, you can create key events handlers for D-pad events. This event is caught by instances of the TVEventHandler JavaScript object. Your app code can create an instance of TVEventHandler and listen for these events, as shown in the following example:

Supported events

TVEventHandler doesn’t allow overriding the default behavior on Vega. For example: pressing the Dpad Left button causes the focus to move onto the component on the left, this is the default behavior provided on Vega. Apps can’t change this behavior even if a listener for the same key is registered in TVEventHandler. The following is a list of all supported keys on Vega with Fire TV remote:

'up',
'down',
'left',
'right',
'select',
'back',
'menu',
'playpause',
'skip_backward',
'skip_forward',
'page_up',
'page_down',
'page_left',
'page_right',
'info',
'more';

Additional keys from universal remote

The following is a list of all supported keys on Vega with Universal Remote or TV Remote:

'num_0',
'num_1',
'num_2',
'num_3',
'num_4',
'num_5',
'num_6',
'num_7',
'num_8',
'num_9',
'key_pad_0',
'key_pad_1',
'key_pad_2',
'key_pad_3',
'key_pad_4',
'key_pad_5',
'key_pad_6',
'key_pad_7',
'key_pad_8',
'key_pad_9',
'key_pad_decimal',
'key_pad_divide',
'key_pad_multiply',
'key_pad_subtract',
'key_pad_add',
'key_pad_equal',
'grave_accent',
'back_slash',
'forward_slash',
'open_bracket',
'close_bracket',
'minus',
'equals',
'semicolon',
'apostrophe',
'comma',
'period',
'enter',
'tab',
'space',
'backspace',
'escape',
'caps_lock',
'print_screen',
'scroll_lock',
'pause',
'num_lock',
'left_shift',
'right_shift',
'left_alt',
'right_alt',
'left_ctrl',
'right_ctrl',
'left_super',
'right_super',
'insert',
'home',
'delete',
'end',
'unknown',
'max',

Supported actions

The following lists the supported actions:

0: PRESSED - Button is in pressed or phase down of the key event
1: RELEASED - Button is in released or phase up of the key event

Long press detection

When a user presses a button on the remote, the device sends a keyEvents event object consisting of two key-value pairs. The first specifies the event type and the second the event action.

{eventType:'left' eventKeyAction:0}

When a user holds a button on the remote in the pressed condition, the platform sends a series of keyEvents events. Each of these events has the same eventType value with a eventKeyAction value of 0. When the button is released, a last event is sent with the same eventType and a eventKeyAction value of 1. For example, if the user holds the DPad left button for 3 seconds, the following list of events is sent.

{eventType:'left' eventKeyAction:0}, {eventType:'left' eventKeyAction:0}, ... , {eventType:'left' eventKeyAction:1}

This logic can be used by apps to distinguish between a long press or a fast key press from the user.

Example

import { TVEventHandler, useTVEventHandler } from '@amazon-devices/react-native-kepler';

// Functional component - Hooks

const TVEventHandlerView: () => React.Node = () => {
    const [lastEventType, setLastEventType] = React.useState('');

    const myTVEventHandler = evt => {
        console.log(`eventType: ${evt.eventType} eventKeyAction: ${evt.eventKeyAction}`);
        setLastEventType(evt.eventType);
    };

    useTVEventHandler(myTVEventHandler);

    return (
        <View>
            <TouchableOpacity onPress={() => {}}>
                <Text>
                    This example enables an instance of TVEventHandler to show the last
                    event detected from the TV remote or from a keyboard.
                </Text>
            </TouchableOpacity>
            <Text style={{color: 'blue'}}>{lastEventType}</Text>
        </View>
    );

};

// Class based component

class Game2048 extends React.Component {
    _tvEventHandler: any;

    _enableTVEventHandler() {
        this._tvEventHandler = new TVEventHandler();
        this._tvEventHandler.enable(this, function(cmp, evt) {
            if(evt.eventKeyAction === 1) {
                console.log('button released.');
                return;
            }
            if (evt && evt.eventType === 'right') {
                cmp.setState({board: cmp.state.board.move(2)});
            } else if(evt && evt.eventType === 'up') {
                cmp.setState({board: cmp.state.board.move(1)});
            } else if(evt && evt.eventType === 'left') {
                cmp.setState({board: cmp.state.board.move(0)});
            } else if(evt && evt.eventType === 'down') {
                cmp.setState({board: cmp.state.board.move(3)});
            } else if(evt && evt.eventType === 'playPause') {
                cmp.restartGame();
            }
        });
    }

    _disableTVEventHandler() {
        if (this._tvEventHandler) {
            this._tvEventHandler.disable();
            delete this._tvEventHandler;
        }
    }

    componentDidMount() {
        this._enableTVEventHandler();
    }

    componentWillUnmount() {
        this._disableTVEventHandler();
    }
}

React Native for Vega

React Native for Vega Extended APIs

Supported events

Additional keys from universal remote

Supported actions

Long press detection

Example

​Supported events

​Additional keys from universal remote

​Supported actions

​Long press detection

​Example

Supported events

Additional keys from universal remote

Supported actions

Long press detection

Example