[0.76.4] View : onHoverIn / onHoverOut not implemented?

[gaeldestrem]

Environment

react-native -v: 15.0.1
npm ls react-native-macos: : 0.76.4
node -v: 18.20.5
npm -v: 10.8.2
yarn --version: 1.22.1
xcodebuild -version: Xcode 16.1 (Build version 16B40)

Steps to reproduce the bug

I am trying to implement a style effect triggered when the mouse hovers over an item.

However, I’ve encountered a challenge because the onHoverIn and onHoverOut hooks do not seem to be implemented at the moment (The same implementation was working on previous architecture).

Questions:

1. Are there any plans to add support for onHoverIn and onHoverOut hooks in future updates?
2. If not, is there a recommended workaround to achieve similar hover effects using the current functionalities available?

I would appreciate any guidance or suggestions you might have. Thank you!

Expected Behavior

No response

Actual Behavior

No response

Reproducible Demo

No response

Additional context

No response

[Saadnajmi]

I think they're implemented on pressable, and on view you get "onMouseEnter" and "onMouseLeave". Same callback, but different names. Pressable is the cross platform component with better cross platform names while View is a lil more low level names

[gaeldestrem]

I am using these methods and have a custom Button component with the following implementation, but I didn’t manage to see any logs or hover effects when interacting with it. I will try share a reproducible example on a blank project

export const UIButton: UIButtonProps = ({
  children,
  buttonColor,
  disabled,
  classes = '',
  icon = null,
  ...props
}) => {
  const backgroundColor = colors[buttonColor || 'primary'];
  const [hovered, setHovered] = useState(false);

  const handleHoverIn = useCallback(() => {
    console.log('onHoverIn');
    setHovered(true);
  }, []);

  const handleHoverOut = useCallback(() => {
    console.log('onHoverOut');
    setHovered(false);
  }, []);

  const handleMouseEnter = useCallback(() => {
    console.log('onMouseEnter');
    setHovered(true);
  }, []);

  const handleMouseLeave = useCallback(() => {
    console.log('onMouseLeave');
    setHovered(false);
  }, []);

  console.log('hovered', hovered);

  return (
    <Pressable
      cursor={disabled ? 'not-allowed' : 'pointer'}
      onHoverIn={handleHoverIn}
      onHoverOut={handleHoverOut}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      disabled={disabled}
      style={tw.style(
        'px-3 py-2 rounded-full flex flex-row items-center gap-2',
        disabled ? 'bg-gray-500' : backgroundColor(hovered),
        classes,
      )}
      {...props}>
      <Text style={tw`text-base text-white`}>{children}</Text>
      {icon}
    </Pressable>
  );
};

[bear-ei]

I am using these methods and have a custom Button component with the following implementation, but I didn’t manage to see any logs or hover effects when interacting with it. I will try share a reproducible example on a blank project

export const UIButton: UIButtonProps = ({
  children,
  buttonColor,
  disabled,
  classes = '',
  icon = null,
  ...props
}) => {
  const backgroundColor = colors[buttonColor || 'primary'];
  const [hovered, setHovered] = useState(false);

  const handleHoverIn = useCallback(() => {
    console.log('onHoverIn');
    setHovered(true);
  }, []);

  const handleHoverOut = useCallback(() => {
    console.log('onHoverOut');
    setHovered(false);
  }, []);

  const handleMouseEnter = useCallback(() => {
    console.log('onMouseEnter');
    setHovered(true);
  }, []);

  const handleMouseLeave = useCallback(() => {
    console.log('onMouseLeave');
    setHovered(false);
  }, []);

  console.log('hovered', hovered);

  return (
    <Pressable
      cursor={disabled ? 'not-allowed' : 'pointer'}
      onHoverIn={handleHoverIn}
      onHoverOut={handleHoverOut}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      disabled={disabled}
      style={tw.style(
        'px-3 py-2 rounded-full flex flex-row items-center gap-2',
        disabled ? 'bg-gray-500' : backgroundColor(hovered),
        classes,
      )}
      {...props}>
      <Text style={tw`text-base text-white`}>{children}</Text>
      {icon}
    </Pressable>
  );
};

I upgraded to 0.76.5 today and noticed that the new architecture is enabled by default starting from version 0.76.0. However, I confirmed with developers in other issues that the new architecture is not yet ready for react-native-macos. Perhaps you can try using RCT_NEW_ARCH_ENABLED=0 bundle exec pod install to explicitly disable the new architecture. In my own project, after disabling the new architecture, onHoverIn / onHoverOut are working well.

[Saadnajmi]

A question, are people creating new macOS projects using react-native-macos-init seeing the new architecture enabled? If so, that's a bug on our part since we haven't finished the Fabric implementation.

[bear-ei]

A question, are people creating new macOS projects using react-native-macos-init seeing the new architecture enabled? If so, that's a bug on our part since we haven't finished the Fabric implementation.

Yes. Yesterday, I tried creating a new 0.76.5 project using react-native-macos-init and found that the new architecture was enabled by default. Then I had to manually disable it.