0

I am working Android TV App using React Native. i am stuck in focus problem. I have a problem where the focus when returning back to a screen always goes to the first touchable component and not to the component which triggered the showing of second screen. help me ?

ViShU
  • 300
  • 2
  • 10
  • Are you using class Component or Functional Component ? – Kailash Jun 28 '22 at 17:59
  • I am Using functional component – ViShU Jun 28 '22 at 18:15
  • import { useIsFocused } from '@react-navigation/native'; => make use of this hook to detect when your screen is focused and then with the help of useEffect you focus on your component. First you assign 1 reference to your component, Second onFocus of the screen use the component-reference to focus on it. – Kailash Jun 28 '22 at 18:39
  • Do you want to focus on any Input Field or button ? – Kailash Jun 28 '22 at 18:48
  • i want to focus on same item when i am back from next screen – ViShU Jun 29 '22 at 04:44
  • @Kailash any solution of this problem (https://stackoverflow.com/questions/72785921/how-to-focus-on-button-from-second-textinput-using-onsubmiteediting-for-react-na) – ViShU Jun 29 '22 at 04:47

1 Answers1

-1

import React, { useEffect, useRef} from 'react';
import { useIsFocused } from '@react-navigation/native';

const Screen = (props) => {

const referenceComponent = useRef();
let isFocused = useIsFocused();

useEffect(() => {

//Use focus statement here 
//something like - referenceComponent.current.focus(); 

}, [isFocused]);


return <View>
         /** other components **/

        <ComponentToBeFocused ref={referenceComponent}/>

    <View>

}
Kailash
  • 777
  • 4
  • 19
  • `focus()` is not a method on focusable refs in React Native. The component should be a TouchableOpacity and focused with `ref.current.setNativeProps({ hasTVPreferredFocus: true })`. However this may not necessarily work depending on if the an item has already been focused on pressing back. – Mr. Robot Sep 12 '22 at 08:47