From 9df6eb158759f4b34d52468301431eaef1627b49 Mon Sep 17 00:00:00 2001
From: RicardasN <rihaddas@gmail.com>
Date: Thu, 23 May 2024 14:01:08 +0100
Subject: [PATCH] fix(AndroidTV:TemplateStarter): Fix intial focus and prevent
 focus loss

---
 packages/template-starter/src/app/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/template-starter/src/app/index.tsx b/packages/template-starter/src/app/index.tsx
index bdc00fe10..77c70a43e 100644
--- a/packages/template-starter/src/app/index.tsx
+++ b/packages/template-starter/src/app/index.tsx
@@ -1,5 +1,5 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { Text, Image, View, PixelRatio, TouchableOpacity, StatusBar, ScrollView } from 'react-native';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { Text, Image, View, PixelRatio, TouchableOpacity, StatusBar, ScrollView, findNodeHandle } from 'react-native';
 import { Api } from '@rnv/renative';
 import { ICON_LOGO, CONFIG, ThemeProvider, ThemeContext, testProps } from '../config';
 import packageJson from '../../package.json';
@@ -11,6 +11,7 @@ const App = () => (
 );
 
 const AppThemed = () => {
+    const buttonRef = useRef(null);
     const { theme, toggle, dark } = useContext(ThemeContext);
 
     const [pixelRatio, setPixelRatio] = useState(1);
@@ -51,8 +52,13 @@ const AppThemed = () => {
                 }`}</Text>
                 <Text style={theme.styles.textH3}>{`pixelRatio: ${pixelRatio}, ${fontScale}`}</Text>
                 <TouchableOpacity
+                    ref={buttonRef}
                     onPress={toggle}
                     style={theme.styles.button}
+                    // Set the initial AndroidTV and tvOS focus to be on the button
+                    hasTVPreferredFocus
+                    // On AndroidTV going up can appear as lost focus, so block focus up
+                    nextFocusUp={findNodeHandle(buttonRef.current) || undefined}
                     {...testProps('template-starter-home-screen-try-my-button')}
                 >
                     <Text style={theme.styles.buttonText}>Try me!</Text>