@expo/style-utils

Components for reacting to pseudo-classes and observable styles in React Native.

Installation

``bash
yarn add @expo/style-utils
`

$3

Import the library into your JavaScript file:

`js
import { useDimensions, useActive, useFocus, useHover } from '@expo/style-utils';
`

Get dimensions

`jsx
const {
window: { width, height, fontScale, scale },
screen,
} = useDimensions();
`

Create pseudo class styles

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

import { useHover, useFocus, useActive } from './src';

function Link({ children, href = '#' }) {
const ref = useRef(null);

const { isHovered } = useHover(ref);
const { isFocused } = useFocus(ref);
const { isActive } = useActive(ref);

return (
accessibilityRole="link"
href={href}
draggable={false}
onPress={() => Linking.openURL(href)}
tabIndex={0}
ref={ref}
style={[
styles.text,
isHovered && styles.hover,
isFocused && styles.focused,
isActive && styles.active,
]}>
{children}

);
}

const styles = StyleSheet.create({
text: {
...Platform.select({
web: {
cursor: 'pointer',
outlineStyle: 'none',
borderBottomWidth: 1,
borderBottomColor: 'transparent',
transitionDuration: '200ms',
},
default: {},
}),
},
active: {
color: 'blue',
borderBottomColor: 'blue',
opacity: 1.0,
},
hover: {
opacity: 0.6,
},
focused: {
borderBottomColor: 'black',
},
});
`

$3

Import the library into your JavaScript file:

`js
import { Hoverable, Resizable } from '@expo/style-utils';
`

You can wrap a function or a component.

`tsx
import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Hoverable } from '@expo/style-utils';

const createLogger = (...msg) => () => {
console.log(...msg);
};

class App extends Component {
render() {
return (


{isHovered => (

Welcome to React}

)}


);
}
}
`

Observe window resize events.

`tsx
return (

{layout => }

);
``