This video is available to students only

There are other things that make the Desktop experience different from mobiles. Namely, we need to give more feedback to the user whenever the mouse is used or some UI element is highlighted.

Adding hover states#

As you develop your app, you will realize that React-Native-macOS still has some way to go in providing all the APIs you will need. Unfortunately hover states is one of those cases.

We will start by using an undocumented API (as of this writing) to add hover states to our buttons. Let's start by creating a new components folder in the src directory and then creating a Button component:

Let's quickly go over the component. First we create the interface for our button. Since we pretty much want to maintain the behavior of all the buttons in the app, there is no need for us to re-invent the wheel here - we can just re-use the TouchableOpacityProps types provided by React Native. We added two extra props however: a title string and a style object.

 

This page is a preview of Building React Native Apps for Mac

Start a new discussion. All notification go to the author.