{"id":3924,"url":"https://github.com/xinthink/react-native-material-kit","last_synced_at":"2025-05-14T01:04:28.617Z","repository":{"id":34436451,"uuid":"38370169","full_name":"xinthink/react-native-material-kit","owner":"xinthink","description":"Bringing Material Design to React Native","archived":false,"fork":false,"pushed_at":"2023-01-04T06:15:00.000Z","size":2967,"stargazers_count":4833,"open_issues_count":189,"forks_count":576,"subscribers_count":101,"default_branch":"master","last_synced_at":"2024-10-29T14:55:48.377Z","etag":null,"topics":["material-design","react-native"],"latest_commit_sha":null,"homepage":"https://rnmk.xinthink.com","language":"TypeScript","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/xinthink.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":"paypal.me/xinthink/5"}},"created_at":"2015-07-01T12:33:24.000Z","updated_at":"2024-10-27T03:10:08.000Z","dependencies_parsed_at":"2023-01-15T07:15:59.563Z","dependency_job_id":null,"html_url":"https://github.com/xinthink/react-native-material-kit","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinthink%2Freact-native-material-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinthink%2Freact-native-material-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinthink%2Freact-native-material-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xinthink%2Freact-native-material-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xinthink","download_url":"https://codeload.github.com/xinthink/react-native-material-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154434,"owners_count":21056539,"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":["material-design","react-native"],"created_at":"2024-01-05T20:16:55.476Z","updated_at":"2025-04-10T03:39:40.135Z","avatar_url":"https://github.com/xinthink.png","language":"TypeScript","funding_links":["paypal.me/xinthink/5"],"categories":["Components","TypeScript","React Native","组件","Uncategorized","Libraries","JavaScript"],"sub_categories":["UI","Frameworks React Native","Uncategorized"],"readme":"[![Build Status][check-badge]][workflows]\n[![npm][npm-badge]][npm]\n[![react-native][rn-badge]][rn]\n[![MIT][license-badge]][license]\n\u003ca href=\"https://www.jetbrains.com/?from=react-native-material-kit\" title=\"Built with JetBrains IDEs\"\u003e\n  \u003cimg src=\"http://xinthink.github.io/react-native-material-kit/images/logo_JetBrains_1.svg\" alt=\"Built with JetBrains IDEs\" width=\"48\"\u003e\n\u003c/a\u003e\n\nA set of UI components, in the purpose of introducing [Material Design][md] to apps built with [React Native][rn], quickly and painlessly.\n\n[npm-badge]: https://img.shields.io/npm/v/react-native-material-kit.svg\n[npm]: https://www.npmjs.com/package/react-native-material-kit\n[rn-badge]: https://img.shields.io/badge/react--native-v0.61-05A5D1.svg\n[rn]: https://facebook.github.io/react-native\n[md]: http://www.google.com/design/spec/material-design/introduction.html\n[license-badge]: https://img.shields.io/dub/l/vibe-d.svg\n[license]: https://raw.githubusercontent.com/xinthink/react-native-material-kit/master/LICENSE.md\n[gitter-badge]: https://img.shields.io/gitter/room/xinthink/react-native-material-kit.svg\n[gitter-rnmk]: https://gitter.im/xinthink/react-native-material-kit\n[workflows]: https://github.com/xinthink/react-native-material-kit/actions\n[check-badge]: https://github.com/xinthink/react-native-material-kit/workflows/check/badge.svg\n\n## Getting Started\n\nFirst, `cd` to your RN project directory, and install RNMK through [rnpm](https://github.com/rnpm/rnpm) . If you don't have rnpm, you can install RNMK from npm with the command `npm i -S react-native-material-kit` and link it manually (see below).\n\n\n## NOTICE:\n\nreact-native-material-kit \u003e= 0.4.0 only supports react-native \u003e= 0.40.0\n\nreact-native-material-kit \u003c 0.4.0 only supports react-native \u003c 0.40.0\n\n### iOS\n\n* #### React Native \u003c 0.29 (Using rnpm)\n\n  `rnpm install react-native-material-kit`\n\n* #### React Native \u003e= 0.29\n  `npm install -S react-native-material-kit`\n\n  `react-native link react-native-material-kit`\n\n\n\n#### Manually\n1. Add `node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj` to your xcode project, usually under the `Libraries` group\n1. Add `libRCTMaterialKit.a` (from `Products` under `RCTMaterialKit.xcodeproj`) to build target's `Linked Frameworks and Libraries` list\n\n#### Option: Using [CocoaPods](https://cocoapods.org)\n\nAssuming you have [CocoaPods](https://cocoapods.org) installed, create a `PodFile` like this in your app's project directory. You can leave out the modules you don't need.\n\n```ruby\nxcodeproj 'path/to/YourProject.xcodeproj/'\n\npod 'React', :subspecs =\u003e ['Core', 'RCTText', 'RCTWebSocket'], :path =\u003e 'node_modules/react-native'\npod 'react-native-material-kit', :path =\u003e 'node_modules/react-native-material-kit'\n\npost_install do |installer|\n  target = installer.pods_project.targets.select{|t| 'React' == t.name}.first\n  phase = target.new_shell_script_build_phase('Run Script')\n  phase.shell_script = \"if nc -w 5 -z localhost 8081 ; then\\n  if ! curl -s \\\"http://localhost:8081/status\\\" | grep -q \\\"packager-status:running\\\" ; then\\n    echo \\\"Port 8081 already in use, packager is either not running or not running correctly\\\"\\n    exit 2\\n  fi\\nelse\\n  open $SRCROOT/../node_modules/react-native/packager/launchPackager.command || echo \\\"Can't start packager automatically\\\"\\nfi\"\nend\n```\n\nNow run `pod install`. This will create an Xcode workspace containing all necessary native files, including react-native-material-kit. From now on open `YourProject.xcworkspace` instead of `YourProject.xcodeproject` in Xcode. Because React Native's iOS code is now pulled in via CocoaPods, you also need to remove the `React`, `RCTImage`, etc. subprojects from your app's Xcode project, in case they were added previously.\n\n### Android\n\n* #### React Native \u003c 0.29 (Using rnpm)\n\n  `rnpm install react-native-material-kit`\n\n* #### React Native \u003e= 0.29\n  `npm install -S react-native-material-kit`\n\n  `react-native link react-native-material-kit`\n\n#### Manually\n1. JDK 7+ is required\n1. Add the following snippet to your `android/settings.gradle`:\n  ```gradle\n  include ':RNMaterialKit'\n  project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')\n\n  ```\n1. Declare the dependency in your `android/app/build.gradle`\n  ```gradle\n  dependencies {\n      ...\n      compile project(':RNMaterialKit')\n  }\n\n  ```\n1. Import `com.github.xinthink.rnmk.ReactMaterialKitPackage` and register it in your `MainActivity` (or equivalent, RN \u003e= 0.32 MainApplication.java):\n\n  ```java\n  @Override\n  protected List\u003cReactPackage\u003e getPackages() {\n      return Arrays.asList(\n              new MainReactPackage(),\n              new ReactMaterialKitPackage()\n      );\n  }\n  ```\n\n#### Manual Installation Issues\nIf you experience any trouble manually installing `react-native-material-kit` on Android,\nyou should be able to safely skip it.\n\nFinally, you're good to go, feel free to require `react-native-material-kit` in your JS files.\n\nHave fun! :metal:\n\n## Resources\n- [Release Notes]\n- Refer to the [Annotated Source][docs] as API docs\n- Source code of [Demo app]\n- For contributors, please refer to [How to debug local RNMK module][debug-with-demo]\n- Chat about bugs/features on [Gitter][gitter-rnmk]\n\n[docs]: http://xinthink.github.io/react-native-material-kit/docs/index.html\n[Demo app]: https://github.com/xinthink/react-native-material-kit/tree/master/example\n[debug-with-demo]: https://github.com/xinthink/rnmk-demo#debugging-local-rnmk-module\n[Release Notes]: https://github.com/xinthink/react-native-material-kit/releases\n\n## Components\n- [Buttons](#buttons)\n- [Cards](#cards)\n- [Loading](#loading)\n  - [Progress bar](#progress-bar)\n  - [Spinner](#spinner)\n- [Sliders](#sliders)\n  - [Range Slider](#range-slider)\n- [Textfields](#text-fields)\n- [Toggles](#toggles)\n  - [Checkbox](#checkbox)\n  - [Radio button](#radio-button)\n  - [Icon toggle](#icon-toggle)\n  - [Switch](#switch)\n\n### Buttons\n\n[![img-buttons]][mdl-buttons]\n\nApply [Material Design Buttons][mdl-buttons] with a few lines of code using predefined builders, which comply with the [Material Design Lite default theme][mdl-theme].\n\n```jsx\n// colored button with default theme (configurable)\nconst ColoredRaisedButton = MKButton.coloredButton()\n  .withText('BUTTON')\n  .withOnPress(() =\u003e {\n    console.log(\"Hi, it's a colored button!\");\n  })\n  .build();\n\n...\n\u003cColoredRaisedButton /\u003e\n```\n\nAnd you can definitely build customized buttons from scratch.\n\nwith builder:\n\n```jsx\nconst CustomButton = new MKButton.Builder()\n  .withBackgroundColor(MKColor.Teal)\n  .withShadowRadius(2)\n  .withShadowOffset({width:0, height:2})\n  .withShadowOpacity(.7)\n  .withShadowColor('black')\n  .withOnPress(() =\u003e {\n    console.log('hi, raised button!');\n  })\n  .withTextStyle({\n    color: 'white',\n    fontWeight: 'bold',\n  })\n  .withText('RAISED BUTTON')\n  .build();\n\n...\n\u003cCustomButton /\u003e\n```\n\nthe jsx equivalent:\n\n```jsx\n\u003cMKButton\n  backgroundColor={MKColor.Teal}\n  shadowRadius={2}\n  shadowOffset={{width:0, height:2}}\n  shadowOpacity={.7}\n  shadowColor=\"black\"\n  onPress={() =\u003e {\n    console.log('hi, raised button!');\n  }}\n  \u003e\n  \u003cText pointerEvents=\"none\"\n        style={{color: 'white', fontWeight: 'bold',}}\u003e\n    RAISED BUTTON\n  \u003c/Text\u003e\n\u003c/MKButton\u003e\n```\n\n👉 [props reference][button-props-doc] and [example code][buttons-sample]\n\n\u003e Why builders? See the ‘[Builder vs. configuration object][issue-3]’ discussion.\n\n[img-buttons]: https://cloud.githubusercontent.com/assets/390805/8888853/69f8d9f8-32f2-11e5-9823-c235ab8c0dd2.gif\n[mdl-buttons]: http://www.getmdl.io/components/index.html#buttons-section\n[mdl-theme]: http://www.getmdl.io/customize/index.html\n[buttons-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/buttons.js\n[issue-3]: https://github.com/xinthink/react-native-material-kit/issues/3\n[button-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Button.html#props\n\n### Cards\n[![img-cards]][cards-mdl]\n\nApply [`Card Style`][cards-mdl] with only few styles !.\n```jsx\nimport {\n  getTheme,\n  ...\n} from 'react-native-material-kit';\n\nconst theme = getTheme();\n\n\u003cView style={theme.cardStyle}\u003e\n  \u003cImage source={{uri : base64Icon}} style={theme.cardImageStyle} /\u003e\n  \u003cText style={theme.cardTitleStyle}\u003eWelcome\u003c/Text\u003e\n  \u003cText style={theme.cardContentStyle}\u003e\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n    Mauris sagittis pellentesque lacus eleifend lacinia...\n  \u003c/Text\u003e\n  \u003cView style={theme.cardMenuStyle}\u003e{menu}\u003c/View\u003e\n  \u003cText style={theme.cardActionStyle}\u003eMy Action\u003c/Text\u003e\n\u003c/View\u003e\n\n```\n\n👉 [example code][card-sample]\n\n[cards-mdl]: http://www.getmdl.io/components/index.html#cards-section\n[img-cards]: https://cloud.githubusercontent.com/assets/390805/10262736/4411994a-6a07-11e5-8a72-b7a46ba5e4a9.png\n[card-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/cards.js\n\n### Loading\n[MDL Loading][mdl-loading] components.\n\n#### Progress bar\n[![progress-demo]][mdl-loading]\n\n```jsx\n\u003cmdl.Progress\n  style={styles.progress}\n  progress={0.2}\n/\u003e\n```\n\n👉 [props reference][prog-props-doc] and [example code][progress-sample]\n\n#### Spinner\n[![spinner-demo]][mdl-loading]\n\n```jsx\n\u003cmdl.Spinner /\u003e\n```\n\n👉 [props reference][spinner-props-doc] and [example code][progress-sample]\n\n[mdl-loading]: http://www.getmdl.io/components/index.html#loading-section\n[progress-demo]: https://cloud.githubusercontent.com/assets/390805/9288698/01e31432-4387-11e5-98e5-85b18471baeb.gif\n[spinner-demo]: https://cloud.githubusercontent.com/assets/390805/9291361/6e7a75bc-43ec-11e5-95be-2b33eb7f8734.gif\n[progress-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/progress.js\n[prog-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Progress.html#props\n[spinner-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Spinner.ios.html#props\n\n### Sliders\n[MDL Slider][mdl-slider] components.\n[![slider-demo]][mdl-slider]\n\n```jsx\n\u003cmdl.Slider style={styles.slider} /\u003e\n…\nconst SliderWithValue = mdl.Slider.slider()\n  .withStyle(styles.slider)\n  .withMin(10)\n  .withMax(100)\n  .build();\n…\n\u003cSliderWithValue\n  ref=\"sliderWithValue\"\n  onChange={(curValue) =\u003e this.setState({curValue})}\n/\u003e\n```\n\n👉 [props reference][slider-props-doc] and [example code][slider-sample]\n\n### Range Slider\n![range-slider-demo]\n\n```jsx\n\u003cmdl.RangeSlider style={styles.slider} /\u003e\n…\nconst SliderWithRange = mdl.RangeSlider.slider()\n  .withStyle(styles.slider)\n  .withMin(10)\n  .withMax(100)\n  .withMinValue(30)\n  .withMaxValue(50)\n  .build();\n…\n\u003cSliderWithRange\n  ref=\"sliderWithRange\"\n  onChange={(curValue) =\u003e this.setState({\n    min: curValue.min,\n    max: curValue.max,\n    })\n  }\n  onConfirm={(curValue) =\u003e {\n    console.log(\"Slider drag ended\");\n    console.log(curValue);\n  }}\n/\u003e\n```\n\n👉 [props reference][range-slider-props-doc] and [example code][slider-sample]\n\n[mdl-slider]: http://www.getmdl.io/components/index.html#sliders-section\n[slider-demo]: https://cloud.githubusercontent.com/assets/390805/10123318/6c502e6e-6569-11e5-924a-62c8b850511c.gif\n[range-slider-demo]: https://cloud.githubusercontent.com/assets/16245422/12763284/63a2dafc-c9a8-11e5-8fde-37b6f42a60c2.gif\n[slider-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/sliders.js\n[slider-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Slider.html#props\n[range-slider-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/RangeSlider.html#props\n\n### Text Fields\n\nBuilt-in textfields, which comply with [Material Design Lite][mdl-tf].\n\n[![img-tf]][mdl-tf]\n\n```jsx\n// textfield with default theme (configurable)\nconst Textfield = MKTextField.textfield()\n  .withPlaceholder('Text...')\n  .withStyle(styles.textfield)\n  .build();\n\n...\n\u003cTextfield /\u003e\n```\n\nCustomizing textfields through builder:\n\n```jsx\nconst CustomTextfield = mdl.Textfield.textfield()\n  .withPlaceholder(\"Text...\")\n  .withStyle(styles.textfield)\n  .withTintColor(MKColor.Lime)\n  .withTextInputStyle({color: MKColor.Orange})\n  .build();\n...\n\u003cCustomTextfield /\u003e\n```\n\nthe jsx equivalent:\n\n```jsx\n\u003cTextfield\n  tintColor={MKColor.Lime}\n  textInputStyle={{color: MKColor.Orange}}\n  placeholder=“Text…”\n  style={styles.textfield}\n/\u003e\n```\n\n👉 [props reference][tf-props-doc] and [example code][tf-sample]\n\n[mdl-tf]: http://www.getmdl.io/components/#textfields-section\n[img-tf]: https://cloud.githubusercontent.com/assets/390805/9085678/8280484a-3bb1-11e5-9354-a244b0520736.gif\n[tf-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/textfields.js\n[tf-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Textfield.html#props\n\n### Toggles\n\n[Icon toggle][mdl-icon-toggle] \u0026 [Switch][mdl-switch]\n[![img-toggles]][mdl-toggles]\n\n[mdl-toggles]: http://www.getmdl.io/components/index.html#toggles-section\n[mdl-icon-toggle]: http://www.getmdl.io/components/index.html#toggles-section/icon-toggle\n[mdl-switch]: http://www.getmdl.io/components/index.html#toggles-section/switch\n[img-toggles]: https://cloud.githubusercontent.com/assets/390805/8903074/de0ed748-3487-11e5-9448-9ee304e0a6b6.gif\n\n#### Icon toggle\n\n```jsx\n\u003cMKIconToggle\n  checked={true}\n  onCheckedChange={this._onIconChecked}\n  onPress={this._onIconClicked}\n\u003e\n  \u003cText\n    pointerEvents=\"none\"\n    style={styles.toggleTextOff}\u003eOff\u003c/Text\u003e\n  \u003cText state_checked={true}\n        pointerEvents=\"none\"\n        style={[styles.toggleText, styles.toggleTextOn]}\u003eOn\u003c/Text\u003e\n\u003c/MKIconToggle\u003e\n```\n\nThe two `Text` tags here, similar to [State List][android-state-list] in *Android* development, which can give you the flexibility to decide what content and how it is shown for each state of the toggle. For example, you can use [react-native-icons][rn-icons] here, or any other sophisticated contents.\n\n👉 [props reference][icon-toggle-props-doc] and [example code][toggles-sample]\n\n[android-state-list]: http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList\n[rn-icons]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Switch.html\n[icon-toggle-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/IconToggle.html#props\n\n#### Switch\n\n```jsx\n\u003cmdl.Switch\n  style={styles.appleSwitch}\n  onColor=\"rgba(255,152,0,.3)\"\n  thumbOnColor={MKColor.Orange}\n  rippleColor=\"rgba(255,152,0,.2)\"\n  onPress={() =\u003e console.log('orange switch pressed')}\n  onCheckedChange={(e) =\u003e console.log('orange switch checked', e)}\n/\u003e\n```\n\n👉 [props reference][switch-js-props-doc] and [example code][toggles-sample]\n\n[toggles-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/toggles.js\n[switch-js-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Switch.html#props\n\n#### Checkbox\n\n[![img-checkbox]][mdl-checkbox]\n\n```jsx\n\u003cMKCheckbox\n  checked={true}\n/\u003e\n```\n\nYou can customize the styles by changing the global theme, which affects all checkboxes across the whole app.\n\n```js\nsetTheme({checkboxStyle: {\n  fillColor: MKColor.Teal,\n  borderOnColor: MKColor.Teal,\n  borderOffColor: MKColor.Teal,\n  rippleColor: `rgba(${MKColor.RGBTeal},.15)`,\n}});\n```\n\n👉 [props reference][checkbox-props-doc] and [example code][toggles-sample]\n\n[mdl-checkbox]: http://www.getmdl.io/components/index.html#toggles-section/checkbox\n[img-checkbox]: https://cloud.githubusercontent.com/assets/390805/12009445/0f938cee-acb2-11e5-9732-434382f6cd84.gif\n[checkbox-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Checkbox.html#props\n\n\n#### Radio button\n\n[![img-radio]][mdl-radio]\n\n```jsx\nconstructor() {\n  super();\n  this.radioGroup = new MKRadioButton.Group();\n}\n...\n\u003cMKRadioButton\n  checked={true}\n  group={this.radioGroup}\n/\u003e\n```\n\nYou can customize the styles by changing the global theme, which affects all radio buttons across the whole app.\n\n```js\nsetTheme({radioStyle: {\n  fillColor: `rgba(${MKColor.RGBTeal},.8)`,\n  borderOnColor: `rgba(${MKColor.RGBTeal},.6)`,\n  borderOffColor: `rgba(${MKColor.RGBTeal},.3)`,\n  rippleColor: `rgba(${MKColor.RGBTeal},.15)`,\n}});\n```\n\n👉 [props reference][radio-props-doc] and [example code][toggles-sample]\n\n[mdl-radio]: http://www.getmdl.io/components/index.html#toggles-section/radio\n[img-radio]: https://cloud.githubusercontent.com/assets/390805/10442805/bdb08bc0-7188-11e5-8565-4ee0049ad590.gif\n[radio-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/RadioButton.html#props\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxinthink%2Freact-native-material-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxinthink%2Freact-native-material-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxinthink%2Freact-native-material-kit/lists"}