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

Expo Development Tools
1

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… Programmatically focusing a touchable works on web, not on Android · Issue #32121 · facebook/react-native · GitHub

Thanks ahead for helping.

2

Bump :slight_smile:

4

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.

5

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.

6

Yes, I think so

7

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.