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
useEffecthook 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 usefindNodeHandleas shown in example to resolve type related issues.
Last updated: Sep 30, 2025
