Polishing the UI
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
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