iPad Hover effects in React Native 0.74

New feature, that you probably missed

React Native



React Native 0.74 has been released in April of 2024. It's been a great release packed with over 1600 commits of fixes and improvements!

Some of the highlights include:

You can read the full release blog post here: https://reactnative.dev/blog/2024/04/22/release-0.74

The new thing

While working on React Native visionOS I've added a new API that adds a hover effect when the user looks at an element. As it turns out, the same API is used on iPadOS to apply hover effects when using a mouse!

Later, I teamed up together with Saad Najmi from Microsoft to create a RFC which described this feature, you can check it here.

After the idea got validated in the RFC, Saad created a PR for it.

And that's how the new cursor style got introduced!


If you add this style to any view it will have a hover effect on iPad:

<TouchableOpacity style={{ cursor: "pointer" }}>  
	<Text>Click me</Text>  

Note: It doesn't have to be a Touchable view.

I've added the style to built-in New App Screen:



Adding this feature to your app can greatly improve your users experience on iPad.

That's all

Thanks for reading! I hope you found this article useful. If you have any questions or feedback, feel free to reach out to me on Twitter.

Huge thanks to Saad for implementing this feature, make sure you follow him on Twitter.