Hooks for implementing complex functionality in React Native for web and Expo.
A closer look at how the hooks work here.
yarn add react-native-web-hooks
or
npm install --save react-native-web-hooksImport the library into your JavaScript file:
import {
useDimensions,
useActive,
useFocus,
useHover,
useREM,
useScaledSize,
} from 'react-native-web-hooks';Use these in place of rem font sizes like: font-size: 1.3rem.
Note: this isn't a hook anymore and will be moved out in the future.
const fontSize = useREM(1.3);
return <Text style={{ fontSize }} />;These change based on the width of the screen.
const fontSize = useScaledSize(1.5);
return <Text style={{ fontSize }} />;Note that fontScale is hard-coded to 1 on the react-native-web side and shouldn't be used to calculate dynamic font sizes.
const {
window: { width, height, fontScale, scale },
screen,
} = useDimensions();It's best to style a view based on that own view's size and not the window size. To make this easier you can use the useLayout hook!
🚨 Using
onLayoutmay require you to installresize-observer-polyfill. Learn more in the official Expo docs
const {
onLayout,
width,
height,
x,
y
} = useLayout();
return <View onLayout={onLayout} />These will be replaced by React Flare when it's released.
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 = '#' }) {
const ref = useRef(null);
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,
isHovered && styles.hover,
isFocused && styles.focused,
isActive && styles.active,
]}>
{children}
</Text>
);
}
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',
},
});Import the library into your JavaScript file:
import { Hoverable, Resizable } from 'react-native-web-hooks';You can wrap a function or a component.
import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { Hoverable } from 'react-native-web-hooks';
const createLogger = (...msg) => () => {
console.log(...msg);
};
class App extends Component {
render() {
return (
<View>
<Hoverable onHoverIn={createLogger('start hover')} onHoverOut={createLogger('end hover')}>
{isHovered => (
<TouchableOpacity accessible style={{ backgroundColor: isHovered ? '#333' : '#fff' }}>
<Text>Welcome to React</Text>}
</TouchableOpacity>
)}
</Hoverable>
</View>
);
}
}Observe window resize events.
return (
<Resizable>
{layout => <View style={{ width: layout.width / 2, height: layout.width / 2 }} />}
</Resizable>
);![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent