Wondering what’s next for npm?Check out our public roadmap! »

    react-native-tvfocus
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

    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>;
    }

    Install

    npm i react-native-tvfocus

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar