Fully typed hooks and utility functions for the React Native StyleSheet API
npm i react-native-style-utilities
If you're using the eslint-plugin-react-hooks plugin, add the following to your .eslintrc.js:
"react-hooks/exhaustive-deps": [
"error",
{
additionalHooks: "(useStyle|useFlatStyle)",
},
],A hook to memoize dynamic styles.
By using useStyle the object { height: number } gets memoized and will only be re-created if someDynamicValue changes, resulting in better optimized re-renders.
return <View style={{ height: someDynamicValue }} />const style = useStyle(() => ({ height: someDynamicValue }), [someDynamicValue])
return <View style={style} />useStyle can also be used to join arrays together, also improving re-render times.
return <View style={[styles.container, props.style, { height: someDynamicValue }]} />const style = useStyle(
() => [styles.container, props.style, { height: someDynamicValue }],
[props.style, someDynamicValue]
);
return <View style={style} />Same as useStyle, but flattens ("merges") the returned values into a simple object with StyleSheet.flatten(...).
const style1 = useStyle(
() => [styles.container, props.style, { height: someDynamicValue }],
[props.style, someDynamicValue]
);
style1.borderRadius // <-- does not work, `style1` is an array!
const style2 = useFlatStyle(
() => [styles.container, props.style, { height: someDynamicValue }],
[props.style, someDynamicValue]
);
style2.borderRadius // <-- works, will return 'number | undefined'A helper function to find a given style property in any style object without using expensive flattening (no StyleSheet.flatten(...)).
function Component({ style, ...props }) {
const borderRadius = style.borderRadius // <-- does not work, style type is complex
const borderRadius = findStyle(style, "borderRadius") // <-- works, is 'number | undefined'
}