Focus Manager

import { FocusManager } from "@amazon-devices/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;

getFocused: () => number;

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

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

clearNextFocus: (fromTag: number) => void;

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

focus: (tag: number) => void;

blur: (tag: number) => void;