react-native-tvfocus/README.md

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

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.

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