useStyle, useFlatStyle and findStyle helper functions for the React Native StyleSheet API
npm install react-native-style-utilitiesFully typed hooks and utility functions for the React Native StyleSheet API
npm i react-native-style-utilities
useStyleA 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.
#### Bad
``tsx`
return
#### Good
`tsx
const style = useStyle(() => ({ height: someDynamicValue }), [someDynamicValue])
return
`
useStyle can also be used to join arrays together, also improving re-render times.
#### Bad
`tsx`
return
#### Good
`tsx
const style = useStyle(
() => [styles.container, props.style, { height: someDynamicValue }],
[props.style, someDynamicValue]
);
return
`
Same as useStyle, but flattens ("merges") the returned values into a simple object with StyleSheet.flatten(...).
`tsxstyle1
const style1 = useStyle(
() => [styles.container, props.style, { height: someDynamicValue }],
[props.style, someDynamicValue]
);
style1.borderRadius // <-- does not work, 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(...)).
`tsx``
function Component({ style, ...props }) {
const borderRadius = style.borderRadius // <-- does not work, style type is complex
const borderRadius = findStyle(style, "borderRadius") // <-- works, is 'number | undefined'
}