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 does not allow overriding the default behavior on Kepler. 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 Kepler. 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 Kepler:

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

Manifest additions

To observe button events on the remote such as left, right, up, and down, you need to add this service entry in your manifest.toml file.

#Required for remote button events.
[[wants.service]]
id = "com.amazon.inputd.service"

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 event 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 '@amzn/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>
    );

};
  

Last updated: Sep 30, 2025