iPad Hover effects in React Native 0.74

Contents

• Introduction
• The new thing
• Demo
  • Before
  • After
• That's all

Introduction

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:

• Yoga 3.0
• New Architecture: Bridgeless by Default
• New Architecture: Batched onLayout Updates
• Yarn 3 for New Projects

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!

Demo

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

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

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

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

Before

After

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.