{"id":4537,"url":"https://github.com/robinpowered/glamorous-native","last_synced_at":"2025-09-28T23:30:22.168Z","repository":{"id":20983260,"uuid":"91484268","full_name":"robinpowered/glamorous-native","owner":"robinpowered","description":"DEPRECATED: 💄 React Native component styling solved","archived":true,"fork":false,"pushed_at":"2022-08-27T21:14:26.000Z","size":339,"stargazers_count":569,"open_issues_count":0,"forks_count":63,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-05-06T10:33:36.445Z","etag":null,"topics":["css-in-js","glamorous","react","react-native","styled-components"],"latest_commit_sha":null,"homepage":"http://npm.im/glamorous-native","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/robinpowered.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-16T17:11:34.000Z","updated_at":"2024-04-16T20:33:34.000Z","dependencies_parsed_at":"2022-09-10T10:03:38.432Z","dependency_job_id":null,"html_url":"https://github.com/robinpowered/glamorous-native","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinpowered%2Fglamorous-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinpowered%2Fglamorous-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinpowered%2Fglamorous-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robinpowered%2Fglamorous-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robinpowered","download_url":"https://codeload.github.com/robinpowered/glamorous-native/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234569716,"owners_count":18854133,"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":["css-in-js","glamorous","react","react-native","styled-components"],"created_at":"2024-01-05T20:17:15.588Z","updated_at":"2025-09-28T23:30:21.235Z","avatar_url":"https://github.com/robinpowered.png","language":"JavaScript","readme":"# STATUS: DEPRECATED AND UNMAINTAINED\n\n**Please refer to [@emotion/native](https://github.com/emotion-js/emotion)**\n\nFor details on the unmaintained status (and to help people with an automated migration to [emotion](https://emotion.sh)), see https://github.com/paypal/glamorous/issues/419.\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/robinpowered/glamorous-native/raw/master/other/logo/full.png\" alt=\"glamorous-native logo\" title=\"glamorous-native\" width=\"150\" height=\"150\" /\u003e\n  \u003cbr /\u003e\n  glamorous-native\n\u003c/h1\u003e\n\n[glamorous][glamorous] for React Native. React component styling solved with an elegant ([inspired](#inspiration)) API, small footprint, and great performance. For full feature documentation, see the [glamorous docs][glamorous-readme].\n\n\u003e Read [the intro blogpost][intro-blogpost]\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![MIT License][license-badge]][LICENSE]\n[![Semantic Releases][semantic-release-badge]][semantic-release]\n[![PRs Welcome][prs-badge]][prs]\n[![Chat][chat-badge]][chat]\n[![Examples][examples-badge]][examples]\n\n\n## The Problem\n\nIn React Native, we write styles within our JS, but you don't like having to create entire component functions just for styling purposes. You don't want to give a name to something that's purely style-related. And it's kind of annoying to do the `StyleSheet.create`, conditionals, and props-forwarding song and dance.\n\nFor example, this is what you have to do with `StyleSheet`:\n\n```js\nconst styles = StyleSheet.create({\n  text: {\n    fontSize: 20,\n    textAlign: 'center'\n  }\n})\nfunction MyStyledText ({style, ...rest}) {\n  return (\n    \u003cText\n      style={[styles.text, style]}\n      {...rest}\n    /\u003e\n  )\n}\n```\n\n## This solution\n\nWith `glamorous-native`, that example above looks as simple as this:\n\n```js\nconst MyStyledText = glamorous.text({\n  fontSize: 20,\n  textAlign: 'center'\n})\n```\n\nIn fact, it's even better, because there are a bunch of features that make composing these components together really nice!\n\nOh, and what if you don't care to give `MyStyledText` a name? If you just want a text that's styled using `StyleSheet`? You can do that too:\n\n```js\nconst {Text} = glamorous;\n\nfunction Section() {\n  return (\n    \u003cText\n      fontSize={20}\n      textAlign=\"center\"\n    \u003e\n      Hello world!\n    \u003c/Text\u003e\n  )\n}\n```\n\n\u003e See more [examples][examples]!\n\nSo that's the basics of this solution.. Let's get to the details!\n\n## Installation\n\nThis module is distributed via [npm][npm] and should be installed as one of your project's `dependencies`:\n\n```\nnpm install --save glamorous-native\n```\n\nThis also depends on `react` and `react-native`; you likely already have these dependencies since React Native projects are generally [scaffolded][react-native-get-started-scaffold].\n\nFrom here you can now import this module:\n\n```js\nimport glamorous, {ThemeProvider} from 'glamorous-native'\n```\n\n### Jest Configuration\n\nTo use `glamorous-native` in Jest (such as with snapshot tests), you need to configure the `transformIgnorePatterns` configuration in your `package.json`. [More documentation about this can be found here](https://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization).\n\n```json\n{\n  \"jest\": {\n    \"preset\": \"react-native\",\n    \"transformIgnorePatterns\": [\n      \"node_modules/(?!(jest-)?react-native|glamorous-native)\"\n    ]\n  }\n}\n```\n\n## Terms and concepts\n\n### glamorous\n\nThe `glamorous` function is the main (only) export. It allows you to create glamorous components that render the styles to the component you give it. This is done by forwarding a `style` prop to the component you tell it to render. But before we get into how you wrap custom components, let's talk about the built-in React Native components.\n\n#### built-in React Native component factories\n\nFor every React Native element, there is an associated `glamorous` component factory attached to the `glamorous` function. As above, you can access these factories like so: `glamorous.view`, `glamorous.text`, etc.\n\n```js\nconst MyStyledView = glamorous.view({margin: 1})\n\n\u003cMyStyledView\u003e{content}\u003c/MyStyledView\u003e\n// rendered output: \u003cView style={{margin: 1}}\u003e{content}\u003c/View\u003e\n// styles applied: {margin: 1}\n// style is also cached and registered with `StyleSheet`\n```\n\n#### glamorousComponentFactory\n\nWhether you create one yourself or use one of the built-in ones mentioned above, each `glamorousComponentFactory` allows you to invoke it with styles and it returns you a new component which will have those styles applied when it's rendered. This is accomplished by generating a `StyleSheet` entry for the styles you give it and forwarding that `style` onto the rendered element. So if you're wrapping a component you intend to style, you'll need to make sure you accept the `style` as a property and apply it where you want the styles applied in your custom component (normally the root element).\n\n```js\nconst UnstyledComp = ({style, children}) =\u003e (\u003cView style={[style, otherStyle]}\u003e{children}\u003c/View\u003e)\nconst MyStyledComp = glamorous(UnstyledComp)({margin: 1})\n\n\u003cMyStyledComp\u003e{content}\u003c/MyStyledComp\u003e\n// rendered output: \u003cView style={[\u003cglamor-generated-style\u003e, otherStyle]}\u003e{content}\u003c/View\u003e\n// styles applied: {margin: 1}\n// style is also cached and registered with `StyleSheet`\n```\n\n##### ...styles\n\nThe `glamorousComponentFactory` accepts any number of style object arguments. These can be style objects or functions which are invoked with `props` on every render and return style objects. To learn more about what these style objects can look like, please take a look at the [StyleSheet][react-native-stylesheet] documentation, and the supported styles for the React Native component (`View`, `Text`, etc).\n\n```js\nconst MyStyledView = glamorous.view(\n  {\n    margin: 1\n  },\n  (props) =\u003e ({\n    padding: props.noPadding ? 0 : 4\n  })\n)\n\n\u003cMyStyledView /\u003e // styles applied: {margin: 1, padding: 4}\n\u003cMyStyledView noPadding /\u003e // styles applied: {margin: 1, padding: 0}\n```\n\nYou can also specify other styles you'd like applied to the component as well. `StyleSheet` created styles can be passed in the same way we've been passing in inline styles and dynamic styles based on props.\n\n```js\nconst styleSheetStyles = StyleSheet.create({\n  style1: {\n    paddingTop: 1,\n    paddingRight: 1\n  },\n  style2: {\n    paddingRight: 2,\n    paddingBottom: 2\n  }\n})\n\nconst style3 = {paddingBottom: 3, paddingLeft: 3}\nconst style4 = {paddingLeft: 4}\n\n\nconst MyStyledView = glamorous.view(\n  styleSheetStyles.style1,\n  styleSheetStyles.style2,\n  style3,\n  style4\n)\n\n\u003cMyStyledView /\u003e\n// styles applied: {paddingTop: 1, paddingRight: 2, paddingBottom: 3, paddingLeft: 4}\n```\n\n#### GlamorousComponent\n\nThe `GlamorousComponent` is what is returned from the `glamorousComponentFactory`. Its job is to get all the styles together and forward a prepared `style` property onto your component.\n\n##### supported props\n\nBy default `GlamorousComponent` supports two props: `style` and `theme` which are used to override the styles of the component in different scenarios. For a more detailed explanation see [Overriding component styles](#overriding-component-styles) and [Theming](#theming) sections below.\n\n##### `innerRef`\n\nThis is a function and if provided, will be called with the inner element's reference.\n\n```js\nconst MyView = glamorous.view({padding: 20})\n\n// You can get a reference to the inner element with the `innerRef` prop\n\nclass MyComponent extends React.Component {\n  render() {\n    return () {\n      return (\n        \u003cMyView innerRef={c =\u003e this._viewRef = c} /\u003e\n      )\n    }\n  }\n}\n```\n\n##### other props\n\nOnly props that are safe to forward to the specific element (ie. that will ultimately be rendered) will be forwarded. So this is totally legit:\n\n```js\n\u003cMyStyledText size=\"big\" /\u003e\n```\n\nA use case for doing something like this would be for dynamic styles:\n\n```js\nconst staticStyles = {color: 'green'}\nconst dynamicStyles = props =\u003e ({fontSize: props.size === 'big' ? 32 : 24})\nconst MyDynamicallyStyledText = glamorous.text(staticStyles, dynamicStyles)\n```\n\n\u003e The exception to this prop forwarding is the pre-created `GlamorousComponent`s (see below).\n\n#### built-in GlamorousComponents\n\nOften you want to style something without actually giving it a name (because naming things is hard). So glamorous also expose a pre-created `GlamorousComponent` for each React Native node type which makes this reasonable to do:\n\n```js\nconst {View, Text, TouchableHighlight, Image} = glamorous;\n\nfunction MyUserInterface ({name, tagline, imageUrl, size, onPress}) {\n  const nameSize = size;\n  const taglineSize = size * 0.5;\n\n  return (\n    \u003cView flex={1} flexDirection=\"column\" justifyContent=\"center\"\u003e\n      \u003cTouchableHighlight onPress={onPress} underlayColor=\"#336479\"\u003e\n        \u003cImage borderRadius={90} height={180} source={{uri: imageUrl}} /\u003e\n        \u003cText fontSize={nameSize} fontWeight=\"bold\"\u003e{name}\u003c/Text\u003e\n      \u003c/TouchableHighlight\u003e\n      \u003cText fontSize={taglineSize} color=\"#767676\"\u003e\n        {tagline}\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n```\n\nHaving to name all of this stuff could be tedious, so having these pre-built components is handy. The other handy bit here is that the props _are_ the styles for these components. Notice that glamorous can distinguish between props that are for styling, and those that are have semantic meaning (like with the `Image` and `Touchable` components which make use of `source` and `onPress` props).\n\nThe `style` prop can be used to provide `StyleSheet` styles:\n\n```js\nimport glamorous, {withTheme} from 'glamorous-native'\nconst {View, Text} = glamorous\n\nconst predefinedStyle = StyleSheet.create({\n  view: {\n    flex: 1\n  },\n  text: {\n    color: '#767676',\n    fontSize: 18\n  }\n})\n\nconst MyUserInterface = withTheme(({tagline, theme}) =\u003e (\n  \u003cView style={[predefinedStyle.view, {backgroundColor: theme.primaryColor}]}\u003e\n    \u003cText style={predefinedStyle.text}\u003e\n      {tagline}\n    \u003c/Text\u003e\n  \u003c/View\u003e\n))\n```\n\nOne other tip... This totally works:\n\n```js\n\u003cglamorous.Text color=\"blue\"\u003e\n  JSX is pretty wild!\n\u003c/glamorous.Text\u003e\n```\n\n#### Overriding component styles\n\nThe most common scenario for using props is to override the style of an existing component (generated by `glamorous` or not). That can be achieved by using the props `style` and `theme` or simply component composition with `glamorous()` function.\n\nIf you're interested in knowing more about using the `theme` prop, see the [Theming](#theming) section instead for a more detailed explanation. In this section we'll explain how to use `style` and composition to override the styles of a component.\n\nLet's see how that can be done in the examples below.\n\nWe'll use this as our `GlamorousComponent`:\n\n```js\nconst MyStyledText = glamorous.view({margin: 1, fontSize: 1, padding: 1})\n```\n\n###### using `style`\n\nFor each `style` you provide, the `GlamorousComponent` will append these styles, such that if they overlap the `glamorous` styles, the provided styles take the highest priority over the component's predefined styles and will override them. The rest will otherwise merge right in. This is similar to providing an array of styles to a component.\n\n```js\nconst styles = StyleSheet.create({\n  custom: {\n    fontSize: 2,\n    padding: 2\n  }\n})\n\n\u003cMyStyledText style={styles.custom} /\u003e\n// styles applied:\n// {margin: 1, fontSize: 2, padding: 2}\n```\n\n##### using `glamorous()` composition\n\nIf we just want to extend the styles of an existing component, it can be done by using the `glamorous()` function.\n\n```js\nconst MyComposedStyledText = glamorous(MyStyledText)({fontSize: 4, padding: 4})\n\u003cMyComposedStyledText /\u003e\n// styles applied:\n// {margin: 1, fontSize: 4, padding: 4}\n```\n\nIn fact, the built-in React Native component factories provided are just an abstraction of this function, so `glamorous.view` could be written as `glamorous(View)` instead.\n\n### glamorous API\n\nThe `glamorous` function allows you to create your own `glamorousComponentFactory` [see above](#glamorouscomponentfactory) for any component you have. For example:\n\n```js\nconst MyComponent = props =\u003e \u003cText {...props} /\u003e\nconst myGlamorousComponentFactory = glamorous(MyComponent)\nconst MyGlamorousComponent = myGlamorousComponentFactory({/* styles */})\n\n\u003cMyGlamorousComponent numberOfLines={2} /* forwarded to the Text */ /\u003e\n```\n\nYou can also provide a few options to help glamorous know how to handle your component:\n\n#### displayName\n\nThe `displayName` of a React component is used by React in the [React DevTools][react-devtools] and is really handy for debugging React applications. Glamorous will do its best to give a good `displayname` for your component, but, for the example above, the best it can do is `glamorous(MyComponent)`. If you want to specify a `displayName`, you can do so with this property. For example:\n\n```js\nconst MyComponent = props =\u003e \u003cText {...props} /\u003e\nconst myGlamorousComponentFactory = glamorous(\n  MyComponent,\n  {displayName: 'MyGlamorousComponent'}\n)\n```\n\nAnd now all components created by the `myGlamorousComponentFactory` will have the `displayName` of `MyGlamorousComponent`.\n\n#### rootEl\n\nReact has an [Unknown Prop Warning](https://facebook.github.io/react/warnings/unknown-prop.html) that it logs when you pass spurious props to elements: (i.e. `\u003cView big={true} /\u003e`). Because you can style your components using props, glamorous needs to filter out the props you pass so it doesn't forward these on to the underlying React Native component. However, if you create your own factory using a custom component, glamorous will just forward all the props (because the component may actually need them and glamorous has no way of knowing). But in some cases, the component may be spreading all of the props onto the root element that it renders. For these cases, you can tell glamorous which element is being rendered and glamorous will apply the same logic for which props to forward that it does for the built-in factories. For example:\n\n```js\nconst MyComponent = props =\u003e \u003cText {...props} /\u003e\nconst myGlamorousComponentFactory = glamorous(\n  MyComponent,\n  {rootEl: Text}\n)\n\nconst MyGlamorousComponent = myGlamorousComponentFactory(props =\u003e ({\n  fontSize: props.big ? 36 : 24\n}))\n\n\u003cMyGlamorousComponent big={true} numberOfLines={1} /\u003e\n// This will render:\n// \u003cText numberOfLines={1} /\u003e\n// with {fontSize: 36}\n// `big` is not forwarded to MyComponent because the `rootEl` is a `Text` and `big`\n// is not a valid attribute for a `Text`, however `numberOfLines` will be forwarded\n// because `numberOfLines` is a valid prop\n```\n\n#### forwardProps\n\nThere are some cases where you're making a `glamorousComponentFactory` out of a custom component that spreads _some_ of the properties across an underlying React Native component, but not all of them. In this case you should use `rootEl` to forward only the right props to be spread onto the React Native component, but you can also use `forwardProps` to specify extra props that should be forwarded. For example:\n\n```js\nconst MyComponent = ({shouldRender, ...rest}) =\u003e (\n  shouldRender ? \u003cText {...rest} /\u003e : null\n)\nconst MyStyledComponent = glamorous(MyComponent, {\n  forwardProps: ['shouldRender'],\n  rootEl: Text\n})(props =\u003e ({\n  fontSize: props.big ? 36 : 24\n}))\n\u003cMyStyledComponent shouldRender={true} big={false} numberOfLines={1} /\u003e\n// This will render:\n// \u003cText numberOfLines={1} /\u003e\n// with {fontSize: 24}\n// `shouldRender` will be forwarded to `MyComponent` because it is included in\n// `forwardProps`. `big` will not be forwarded to `MyComponent` because `rootEl`\n// is a `Text` and that's not a valid prop for a `Text`, but it will be used in\n// the styles object function that determines the `fontSize`. Finally `numberOfLines`\n// will be forwarded to `MyComponent` because it is a valid prop for a `Text`\n```\n\n#### propsAreStyleOverrides\n\nThis allows you to use props as styles. When it's set to true, props will be added to the component's style object, taking precedence over existing values. Pre-built components like `glamorous.Text` use this option by default.\n\n```js\nconst GreenText = glamorous(\n  Text,\n  {propsAreStyleOverrides: true}\n)({\n  color: 'green'\n})\n\n\u003cGreenText fontSize={30} selectable={true} /\u003e\n// This will render:\n// \u003cText selectable={true} /\u003e\n// with {color: 'green', fontSize: 30}\n// the selectable prop is passed to the underlying\n// Text component because glamorous recognizes that\n// it's not a valid style property\n```\n\n### Theming\n\n`glamorous-native` fully supports theming using a special `\u003cThemeProvider\u003e` component.\n\nIt provides the `theme` to get all glamorous components down the tree.\n\n```js\nimport glamorous, {ThemeProvider} from 'glamorous-native'\n\n// our main theme object\nconst theme = {\n  main: {color: 'red'}\n}\n\n// our secondary theme object\nconst secondaryTheme = {\n  main: {color: 'blue'}\n}\n\n// a themed \u003cTitle\u003e component\nconst Title = glamorous.text({\n  fontSize: 10\n}, (props, theme) =\u003e ({\n  color: theme.main.color\n}))\n\n// use \u003cThemeProvider\u003e to pass theme down the tree\n\u003cThemeProvider theme={theme}\u003e\n  \u003cTitle\u003eHello!\u003c/Title\u003e\n\u003c/ThemeProvider\u003e\n\n// it is possible to nest themes\n// inner themes will be merged with outers\n\u003cThemeProvider theme={theme}\u003e\n  \u003cView\u003e\n    \u003cTitle\u003eHello!\u003c/Title\u003e\n    \u003cThemeProvider theme={secondaryTheme}\u003e\n      {/* this will be blue */}\n      \u003cTitle\u003eHello from here!\u003c/Title\u003e\n    \u003c/ThemeProvider\u003e\n  \u003c/View\u003e\n\u003c/ThemeProvider\u003e\n\n// to override a theme, just pass a theme prop to a glamorous component\n// the component will ignore any surrounding theme, applying the one passed directly via props\n\u003cThemeProvider theme={theme}\u003e\n  {/* this will be yellow */}\n  \u003cTitle theme={{main: {color: 'yellow'}}}\u003eHello!\u003c/Title\u003e\n\u003c/ThemeProvider\u003e\n```\n\n`glamorous-native` also exports a `withTheme` higher order component (HOC) so you can access your theme in any component!\n\n```jsx\nimport glamorous, {ThemeProvider, withTheme} from 'glamorous-native'\n\n// our main theme object\nconst theme = {\n  main: {color: 'red'}\n}\n\n// a themed \u003cTitle\u003e component\nconst Title = glamorous.text({\n  fontSize: 19\n}, (props, theme) =\u003e ({\n  color: theme.main.color\n}))\n\n// normal component that takes a theme prop\nconst SubTitle = ({children, theme: {color}}) =\u003e (\n  \u003cText style={{color}}\u003e{children}\u003c/Text\u003e\n)\n\n// extended component with theme prop\nconst ThemedSubTitle = withTheme(SubTitle)\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cTitle\u003eHello!\u003c/Title\u003e\n  \u003cThemedSubTitle\u003efrom withTheme!\u003c/ThemedSubTitle\u003e\n\u003c/ThemeProvider\u003e\n```\n\nOr if you prefer decorator syntax:\n\n```jsx\nimport React, {Component} from 'react'\nimport glamorous, {ThemeProvider,  withTheme} from 'glamorous-native'\n\n// our main theme object\nconst theme = {\n  main: {color: 'red'}\n}\n\n// a themed \u003cTitle\u003e component\nconst Title = glamorous.text({\n  fontSize: 10\n}, (props, theme) =\u003e ({\n  color: theme.main.color\n}))\n\n// extended component with theme prop\n@withTheme\nclass SubTitle extends Component {\n  render() {\n    const {children, theme: {main: {color}}} = this.props\n    return \u003cText style={{color}}\u003e{children}\u003c/Text\u003e\n  }\n}\n\n\u003cThemeProvider theme={theme}\u003e\n  \u003cTitle\u003eHello!\u003c/Title\u003e\n  \u003cSubTitle\u003efrom withTheme!\u003c/SubTitle\u003e\n\u003c/ThemeProvider\u003e\n```\n\n\u003e `withTheme` expects a `ThemeProvider` further up the render tree and will warn in `development` if one is not found!\n\n### Context\n\n[context](https://facebook.github.io/react/docs/context.html) is an unstable\nAPI and it's not recommended to use it directly. However, if you need to use it\nfor some reason, here's an example of how you could do that:\n\n```jsx\nconst dynamicStyles = (props, theme, context) =\u003e ({\n  color: context.isLoggedIn ? 'green' : 'red'\n})\nconst MyText = glamorous.text(dynamicStyles)\nMyText.contextTypes = {\n  isLoggedIn: PropTypes.string,\n}\n\nclass Parent extends React.Component {\n  getChildContext() {\n    return {\n      isLoggedIn: true,\n    }\n  }\n  render() {\n    return \u003cMyText\u003eGreetings\u003c/MyText\u003e\n  }\n}\n\nParent.childContextTypes = {\n  isLoggedIn: PropTypes.string,\n}\n\n\u003cParent /\u003e\n// renders \u003cText /\u003e\n// with {color: 'green'}\n```\n\n## Inspiration\n\nThis package was inspired by the work from people's work on the following projects:\n- [glamorous][glamorous]\n- [styled-components](https://github.com/styled-components/styled-components)\n- [jsxstyle](https://github.com/smyte/jsxstyle)\n\n## Contributing\n\nThis project is in active development approaching completion. Your contributions are welcome! Take a look at the [contributing guide][contributing] and browse through the [good first task issues](https://github.com/robinpowered/glamorous-native/labels/good%20first%20task).\n\n\n[build-badge]: https://img.shields.io/travis/robinpowered/glamorous-native.svg?style=flat-square\n[build]: https://travis-ci.org/robinpowered/glamorous-native\n[coverage-badge]: https://img.shields.io/codecov/c/github/robinpowered/glamorous-native.svg?style=flat-square\n[coverage]: https://codecov.io/github/robinpowered/glamorous-native\n[version-badge]: https://img.shields.io/npm/v/glamorous-native.svg?style=flat-square\n[package]: https://www.npmjs.com/package/glamorous-native\n[license-badge]: https://img.shields.io/npm/l/glamorous-native.svg?style=flat-square\n[license]: https://github.com/robinpowered/glamorous-native/blob/master/LICENSE\n[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square\n[prs]: http://makeapullrequest.com\n[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square]\n[semantic-release]: https://github.com/robinpowered/glamorous-native/releases\n[examples-badge]: https://img.shields.io/badge/%F0%9F%92%A1-examples-8C8E93.svg?style=flat-square\n[examples]: ./examples\n[semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square\n[semantic-release]: https://github.com/robinpowered/glamorous-native/releases\n[chat]: https://gitter.im/paypal/glamorous\n[chat-badge]: https://img.shields.io/gitter/room/paypal/glamorous.svg?style=flat-square\n[contributing]: ./CONTRIBUTING.md\n[glamorous]: https://github.com/paypal/glamorous\n[glamorous-readme]: https://github.com/paypal/glamorous#readme\n[intro-blogpost]: https://medium.com/robin-powered/introducing-glamorous-for-react-native-1b8365e7f33f\n[npm]: https://www.npmjs.com/\n[react-native-stylesheet]: https://facebook.github.io/react-native/docs/stylesheet.html\n[react-devtools]: https://github.com/facebook/react-devtools\n[react-unknown-props]: https://facebook.github.io/react/warnings/unknown-prop.html\n[react-native-get-started-scaffold]: https://facebook.github.io/react-native/docs/getting-started.html#testing-your-react-native-installation\n","funding_links":[],"categories":["Components","Uncategorized","JavaScript"],"sub_categories":["Styling","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinpowered%2Fglamorous-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobinpowered%2Fglamorous-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobinpowered%2Fglamorous-native/lists"}