react-native-tvfocus

React Native TV Focus Manager

React Native tvOS and Android TV library to improve focus management with multiple screens.

Usage

Each screen should be wrapped in a FocusContext, which uses an active prop to set if any focusable items should be focusable.

All focusable items should be wrapped in a Focusable component. React Native's Pressable, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback and Button components can be replaced with components from this library.

import React = require('react');
import { View } from 'react-native';
import { FocusContext, Button } from 'react-native-tvfocus';
import { NavigationContainer, useIsFocused } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
    const active = useIsFocused();

    return <FocusContext active={active}>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Text>Home Screen</Text>
            <Button onPress={() => {}}>Button</Button>
        </View>
    </FocusContext>;
}

const Stack = createStackNavigator();

export default function App() {
    return <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
    </NavigationContainer>;
}