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();
}
}
Last updated: May 13, 2026
