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:

import React, { useState } from 'react';

import {View, Text, StyleProp, TouchableOpacityProps, TouchableOpacity, ViewProps} from 'react-native';

import { tw } from 'Tailwind';

interface IProps extends TouchableOpacityProps {

  title: string;

  style?: StyleProp<ViewProps>;

}

export const Button = ({title, style, ...props}: IProps) => {

  let [isHovered, setIsHovered] = useState(false)

  let bgColor = isHovered ? 'bg-blue-500' : 'bg-cyan'

  return (

    <TouchableOpacity 

      {...props}

      // @ts-ignore

      onMouseEnter={() => setIsHovered(true)}

      onMouseLeave={() => setIsHovered(false)}

    >

      <View style={[tw(`${bgColor} rounded p-3 w-24 items-center`), style]}>

        <Text style={tw('text-white')}>{title}</Text>

      </View>

    </TouchableOpacity>

  );

};

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.