{"id":4540,"url":"https://github.com/apentle/react-native-theme","last_synced_at":"2025-05-01T22:30:25.372Z","repository":{"id":57340866,"uuid":"61354615","full_name":"apentle/react-native-theme","owner":"apentle","description":"Theme manager for react native project!","archived":false,"fork":false,"pushed_at":"2017-10-02T02:28:22.000Z","size":27,"stargazers_count":125,"open_issues_count":6,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T21:19:27.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://apentle.github.io/blog/","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/apentle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-17T07:31:29.000Z","updated_at":"2024-06-18T12:49:40.000Z","dependencies_parsed_at":"2022-09-07T16:13:46.369Z","dependency_job_id":null,"html_url":"https://github.com/apentle/react-native-theme","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apentle%2Freact-native-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apentle%2Freact-native-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apentle%2Freact-native-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apentle%2Freact-native-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apentle","download_url":"https://codeload.github.com/apentle/react-native-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251450656,"owners_count":21591407,"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":[],"created_at":"2024-01-05T20:17:15.681Z","updated_at":"2025-05-01T22:30:25.026Z","avatar_url":"https://github.com/apentle.png","language":"JavaScript","readme":"# react-native-theme\n[![Build Status](https://travis-ci.org/apentle/react-native-theme.svg?branch=master)](https://travis-ci.org/apentle/react-native-theme) [![Coverage Status](https://coveralls.io/repos/github/apentle/react-native-theme/badge.svg?branch=master)](https://coveralls.io/github/apentle/react-native-theme?branch=master) [![npm version](https://badge.fury.io/js/react-native-theme.svg)](https://badge.fury.io/js/react-native-theme)\n\nTheme manager for react native project!\n\n![ios Theme Change](https://raw.githubusercontent.com/apentle/react-native-theme-example/master/screenshot1.gif)\n\n## Installation\n```bash\nnpm i --save react-native-theme\n```\n\n## Usage\nRegister a theme\n```javascript\nimport theme from 'react-native-theme';\n\ntheme.add({ // Add default theme\n  container: {\n    flex: 1,\n    flexDirection: 'row'\n  },\n  title: {\n    fontSize: 20,\n  },\n  ...\n});\n\ntheme.add({ // Add red theme\n  title: {\n    fontSize: 20,\n    color: 'red',\n  },\n  ...\n}, 'red');\n```\n\nUse theme as stylesheets\n```javascript\nimport { styles } from 'react-native-theme';\n\n...\n\u003cView style={styles.container}\u003e\n\u003c/View\u003e\n...\n```\n\nSet the root, otherwise this react-native-theme won't have a tree to render from and you won't get any updates from calling theme.active()\n```javascript\ncomponentWillMount() {\n    // You don't need to put it here, but this is how I did it in my parent React.Component, as I had styles based on\n    // themes throughout my application. If you have styles only in one area, you will have improved performance\n    // by setting the root there (though the performance may not be noticable for many applications).\n    theme.setRoot(this)\n  }\n```\n\n## Platform Styles Support\nYou can also add specific style for different platforms like this:\n```javascript\ntheme.add({\n  container: {\n    flex: 1,\n    flexDirection: 'row',\n    ios: {\n      backgroundColor: 'green',\n    },\n    android: {\n      backgroundColor: 'blue',\n    },\n  },\n});\n```\n\n## API\n\n1. **styles** property\nGet current styles object, matching with current theme.\n```javascript\nconsole.log(theme.styles.title.color)\n```\n\n2. **name** property\nGet current name of activated theme.\n```javascript\nif (theme.name == 'red') {\n  theme.active() // sets the default theme and all under the root is rerendered\n} else {\n theme.active('red')\n}\n```\n\n3. **add(styles, name = 'default')**\nAdd styles to a theme. You can add styles many times to a theme as you want!\n```javascript\ntheme.add({\n  title: {\n    color:'red',\n    fontSize:24\n  }\n}, 'red')\n```\n\n4. **active(name = 'default')**\nActive a theme. Theme data must be added before active.\n```javascript\n\u003cButton title=\"Press Me\" onPress={()=\u003e{\n  theme.active('red')\n}} /\u003e\n```\n\n5. **setRoot(root)**\nSet root component for theme. When you active new theme, root component will be rerendered.\n```javascript\ncomponentWillMount() {\n  theme.setRoot(this)\n}\n```\n\n6. **css(styles)**\nMixed convert string, array, object to react native compatible styles.\n\n7. **addComponents(components, name = 'default')**\nManage theme components to allow updating content while changing the theme. `components` is an object like `{Container: /*Container Component*/}`\n\n8. **Component**\nGet current theme component like `theme.Container` or `import {Container} from 'react-native-theme'`\n\n9. **reset()**\nReset all themes data\n\n## Example\n\n[See this example](https://github.com/apentle/react-native-theme-example)\n\n## react-native-web\nThis module also works with [react-native-web](https://github.com/necolas/react-native-web). You used to need to add package aliases, but not anymore. Just an extension. For example in `webpack`:\n```javascript\n// webpack.config.js\n\nmodule.exports = {\n  // ...\n  resolve: {\n    extensions: [ '.web.js', '.js' ],\n  }\n}\n```\n\nLooking for a live web demo? [Go to here.](https://rawgit.com/apentle/react-native-theme-example/master/web/index.html)\n","funding_links":[],"categories":["Components"],"sub_categories":["Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapentle%2Freact-native-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapentle%2Freact-native-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapentle%2Freact-native-theme/lists"}