Focus not persisted on back navigation with nested Stack navigators

Vega Open Beta Bug Reports
4

Hi @Chandraprakash_Sutha

Thanks for sharing this issue, I looked into it and was able to reproduce the issue.
I was able to resolve it as well.

Instead of createStackNavigator in AppStack.tsx, I used createNativeStackNavigator and in the imports, I used
import {createNativeStackNavigator} from '@amazon-devices/react-native-screens/native-stack';

You’ll get more details on createNativeStackNavigator here.
This resolved the focus issue.

However, I had one more concern.
In HomeScreen.tsx you have used the following piece of code

    useCallback(() => {
      containerRef.current?.setNativeProps({hasTVPreferredFocus: true});
    }, []),
  );

But, in order to restore focus when a user navigates back to the top of the previous page by setting up a ref to keep track of the last focused item, by updating the reference when an item receives focus, and then by using the useFocusEffect() hook with FocusManager.focus() to restore focus.
In your shared code snippet, I was not able to find where you set up a ref to keep track of the last focused item, by updating the reference when an item receives focus.
Hence, sharing the below steps to restore focus.

1.To keep track of the last focused item on the page, set up a ref:

const lastFocusItemRef = React.useRef<TouchableOpacity | null>(null);

2.After an item receives focus, update the reference:

const FocusableView = memo(
forwardRef<TouchableOpacity, FocusableViewProps>((props, ref) => {
   const [focused, setFocused] = useState(false);
   const localRef = React.useRef<TouchableOpacity>(null);

   useImperativeHandle(ref, () => localRef.current!);

   const handleFocus = useCallback(
      (event: NativeSyntheticEvent<TargetedEvent>) => {
      props.onFocus?.(event);
      setFocused(true);
      props.onFocusedRefUpdate ?.(localRef);
      console.log("item focused");
      },
      [props],
   );

   ...
})
)

3.To restore focus when the previous page gets mounted, use the useFocusEffect() hook provided by React Navigation, and combine the hook with FocusManager.focus():

useFocusEffect(
    FocusManager.focus(findNodeHandle(focusedRef.current));
);

Hope this helps and using createNativeStackNavigator solves your issue.
Let me know if it works.

Warm regards,
Ivy