{"id":21824732,"url":"https://github.com/henrytao-me/react-native-mdcore","last_synced_at":"2025-06-11T21:05:40.065Z","repository":{"id":57338297,"uuid":"86201514","full_name":"henrytao-me/react-native-mdcore","owner":"henrytao-me","description":"Material Design for both Android and iOS","archived":false,"fork":false,"pushed_at":"2017-12-09T01:03:35.000Z","size":140,"stargazers_count":10,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-15T01:53:03.887Z","etag":null,"topics":["android","ios","material","material-design","mdcore","palette","react","react-native","theme"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/henrytao-me.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":"2017-03-26T02:13:28.000Z","updated_at":"2018-09-10T20:03:15.000Z","dependencies_parsed_at":"2022-08-31T03:51:45.804Z","dependency_job_id":null,"html_url":"https://github.com/henrytao-me/react-native-mdcore","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/henrytao-me/react-native-mdcore","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrytao-me%2Freact-native-mdcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrytao-me%2Freact-native-mdcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrytao-me%2Freact-native-mdcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrytao-me%2Freact-native-mdcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/henrytao-me","download_url":"https://codeload.github.com/henrytao-me/react-native-mdcore/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/henrytao-me%2Freact-native-mdcore/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259340515,"owners_count":22843007,"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":["android","ios","material","material-design","mdcore","palette","react","react-native","theme"],"created_at":"2024-11-27T17:59:46.271Z","updated_at":"2025-06-11T21:05:40.049Z","avatar_url":"https://github.com/henrytao-me.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-mdcore\n\nMaterial Design for both Android and iOS. `ThemeProvider` has to be set at root of component tree. All children components can access theme properties via `context`. Features: \n\n- Provide [default theme properties](src/libs/theme/default.js) for all material components. \n- Easy to customize theme.\n- Provide most of material components to build cross platform apps with consistent APIs.\n\n\n## Installation\n\n```node\nnpm install react-native-mdcore --save\n```\n\n\n## Sample app \n\nCheckout [https://github.com/henrytao-me/react-native-workshop](https://github.com/henrytao-me/react-native-workshop)\n\n\n## Usages\n\n### Setup ThemeProvider\n\nUse default theme:\n\n```js\nimport React from 'react'\nimport {\n  PureComponent,\n  ThemeProvider\n} from 'react-native-mdcore'\n\nexport default class Main extends PureComponent {\n\n  render() {\n    return (\n      \u003cThemeProvider\u003e\n        \u003cHomeComponent /\u003e\n      \u003c/ThemeProvider\u003e\n    )\n  }\n}\n```\n\nUse custom theme:\n\n```js\nimport React from 'react'\nimport {\n  PureComponent,\n  Theme,\n  ThemeProvider\n} from 'react-native-mdcore'\n\ncons CUSTOM_THEME = Theme.extend({\n  palette: {\n    primary: '#006f7b',\n    primaryDark: '#005a64',\n    primaryLight: '#7fb7bd',\n  }\n})\n\nexport default class Main extends PureComponent {\n\n  render() {\n    return (\n      \u003cThemeProvider theme={CUSTOM_THEME}\u003e\n        \u003cHomeComponent /\u003e\n      \u003c/ThemeProvider\u003e\n    )\n  }\n}\n```\n\nAccess theme:\n\n```js\nimport React from 'react'\nimport {\n  PropTypes,\n  PureComponent, \n  Text,\n  View\n} from 'react-native-mdcore'\n\nexport default class HomeComponent extends PureComponent {\n\n  static contextTypes = {\n    theme: PropTypes.any\n  }\n\n  render() {\n    const { theme } = this.context\n    return (\n      \u003cView style={{ backgroundColor: theme.palette.primary }}\u003e\n        \u003cText palette=\"primary\"\u003eHome\u003c/Text\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n### All-in-one place\n\nAll components are now in `react-native-mdcore` that makes it easiest to remember and use. \n\n```js\nimport React from 'react'\nimport {\n  AppRegistry, AppState, Animated,\n  Easing,\n  FlatList,\n  InteractionManager,\n  ListView,\n  PixelRatio,\n  Platform,\n  ScrollView, SectionList, StatusBar,\n  TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback,\n  View, VirtualizedList,\n  WebView,\n\n  BottomNavigation,\n  BottomNavigationItem,\n  Button,\n  Card,\n  Divider,\n  Icon,\n  Image,\n  NativeModules,\n  PropTypes,\n  PureComponent,\n  Ripple,\n  StyleSheet,\n  TabItem,\n  Tabs,\n  Text,\n  ViewPager,\n} from 'react-native-mdcore'\n\nexport default class CustomComponent extends PureComponent {\n\n  render() {\n    return null\n  }\n}\n```\n\n\n## License\n\n    Copyright 2017 \"Henry Tao \u003chi@henrytao.me\u003e\"\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n        http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing, software\n    distributed under the License is distributed on an \"AS IS\" BASIS,\n    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n    See the License for the specific language governing permissions and\n    limitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrytao-me%2Freact-native-mdcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhenrytao-me%2Freact-native-mdcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhenrytao-me%2Freact-native-mdcore/lists"}