Bug - focus a touchable by reference working on web but not Android

I’m trying to get a TouchableOpacity to get focus on press of a button. To do so I tried to use refs. It works on a web browser but not an Android device - the focus is never called.

import React, { useRef, useState } from 'react';
import {Text, TouchableOpacity,View, findNodeHandle, Button} from 'react-native';

export default function App() {
  const [focused, setFocused] = useState(0);
  const touchableRef = useRef();

  const setFocusedElement = () => {
      setFocused(1);
  };

  return (
    <View>
      <TouchableOpacity ref={touchableRef} onFocus={() => setFocusedElement()}>
        <Text>Hello, I should be focused. {focused}</Text>
        <Button title="try" onPress={() => touchableRef.current.focus()} />
      </TouchableOpacity>
    </View>
  );
}

Here is a snack showing the issue. You can see that it focuses on web but not on an Android device. frisky waffle2 - Snack

I also opened a bug report on RN github… https://github.com/facebook/react-native/issues/32121

Thanks ahead for helping.

Bump :slight_smile:

I don’t see anything in the API about an onFocus or focus() for TouchableOpacity. I do see onFocus mentioned as a possible prop for TouchableWithoutFeedback, though. And I suppose if it accepts an onFocus prop then it seems likely to also support focus().

I gave it a quick try, but got an error about touchableRef.current.focus not being a function. Not sure why that would be.

Either way it doesn’t seem like anything to do with Expo, specifically and your React Native issue is probably the place to discuss this.

Okay, thank you. TouchableOpacity inherits from TouchableWithoutFeedback so it has onFocus. And in my snack you can see the difference between web and Android platforms - that’s why I thought maybe expo has something to do with it, but I guess not, it’s probably a RN bug.

Yes, I think so