Package Exports

react-native-style-utilities

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-style-utilities) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-style-utilities

Fully typed hooks and utility functions for the React Native StyleSheet API

npm i react-native-style-utilities

`useStyle`

A hook to memoize dynamic styles.

Objects

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

return <View style={{ height: someDynamicValue }} />

Good

const style = useStyle(() => ({ height: someDynamicValue }), [someDynamicValue])

return <View style={style} />

Arrays

useStyle can also be used to join arrays together, also improving re-render times.

Bad

return <View style={[styles.container, props.style, { height: someDynamicValue }]} />

Good

const style = useStyle(
  () => [styles.container, props.style, { height: someDynamicValue }],
  [props.style, someDynamicValue]
);

return <View style={style} />

`useFlatStyle`

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'

`findStyle`

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'
}