as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

Focus Manager

The FocusManager module provides custom focus management functionality based on You.i TV's module.

It aims to provide a way for you to change the way focus transitions occur between components, as compared to the default behavior in React Native. The APIs are imperative in nature as they help app developers separate business logic from layout logic.

Example Usage

The following example is adapted from the You.i focus-management example code on GitHub.

import { FocusManager } from "@amzn/react-native-kepler";
import React, { useRef } from 'react';
import { findNodeHandle, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const FocusControl = () => {
    const touchableRef = useRef<TouchableOpacity>(null);

    return (
        <View style={styles.container}>
            <TouchableOpacity style={styles.button}
                              onPress={() => {
                                  console.log('[Youi.TV demo] focus source pressed');
                                  if (touchableRef?.current) {
                                      FocusManager.focus(findNodeHandle(touchableRef?.current));
                                  }
                              }}
            ><Text style={styles.button_title}>{"Press Me"}</Text></TouchableOpacity>
            <TouchableOpacity
                ref={touchableRef}
                onPress={() => {
                    console.log('[Youi.TV demo] focus target pressed');
                }}
            ><Text style={styles.button_title}>{"I will gain focus"}</Text></TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        backgroundColor: '#33363b',
        borderRadius: 10,
        paddingHorizontal: 10,
        paddingVertical: 12,
    },
    button_title: {
        color: '#e6e6e6',
        fontFamily: 'Amazon-Ember-Regular',
        fontSize: 20
    },
});

export default FocusControl;

Methods

getFocused()

getFocused: () => number;

Retrieves the tag of the current focused component.

setNextFocus()

setNextFocus: (fromTag: number, toTag: number, direction: string) => void;

Sets the next focus in the specified direction, from the component indicated by fromTag to the component indicated by toTag.

The list of possible directions is as follows:

export type FocusDirection =
    | 'up'
    | 'down'
    | 'left'
    | 'right';

clearNextFocus()

clearNextFocus: (fromTag: number) => void;

Clears any focus overrides created by setNextFocus starting from the component indicated by fromTag.

setFocusRoot()

setFocusRoot: (tag: number, isRoot: boolean) => void;

Sets whether focus can leave the component indicated by fromTag and its children.

focus()

focus: (tag: number) => void;

Brings the component indicated by tag into focus.

blur()

blur: (tag: number) => void;

Removes the component indicated by tag from focus.

See Also

Known Issues

  • Calling these APIs from the useEffect hook can fail the first time that the component is mounted. This occurs due to a known issue in Kepler where useEffect can execute earlier than expected. You can work around this issue by adding a timeout/delay to your useEffect logic.
  • tag* parameters of the api accept either ref or the tag of the component. However, there is an issue with typechecking if a ref is used directly. Please use findNodeHandle as shown in example to resolve type related issues.

Last updated: Sep 30, 2025