One of the first big questions a lot of Expo web users have is how to do pseudo-classes in React Native. As you may know, the React Native StyleSheet API has no concept of hover, active, visited, focused, etc. So the implementation isn’t what you might think. Instead of defining custom style properties, we use state, and hooks such as useHover and useFocus.

Because I was using these hooks so often, I rolled them all into one convenient library react-native-web-hooks , which I’ll now demonstrate for you:

First, install it.

yarn add react-native-web-hooks



or



npm install --save react-native-web-hooks

Then use it!

import { useRef } from 'react';

import { StyleSheet, Linking, Text, Platform } from 'react-native';



import { useHover, useFocus, useActive } from 'react-native-web-hooks'; function Link({ children, href = '#' }) {

// Create a ref to bind the hooks to

const ref = useRef(null); // Pass that ref to the hooks...

const isHovered = useHover(ref);

const isFocused = useFocus(ref);

const isActive = useActive(ref);



return (

<Text

accessibilityRole="link"

href={href}

draggable={false}

onPress={() => Linking.openURL(href)}

tabIndex={0}

ref={ref}

style={[

styles.text, // When these booleans become true, the following styles will be applied...

isHovered && { color: 'blue' },

isFocused && { color: 'green' },

isActive && { color: 'red' },

]}>

{children}

</Text>

);

}

And just like that you now have a universal link element with pseudo-classes applied to it!

:hover => useHover :focus => useFocus :active => useActive :visited =X> No JS Support 🙁 This is due to security, imagine being able to load a bunch of invisible links on the page and seeing if the user had visited them in the past.

In the future, this method will be replaced by React Flare which is being actively worked on at Facebook. I imagine the syntax will be pretty similar, so until that happens I would highly recommend using this approach.

For more cool Expo web facts, check out this Gitbook I put together:

If you find a bug or want to contribute to this library please feel free!

If you have any more Expo web questions feel free to ask on Twitter