CODEWITHSUNDEEP
react-nativereact-navigationtvosandroid-tv
Nick Volpe
Nick Volpe

Reputation: 21

How to properly handle a navigation stack with React Native tvOS / Android TV

I am using react-native-tvos to build a tvOS and Amazon FireStick app. However I am running into a problem with react-navigation. Screens that are added to the navigation stack are still active in the background. This causes the focus engine to get confused. Using the directional pad on the remote the focus will shift between the non-visible screen on the bottom of the stack and the currently displayed screen. I am looking for suggestions on how to solve this problem.

I have read that other people have experienced this problem with react-navigation and react-native-navigation. But I did not find solutions.

Upvotes: 2

Views: 2312

Answers (2)

Moshe Rimok
Moshe Rimok

Reputation: 51

I've been working on AndroidTV project and experienced focus problems with
react-native-navigation too. When I navigate to other screens, the focus of the Touchable components is ignored.
I managed to solve that by adding the react-native-screens package (which react-native-navigation defined it as a must dependency) then in my app.js I added:

import {enableScreens} from 'react-native-screens';
enableScreens();

Then the focus has been returned to work as expected.

I Hope it will work for you.

Upvotes: 1

Tagir
Tagir

Reputation: 11

If you are using react-native-tvos version, then follow this issue in their repo.

As for a temporary solution, I can recommend hiding your content yourself. Take a look at my implementation:

import React from "react";
import { View } from "react-native";

// That's a HOC to know when the current Screen is focused
import withScreenFocusing from "../components/HOC/WithScreenFocusing";

const FocusHider = ({ isFocused, children }) => {
  return (
    <View style={{ display: isFocused ? "flex" : "none" }}>{children}</View>
  );
};

export default withScreenFocusing(FocusHider);

And then use it as such:

 <FocusHider>
   <YourAwesomeContent />
 </FocusHider>

Just in case, the HOC I mentioned there is just useIsFocused from @react-navigation/native

Upvotes: 1

Related Questions