as

Settings
Sign out
Notifications
Alexa
亚马逊应用商店
AWS
文档
Support
Contact Us
My Cases
新手入门
设计和开发
应用发布
参考
支持
感谢您的访问。此页面目前仅提供英语版本。我们正在开发中文版本。谢谢您的理解。

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