https://github.com/mrousavy/react-native-style-utilities

Fully typed hooks and utility functions for the React Native StyleSheet API
https://github.com/mrousavy/react-native-style-utilities

findstyle library native react registered style useflatstyle usestyle utilities utils

Last synced: 1 day ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mrousavy/react-native-style-utilities
• Owner: mrousavy
• License: mit
• Created: 2021-04-16T09:58:42.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-07T20:01:02.000Z (over 2 years ago)
• Last Synced: 2024-09-24T12:48:46.337Z (about 1 month ago)
• Topics: findstyle, library, native, react, registered, style, useflatstyle, usestyle, utilities, utils
• Language: JavaScript
• Homepage: https://gist.github.com/mrousavy/0de7486814c655de8a110df5cef74ddc
• Size: 241 KB
• Stars: 92
• Watchers: 4
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  
react-native-style-utilities

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

  


  
npm i react-native-style-utilities

  




## ESLint Setup

If you're using the [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) plugin, add the following to your `.eslintrc.js`:

```js

"react-hooks/exhaustive-deps": [

  "error",

  {

    additionalHooks: "(useStyle|useFlatStyle)",

  },

],

```







## `useStyle`

A hook to memoize dynamic styles.

> See ["Memoize!!! 💾 - a react (native) performance guide"](https://gist.github.com/mrousavy/0de7486814c655de8a110df5cef74ddc)

### 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

```tsx

return 

```

#### Good

```tsx

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

return 

```

### Arrays

`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 

```







## `useFlatStyle`

Same as `useStyle`, but flattens ("merges") the returned values into a simple object with [`StyleSheet.flatten(...)`](https://reactnative.dev/docs/stylesheet#flatten).

> See ["Memoize!!! 💾 - a react (native) performance guide"](https://gist.github.com/mrousavy/0de7486814c655de8a110df5cef74ddc)

```tsx

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(...)`).

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

}

```