ref does not work in button

Explain what you did (Required)

My use case: I’m using react-native-web and I want to know if the button is hovered or not. So I need to reference the button component.

But I think it will be helpful to reference the button in all platform.

Expected behavior (Required)

It should forward the ref

Describe the bug (Required)

It is working perfectly in 3.30 but failed in the latest version. I checked the change log and I found the reason is the button component has been converted to functional. (https://github.com/react-native-elements/react-native-elements/commit/2f50ef068c85d51ed5f43bfb9831ddda432e409f#)

To Reproduce (Required)

const buttonRef = useRef(null)
const isHovered = useHover(buttonRef)
const isFocused = useFocus(buttonRef)
const isActive = useActive(buttonRef)

...

<Button
    ref={buttonRef}
/>

Screenshots (Required)

Your Environment (Required):

software	version
react-native-elements	^3.3.2
react-native	^0.63.4

[arpitBhalla]

Hey @uwwangxiangyu can we do like this?

const MyButton=React.forwardRef((props,ref)=><Button
   TouchableComponent={() => (
       <Pressable ref={ref} {...props} />
     )}
/>)

Then use it

import React, { useRef } from 'react'
import { useActive, useFocus, useHover } from 'react-native-web-hooks'

const buttonRef = useRef(null)
const isHovered = useHover(buttonRef)
const isFocused = useFocus(buttonRef)
const isActive = useActive(buttonRef)

<MyButton
   ref={buttonRef}
   buttonStyle={backgroundColor: isHovered ? '#58b1ba' : '#4fa9b3'}
/>

[uwwangxiangyu]

@uwwangxiangyu Can you please provide your code, so I can test it

Just reference the button component.

For my case, I’m using react-native-web so I have something like this. You don’t need to test like this, you can just test if the buttonRef is referencing the button components, and there is no warning like Attempts to access this ref will fail.

import React, { useRef } from 'react'
import { useActive, useFocus, useHover } from 'react-native-web-hooks'

const buttonRef = useRef(null)
const isHovered = useHover(buttonRef)
const isFocused = useFocus(buttonRef)
const isActive = useActive(buttonRef)

<Button
    ref={buttonRef}
/>