{"id":4534,"url":"https://github.com/vitalets/react-native-extended-stylesheet","last_synced_at":"2025-05-12T15:33:00.827Z","repository":{"id":3800774,"uuid":"50940339","full_name":"vitalets/react-native-extended-stylesheet","owner":"vitalets","description":"Extended StyleSheets for React Native","archived":false,"fork":false,"pushed_at":"2025-02-05T16:37:19.000Z","size":1822,"stargazers_count":2940,"open_issues_count":21,"forks_count":131,"subscribers_count":37,"default_branch":"master","last_synced_at":"2025-05-09T04:07:44.712Z","etag":null,"topics":["react","react-native","style","stylesheets","styling","theme","theming"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vitalets.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["vitalets"]}},"created_at":"2016-02-02T18:02:10.000Z","updated_at":"2025-05-08T10:46:12.000Z","dependencies_parsed_at":"2025-04-10T23:27:28.506Z","dependency_job_id":"53a56c0d-9330-4d59-9d63-c3eacde85e78","html_url":"https://github.com/vitalets/react-native-extended-stylesheet","commit_stats":{"total_commits":226,"total_committers":12,"mean_commits":"18.833333333333332","dds":"0.12389380530973448","last_synced_commit":"33736515011b02d7519a892247c37299b2a2acec"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalets%2Freact-native-extended-stylesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalets%2Freact-native-extended-stylesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalets%2Freact-native-extended-stylesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vitalets%2Freact-native-extended-stylesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vitalets","download_url":"https://codeload.github.com/vitalets/react-native-extended-stylesheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253341970,"owners_count":21893547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-native","style","stylesheets","styling","theme","theming"],"created_at":"2024-01-05T20:17:15.501Z","updated_at":"2025-05-12T15:33:00.782Z","avatar_url":"https://github.com/vitalets.png","language":"JavaScript","funding_links":["https://github.com/sponsors/vitalets"],"categories":["Components","JavaScript","动画","样式（Styling）","React, React Native"],"sub_categories":["Styling","其他","Style"],"readme":"# React Native Extended StyleSheet\n\n[![Build Status](https://travis-ci.org/vitalets/react-native-extended-stylesheet.svg?branch=master)](https://travis-ci.org/vitalets/react-native-extended-stylesheet)\n[![Coverage Status](https://coveralls.io/repos/github/vitalets/react-native-extended-stylesheet/badge.svg?branch=master)](https://coveralls.io/github/vitalets/react-native-extended-stylesheet?branch=master)\n[![npm version](https://img.shields.io/npm/v/react-native-extended-stylesheet.svg)](https://www.npmjs.com/package/react-native-extended-stylesheet)\n[![license](https://img.shields.io/npm/l/react-native-extended-stylesheet.svg)](https://www.npmjs.com/package/react-native-extended-stylesheet)\n\n\u003e ### :warning: Deprecation notice\n\u003e\n\u003e This library is **deprecated** and will no longer receive any updates or support.\n\u003e Please consider migrating to alternative solutions. See [#154](https://github.com/vitalets/react-native-extended-stylesheet/issues/154) for details.\n\nDrop-in replacement of [React Native StyleSheet](https://facebook.github.io/react-native/docs/stylesheet.html) with media-queries, variables, dynamic themes,\nrelative units, percents, math operations, scaling and other styling stuff.\n\n\u003cimg align=\"right\" src=\"https://cloud.githubusercontent.com/assets/1473072/26778748/49c190be-49eb-11e7-83a1-b06372df8d85.png\"\u003e\n\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Features](#features)\n  - [global variables](#global-variables)\n  - [local variables](#local-variables)\n  - [theming](#theming)\n  - [media queries](#media-queries)\n  - [math operations](#math-operations)\n  - [rem units](#rem-units)\n  - [percents](#percents)\n  - [scaling](#scaling)\n  - [underscored styles](#underscored-styles)\n  - [pseudo classes (:nth-child)](#pseudo-classes-nth-child)\n  - [value as a function](#value-as-a-function)\n  - [caching](#caching)\n  - [outline for debug](#outline-for-debug)\n  - [hot module reload](#hot-module-reload)\n- [API](#api)\n  - [.create()](#create)\n  - [.build()](#build)\n  - [.value()](#value)\n  - [.child()](#child)\n  - [.subscribe()](#subscribe)\n  - [.unsubscribe()](#unsubscribe)\n- [Caveats](#caveats)\n- [FAQ](#faq)\n- [Changelog](#changelog)\n- [Feedback](#feedback)\n- [License](#license)\n\n## Demo\nUse this [Expo snack](https://snack.expo.io/@vitalets/extended-stylesheet-simple) to play with Extended StyleSheets\nright in the browser or in [Expo app](https://expo.io/tools#client).\n\n## Installation\n```\nnpm i react-native-extended-stylesheet --save\n```\n\n## Usage\n1. Define styles using `EStyleSheet.create()` instead of `StyleSheet.create()`:\n\n  ```js\n  /* component.js */\n  import EStyleSheet from 'react-native-extended-stylesheet';\n  \n  // define extended styles \n  const styles = EStyleSheet.create({\n    column: {\n      width: '80%'                                    // 80% of screen width\n    },\n    text: {\n      color: '$textColor',                            // global variable $textColor\n      fontSize: '1.5rem'                              // relative REM unit\n    },\n    '@media (min-width: 350) and (max-width: 500)': { // media queries\n      text: {\n        fontSize: '2rem',\n      }\n    }\n  });\n  \n  // use styles as usual\n  class MyComponent extends React.Component {\n    render() {\n      return (\n        \u003cView style={styles.column}\u003e\n          \u003cText style={styles.text}\u003eHello\u003c/Text\u003e\n        \u003c/View\u003e\n      );\n    }\n  }  \n  ```\n\n2. In app entry point call `EStyleSheet.build()` to actually calculate styles:\n\n  ```js\n  /* app.js */\n  import EStyleSheet from 'react-native-extended-stylesheet';\n  \n  EStyleSheet.build({ // always call EStyleSheet.build() even if you don't use global variables!\n    $textColor: '#0275d8'\n  });\n  ```  \n  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n## Features\n### Global variables\nGlobal variables are passed to `EStyleSheet.build()` and available in all stylesheets.\n```js\n// app entry: set global variables and calc styles\nEStyleSheet.build({\n  $textColor: '#0275d8'\n});\n\n// component: use global variables\nconst styles = EStyleSheet.create({\n  text: {\n    color: '$textColor'\n  }\n});\n\n// global variable as inline style or as props to components\n\u003cView style = {{\n  backgroundColor: EStyleSheet.value('$textColor')\n}}\u003e\n...\n\u003c/View\u003e\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Local variables\nLocal variables can be defined directly in sylesheet and have priority over global variables.\nTo define local variable just start it with `$`:\n```js\nconst styles = EStyleSheet.create({\n  $textColor: '#0275d8',\n  text: {\n    color: '$textColor'\n  },\n  icon: {\n    color: '$textColor'\n  },\n});\n```\nLocal variables are also available in result style: `styles.$textColor`.  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Theming\nChanging app theme contains two steps:\n1. re-build app styles\n2. re-render components tree with new styles\n\nTo re-build app styles you can call `EStyleSheet.build()` with new set of global variables:\n```js\nEStyleSheet.build({\n  $theme: 'light',  // required variable for caching!\n  $bgColor: 'white',\n});\n```\n\u003e Please note that special variable **`$theme` is required** for proper caching of calculated styles.\n\nRe-rendering whole component tree is currently a bit tricky in React.  \nOne option is to wrap app into component and re-mount it on theme change:\n```js\n  toggleTheme() {\n    const theme = EStyleSheet.value('$theme') === 'light' ? darkTheme : lightTheme;\n    EStyleSheet.build(theme);\n    this.setState({render: false}, () =\u003e this.setState({render: true}));\n  }\n  render() {\n    return this.state.render ? \u003cApp/\u003e : null;\n  }\n```\nThe caveat is that all components loss their state. \nIn the future it may be possible with `forceDeepUpdate()` method (see [facebook/react#7759](https://github.com/facebook/react/issues/7759)).  \nThe approach is open for discusison, feel free to share your ideas in [#22](https://github.com/vitalets/react-native-extended-stylesheet/issues/22), \n[#47](https://github.com/vitalets/react-native-extended-stylesheet/issues/47).\n\nYou can check out full theming code in [examples/theming](examples/theming) or in [Expo snack](https://snack.expo.io/@vitalets/dynamic-themes-with-extended-stylesheets).  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Media queries\nMedia queries allows to have different styles for different screens, platform, direction and orientation.\nThey are supported as properties with `@media` prefix (thanks for idea to [@grabbou](https://github.com/grabbou),\n[#5](https://github.com/vitalets/react-native-extended-stylesheet/issues/5)).\n\nMedia queries can operate with the following values:\n\n* media type: `ios|android`\n* `width`, `min-width`, `max-width`\n* `height`, `min-height`, `max-height`\n* `orientation` (`landscape|portrait`)\n* `aspect-ratio`\n* `direction` (`ltr|rtl`)\n\nYou can use media queries on:\n* global level\n* sheet level\n* style level\n\nExamples:\n```js\n// global level\nEStyleSheet.build({\n  '@media ios': {\n    $fontSize: 12,\n  },\n  '@media android': {\n    $fontSize: 16,\n  },\n});\n\n// sheet level\nconst styles = EStyleSheet.create({\n  column: {\n    width: '80%',\n  },\n  '@media (min-width: 350) and (max-width: 500)': {\n    column: {\n      width: '90%',\n    }\n  }\n});\n\n// style level\nconst styles = EStyleSheet.create({\n  header: {\n    '@media ios': {\n      color: 'green',\n    },\n    '@media android': {\n      color: 'blue',\n    },\n  }\n});\n```\nYou can check out full example code in [examples/media-queries](examples/media-queries) or in [Expo snack](https://snack.expo.io/@gbhasha/media-queries-using-extended-stylesheets).  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Math operations\nAny value can contain **one** of following math operations: `*`, `/`, `+`, `-`. Operands can be numbers, variables and percents.  \nFor example, to render circle you may create style:\n```js\nconst styles = EStyleSheet.create({\n  $size: 20,\n  circle: {\n    width: '$size',\n    height: '$size',\n    borderRadius: '0.5 * $size'\n  }\n});\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### REM units\nSimilar to [CSS3 rem unit](http://snook.ca/archives/html_and_css/font-size-with-rem) it allows to define any integer value as relative to the root element. In our case root value is special `rem` global variable that can be set in `EStyleSheet.build()`. It makes easy to scale app depending on screen size and other conditions. Default rem is `16`.\n```js\n// component\nconst styles = EStyleSheet.create({\n  text: {\n    fontSize: '1.5rem',\n    marginHorizontal: '2rem'\n  }\n});\n// app entry\nlet {height, width} = Dimensions.get('window');\nEStyleSheet.build({\n  $rem: width \u003e 340 ? 18 : 16\n});\n```\nYou can check out full example code in [examples/rem](examples/rem) or in [Expo snack](https://snack.expo.io/@gbhasha/using-rem-units-with-extended-stylesheet).  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Percents\nPercent values are supported natively since React Native 0.43.\nEStyleSheet passes them through to original StyleSheet except cases, when you use calculations with percents,\ne.g. `\"100% - 20\"`. Percents are calculated relative to **screen width/height** on application launch.\n```js\nconst styles = EStyleSheet.create({\n  column: {\n    width: '100% - 20'\n  }\n});\n```\n\n**Percents in nested components**  \nIf you need sub-component with percent operations relative to parent component - you can achieve that with variables.  \nFor example, to render 2 sub-columns with 30%/70% width of parent column:\n```js\nrender() {\n  return (\n    \u003cView style={styles.column}\u003e\n      \u003cView style={styles.subColumnLeft}\u003e\u003c/View\u003e\n      \u003cView style={styles.subColumnRight}\u003e\u003c/View\u003e\n    \u003c/View\u003e\n  );\n}\n\n...\n\nconst styles = EStyleSheet.create({\n  $columnWidth: '80%',\n  column: {\n    width: '$columnWidth',\n    flexDirection: 'row'\n  },\n  subColumnLeft: {\n    width: '0.3 * $columnWidth'\n  },\n  subColumnRight: {\n    width: '0.7 * $columnWidth'\n  }\n});\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Scaling\nYou can apply scale to components by setting special `$scale` variable. \n```js\nconst styles = EStyleSheet.create({\n  $scale: 1.5,\n  button: {\n    width: 100,\n    height: 20,\n    marginLeft: 10\n  }\n});\n```\nThis helps to create reusable components that could be scaled depending on prop:\n```js\nclass Button extends React.Component {\n  static propTypes = {\n    scale: React.PropTypes.number\n  };\n  render() {\n    let style = getStyle(this.props.scale)\n    return (\n      \u003cView style={style.button}\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nlet getStyle = function (scale = 1) {\n  return EStyleSheet.create({\n    $scale: scale,\n    button: {\n      width: 100,\n      height: 20,\n      marginLeft: 10\n    }\n  });\n}\n```\nTo cache calculated styles please have a look on [caching](#caching) section.  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Underscored styles\nOriginal react-native stylesheets are calculated to integer numbers and original values are unavailable. \nBut sometimes they are needed. Let's take an example:  \nYou want to render text and icon with the same size and color. \nYou can take this [awesome icon library](https://github.com/oblador/react-native-vector-icons) \nand see that `\u003cIcon\u003e` component has `size` and `color` props.\nIt would be convenient to define style for text and keep icon's size/color in sync.\n```js\nconst styles = EStyleSheet.create({\n  text: {\n    fontSize: '1rem',\n    color: 'gray'\n  }\n});\n```\nIn runtime `styles` created with original react's `StyleSheet` will look like:\n```js\nstyles = {\n  text: 0\n}\n```\nBut extended stylesheet saves calculated values under `_text` property:\n```js\nstyles = {\n  text: 0,\n  _text: {\n    fontSize: 16,\n    color: 'gray'\n  }\n}\n```\nTo render icon we just take styles from `_text`:\n```js\nreturn (\n  \u003cView\u003e\n    \u003cIcon name=\"rocket\" size={styles._text.fontSize} color={styles._text.color} /\u003e\n    \u003cText style={styles.text}\u003eHello\u003c/Text\u003e\n  \u003c/View\u003e\n);\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Pseudo classes (:nth-child)\nExtended stylesheet supports 4 pseudo classes: `:first-child`, `:nth-child-even`, `:nth-child-odd`, `:last-child`. As well as in traditional CSS it allows to apply special styling for first/last items or render stripped rows.  \nTo get style for appropriate index you should use `EStyleSheet.child()` method. \nIt's signature: `EStyleSheet.child(stylesObj, styleName, index, count)`.\n```js\nconst styles = EStyleSheet.create({\n  row: {\n    fontSize: '1.5rem',\n    borderTopWidth: 1\n  },\n  'row:nth-child-even': {\n    backgroundColor: 'gray' // make stripped\n  },\n  'row:last-child': {\n    borderBottomWidth: 1 // render bottom edge for last row\n  }\n});\n...\nrender() {\n  return (\n    \u003cView\u003e\n      {items.map((item, index) =\u003e {\n        return (\n          \u003cView key={index} style={EStyleSheet.child(styles, 'row', index, items.length)}\u003e\u003c/View\u003e\n        );\n      })}\n    \u003c/View\u003e\n  );\n}\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Value as a function\nFor the deepest customization you can specify any value as a function that will be executed on EStyleSheet build.\nFor example, you may *darken* or *lighten* color of variable via [npm color package](https://www.npmjs.com/package/color): \n```js\nimport Color from 'color';\nimport EStyleSheet from 'react-native-extended-stylesheet';\n\nconst styles = EStyleSheet.create({\n  button: {\n    backgroundColor: () =\u003e Color('green').darken(0.1).hexString() // \u003c-- value as a function\n  }\n});\n\nrender() {\n  return (\n    \u003cTouchableHighlight style={styles.button}\u003e\n      ...\n    \u003c/TouchableHighlight\u003e\n  );\n}\n```\n\nThe common pattern is to use [EStyleSheet.value()](#value) inside the function to get access to global variables:\n```js\n\nEStyleSheet.build({\n  $prmaryColor: 'green'\n});\n\nconst styles = EStyleSheet.create({\n  button: {\n    backgroundColor: () =\u003e Color(EStyleSheet.value('$prmaryColor')).darken(0.1).hexString()\n  }\n});\n```\n\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Caching\nIf you use dynamic styles depending on runtime prop or you are making reusable component with dynamic styling\nyou may need stylesheet creation in every `render()` call. Let's take example from [scaling](#scaling) section:\n```js\nclass Button extends React.Component {\n  static propTypes = {\n    scale: React.PropTypes.number\n  };\n  render() {\n    let style = getStyle(this.props.scale)\n    return (\n      \u003cView style={style.button}\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nlet getStyle = function (scale = 1) {\n  return EStyleSheet.create({\n    $scale: scale,\n    button: {\n      width: 100,\n      height: 20,\n      marginLeft: 10\n    }\n  });\n}\n```\nTo avoid creating styles on every render you can use [lodash.memoize](https://www.npmjs.com/package/lodash.memoize): \nstore result for particular parameters and returns it from cache when called with the same parameters. \nUpdated example:\n```js\nimport memoize from 'lodash.memoize';\n\nlet getStyle = memoize(function (scale = 1) {\n  return EStyleSheet.create({\n    $scale: scale,\n    button: {\n      width: 100,\n      height: 20,\n      marginLeft: 10\n    }\n  });\n});\n```\nNow if you call `getStyle(1.5)` 3 times actually style will be created on the first call \nand two other calls will get it from cache.  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Outline for debug\nIt is possible to outline all components that are using EStyleSheet. For that set global `$outline` variable:\n```js\nEStyleSheet.build({$outline: 1});\n```\n\u003e Note that components without styles will not be outlined, \nbecause RN [does not support](https://github.com/facebook/react-native/issues/1768) default component styling yet.\n\nTo outline particular component set local `$outline` variable:\n```js\nconst styles = EStyleSheet.create({\n  $outline: 1,\n  column: {\n    width: '80%',\n    flexDirection: 'row'\n  },\n  ...\n});\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### Hot module reload\n[Hot module reload (HMR)](https://facebook.github.io/react-native/blog/2016/03/24/introducing-hot-reloading.html) \nallows you to change code and see live updates without loosing app state. It is very handy for tuning styles. \nEStyleSheet supports HMR with the following options:\n\n1. When you change style of component - the component is updated by HMR automatically without any effort from your side. \n2. When you change global variable or theme - you should use [HMR API](https://facebook.github.io/react-native/releases/next/#hmr-api) \n   to force style re-calculation:\n    ```js\n    // app.js\n    EStyleSheet.build({\n      $fontColor: 'black'\n    });\n    \n    ...\n    \n    module.hot.accept(() =\u003e {\n      EStyleSheet.clearCache();\n      EStyleSheet.build(); // force style re-calculation\n    });\n    ```\nSee full example of HMR [here](examples/hmr).  \n\\[[top](#react-native-extended-stylesheet)\\]\n\n## EStyleSheet API\n### .create()\n```js\n/**\n * Creates extended stylesheet object\n *\n * @param {Object} source style\n * @returns {Object} extended stylesheet object\n */\n create (source) {...}\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### .build()\n```js\n/**\n * Calculates all stylesheets\n *\n * @param {Object} [globalVars] global variables for all stylesheets\n */\n build (globalVars) {...}\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### .value()\n```js\n/**\n * Calculates particular expression.\n *\n * @param {*} value\n * @param {String} [prop] property for which value is calculated. For example, to calculate percent values \n * the function should know is it 'width' or 'height' to use proper reference value.\n * @returns {*} calculated result\n */\n value (value, prop) {...}\n```\n**Please note** that in most cases `EStyleSheet.value()` should be used inside function, not directly:\n```js\nconst styles = EStyleSheet.create({\n    button1: {\n        width: () =\u003e EStyleSheet.value('$contentWidth') + 10 // \u003c-- Correct!\n    },\n    button2: {\n        width: EStyleSheet.value('$contentWidth') + 10 // \u003c-- Incorrect. Because EStyleSheet.build() may occur later and $contentWidth will be undefined at this moment.\n    }\n});\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### .child()\n```js\n/**\n * Returns styles with pseudo classes :first-child, :nth-child-even, :last-child according to index and count\n *\n * @param {Object} stylesheet\n * @param {String} styleName\n * @param {Number} index index of item for style\n * @param {Number} count total count of items\n * @returns {Object|Array} styles\n */\n child (styles, styleName, index, count) {...}\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### .subscribe()\n```js\n/**\n * Subscribe to event. Currently only 'build' event is supported.\n *\n * @param {String} event\n * @param {Function} listener\n */\n subscribe (event, listener) {...}\n\n```\nThis method is useful when you want to pre-render some component on init.\nAs extended style is calculated after call of `EStyleSheet.build()`,\nit is not available instantly after creation so you should wrap pre-render\ninfo listener to `build` event:\n```js\nconst styles = EStyleSheet.create({\n  button: {\n    width: '80%',\n  }\n});\n\n// this will NOT work as styles.button is not calculated yet\nlet Button = \u003cView style={styles.button}\u003e\u003c/View\u003e;\n\n// but this will work\nlet Button;\nEStyleSheet.subscribe('build', () =\u003e {\n  Button = \u003cView style={styles.button}\u003e\u003c/View\u003e;\n});\n```\n\\[[top](#react-native-extended-stylesheet)\\]\n\n### .unsubscribe()\n```js\n/**\n * Unsubscribe from event. Currently only 'build' event is supported.\n *\n * @param {String} event\n * @param {Function} listener\n */\n unsubscribe (event, listener) {...}\n\n```\nUnsubscribe from event.\n\\[[top](#react-native-extended-stylesheet)\\]\n\n## Caveats\n1. **Dynamic theme change is possible only with loosing components local state**    \n   When theme styles are re-calculated - all components should be re-rendered.\n   Currently it can be done via re-mounting components tree, please see [#47].\n   \u003e Note: it is not issue if you are using state container like [Redux](https://github.com/reactjs/redux) \n   and can easily re-render app in the same state\n\n2. **Dynamic orientation change is not supported**  \n   Please see [#9] for more details.\n   \n3. **Old RN versions (\u003c 0.43) can crash the app with percent values**  \n   RN \u003e= 0.43 supports percent values natively ([#32]) and EStyleSheet since 0.5.0 just proxy percent values to RN as is ([#77]) to keep things simple.\n   Older RN versions (\u003c 0.43) can't process percents and EStyleSheet process such values.\n   So if you are using RN \u003c 0.43, you should stick to EStyleSheet@0.4.0.\n\n## FAQ\n1. **I'm getting error: `\"Unresolved variable: ...\"`**\n   - Ensure that you call `EStyleSheet.build()` in entry point of your app.\n   - Ensure that `$variable` name without typos.\n   - Ensure that you are not using `EStyleSheet.value()` before the styles are built. See [#50](https://github.com/vitalets/react-native-extended-stylesheet/issues/50) for details.\n \n## Changelog\nPlease see [CHANGELOG.md](CHANGELOG.md)\n\n## Feedback\nIf you have any ideas or something goes wrong feel free to \n[open new issue](https://github.com/vitalets/react-native-extended-stylesheet/issues/new).\n\n## License\n[MIT](LICENSE.md) @ [Vitaliy Potapov](https://github.com/vitalets)\n\n\\[[top](#react-native-extended-stylesheet)\\]\n\n\u003cdiv align=\"center\"\u003e\n* * *\u003cbr\u003e\n\u003ci\u003eIf you love :heart: JavaScript and would like to track new trending repositories, \u003cbr\u003e\nhave a look on \u003ca href=\"https://github.com/vitalets/github-trending-repos\"\u003evitalets/github-trending-repos\u003c/a\u003e.\u003c/i\u003e\n\u003c/div\u003e\n\n[#9]: https://github.com/vitalets/react-native-extended-stylesheet/issues/9\n[#16]: https://github.com/vitalets/react-native-extended-stylesheet/issues/16\n[#47]: https://github.com/vitalets/react-native-extended-stylesheet/issues/47\n[#32]: https://github.com/vitalets/react-native-extended-stylesheet/issues/32\n[#77]: https://github.com/vitalets/react-native-extended-stylesheet/issues/77\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitalets%2Freact-native-extended-stylesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvitalets%2Freact-native-extended-stylesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvitalets%2Freact-native-extended-stylesheet/lists"}