{"_id":"@alexartisan/react-native-material-kit","_rev":"1-b17a7b0e6e246c80a6860b821ca92feb","name":"@alexartisan/react-native-material-kit","dist-tags":{"latest":"0.6.0-beta.5"},"versions":{"0.6.0-beta.5":{"name":"@alexartisan/react-native-material-kit","version":"0.6.0-beta.5","description":"Bringing Material Design to React Native","main":"lib/index.js","typings":"lib/react-native-material-kit.d.ts","author":{"name":"Yingxin Wu","email":"yingxinwu.g@gmail.com"},"contributors":[{"name":"Quentin Valmori","url":"https://github.com/Crash--"},{"name":"Alexander Price","url":"https://github.com/alexprice91"}],"license":"MIT","keywords":["react","native","react-component","react-native","react-native-component","ios","android","material design","MaterialKit"],"homepage":"https://github.com/xinthink/react-native-material-kit","bugs":{"url":"https://github.com/xinthink/react-native-material-kit/issues"},"repository":{"type":"git","url":"git://github.com/AlexArtisan/react-native-material-kit.git"},"devDependencies":{"@microsoft/api-documenter":"^7.3.11","@microsoft/api-extractor":"^7.3.4","@react-native-community/eslint-config":"~0.0.7","@types/jest":"^25.1.0","@types/ramda":"^0.26.0","@types/react-native":"^0.57.7","@types/react-test-renderer":"^16.9.0","babel-eslint":"^10.0.3","babel-jest":"^25.1.0","eslint":"^6.8.0","jest":"^25.1.0","react-native-typescript-transformer":"^1.2.13","react-test-renderer":"^16.12.0","tslint":"^6.0.0","tslint-config-prettier":"^1.18.0","tslint-config-standard":"^9.0.0","tslint-react":"^4.2.0","typescript":"^3.7.5"},"dependencies":{"ramda":"^0.27.0"},"peerDependencies":{"react":"*","react-native":">=0.50.0"},"scripts":{"lint":"tslint -p .","test":"jest","build":"yarn lint && tsc","build-docs":"yarn clean && yarn setup && yarn ln && yarn build && api-extractor run --local --verbose && yarn api-md","clean":"rm -rf lib temp etc dist docs && yarn clean-ln","clean-ln":"rm -f src/mdl/Spinner.tsx","ln":"ln -f src/mdl/Spinner.ios.tsx src/mdl/Spinner.tsx","build-publish":"yarn build-docs && yarn clean-ln && rm lib/mdl/Spinner.js","setup":"mkdir temp etc dist docs","api-md":"api-documenter markdown --input-folder temp --output-folder docs/api"},"jest":{"testPathIgnorePatterns":["/node_modules/","/example/"]},"gitHead":"ce6a653f32e0130e609845b889993bcc7c3667b5","_id":"@alexartisan/react-native-material-kit@0.6.0-beta.5","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-FZUE3w427R5770SFtRrJFQPfdovFvl4L62A4X5HYrA0W0IuA9K6w0HKib8G+3RxUHsxb+M7reYCtIjbN1wJ1dg==","shasum":"a4591317be9086341b299738dd5140313ab46bd2","tarball":"https://registry.npmjs.org/@alexartisan/react-native-material-kit/-/react-native-material-kit-0.6.0-beta.5.tgz","fileCount":56,"unpackedSize":187585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbt1wCRA9TVsSAnZWagAAa64P/0zitilFAadh9JtgQPkH\nfVrmAo4Eas4NH8iMrImJ8UpGIiCx8tVaw9QNgTlnRn72ii1p4MFQop62cbbU\ntQdpl/VxvFzemTUYkxud0ftGDxW7Qj3wqrrC6BuYaFf05MJZ5S7FmS88X1AD\n2mWSos5Gn12/wFJ2DbpDozX3Zwc2DRjKdCV3p+p47DhBhPgs8CIjC+8MjqHk\n7nmJYtk/a4G1xtuo8pKi/oMgL7ghCHzJtcD70kfxPN4xO1m0BTZoijR5u0bF\nnAehpgFqfw+vmLZXx3oMt6bt89ijx3M8t+XEOgZpkRo8qhTa0Cd5zEwOmIyn\nmSVAWIVYA4ge35Sb0P3v832pTLbu2Ry2yuA3WwmkaZAWNheiegVgBpOIARNO\npFsxBSkprCYj+OJwUdyLCrldgjMEER+EiMovslTO63NnK1XLg2fsovAG4KSl\nXabmdSQGNcCFrcaFD22d72XGEfzwNnPAoovyLtyUUVhWFo9QZwOaJZPhkay6\n5c+ax1zBo6x+U2sOqxV74165A+dfsHvrERsGfwocgmIZPgcq16MQQnMUWLRb\nD8Rnp7/jp8Ff7hVRsjVUCNPDwrd/48/6r2sNEP0EkmxqiyuCf05/sR6yDGUg\nYF2iGKzbkOUABd0WMmc8s6Om593nQCtlxDRonWZk0DbrMpl0VRa2/4PXPSuR\nzSqB\r\n=sOKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjUtWw8CGLcMnI+3aJc7Vk1q4MeSaNCNlMJatP1CMSaQIhAOHp4FkjIrGmrEgYEgAiGym2hrFKn9dqWyfkno7fXaLL"}]},"maintainers":[{"name":"alexartisan","email":"strangleting@gmail.com"}],"_npmUser":{"name":"alexartisan","email":"strangleting@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-material-kit_0.6.0-beta.5_1601101167848_0.8551337112115056"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-26T06:19:27.808Z","0.6.0-beta.5":"2020-09-26T06:19:28.049Z","modified":"2022-04-04T12:39:18.833Z"},"maintainers":[{"name":"alexartisan","email":"strangleting@gmail.com"}],"description":"Bringing Material Design to React Native","homepage":"https://github.com/xinthink/react-native-material-kit","keywords":["react","native","react-component","react-native","react-native-component","ios","android","material design","MaterialKit"],"repository":{"type":"git","url":"git://github.com/AlexArtisan/react-native-material-kit.git"},"contributors":[{"name":"Quentin Valmori","url":"https://github.com/Crash--"},{"name":"Alexander Price","url":"https://github.com/alexprice91"}],"author":{"name":"Yingxin Wu","email":"yingxinwu.g@gmail.com"},"bugs":{"url":"https://github.com/xinthink/react-native-material-kit/issues"},"license":"MIT","readme":"[![Build Status][check-badge]][workflows]\n[![npm][npm-badge]][npm]\n[![react-native][rn-badge]][rn]\n[![MIT][license-badge]][license]\n<a href=\"https://www.jetbrains.com/?from=react-native-material-kit\" title=\"Built with JetBrains IDEs\">\n  <img src=\"http://xinthink.github.io/react-native-material-kit/images/logo_JetBrains_1.svg\" alt=\"Built with JetBrains IDEs\" width=\"48\">\n</a>\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 >= 0.4.0 only supports react-native >= 0.40.0\n\nreact-native-material-kit < 0.4.0 only supports react-native < 0.40.0\n\n### iOS\n\n* #### React Native < 0.29 (Using rnpm)\n\n  `rnpm install react-native-material-kit`\n\n* #### React Native >= 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 => ['Core', 'RCTText', 'RCTWebSocket'], :path => 'node_modules/react-native'\npod 'react-native-material-kit', :path => '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 < 0.29 (Using rnpm)\n\n  `rnpm install react-native-material-kit`\n\n* #### React Native >= 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 >= 0.32 MainApplication.java):\n\n  ```java\n  @Override\n  protected List<ReactPackage> 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(() => {\n    console.log(\"Hi, it's a colored button!\");\n  })\n  .build();\n\n...\n<ColoredRaisedButton />\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(() => {\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<CustomButton />\n```\n\nthe jsx equivalent:\n\n```jsx\n<MKButton\n  backgroundColor={MKColor.Teal}\n  shadowRadius={2}\n  shadowOffset={{width:0, height:2}}\n  shadowOpacity={.7}\n  shadowColor=\"black\"\n  onPress={() => {\n    console.log('hi, raised button!');\n  }}\n  >\n  <Text pointerEvents=\"none\"\n        style={{color: 'white', fontWeight: 'bold',}}>\n    RAISED BUTTON\n  </Text>\n</MKButton>\n```\n\n👉 [props reference][button-props-doc] and [example code][buttons-sample]\n\n> 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<View style={theme.cardStyle}>\n  <Image source={{uri : base64Icon}} style={theme.cardImageStyle} />\n  <Text style={theme.cardTitleStyle}>Welcome</Text>\n  <Text style={theme.cardContentStyle}>\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n    Mauris sagittis pellentesque lacus eleifend lacinia...\n  </Text>\n  <View style={theme.cardMenuStyle}>{menu}</View>\n  <Text style={theme.cardActionStyle}>My Action</Text>\n</View>\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<mdl.Progress\n  style={styles.progress}\n  progress={0.2}\n/>\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<mdl.Spinner />\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<mdl.Slider style={styles.slider} />\n…\nconst SliderWithValue = mdl.Slider.slider()\n  .withStyle(styles.slider)\n  .withMin(10)\n  .withMax(100)\n  .build();\n…\n<SliderWithValue\n  ref=\"sliderWithValue\"\n  onChange={(curValue) => this.setState({curValue})}\n/>\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<mdl.RangeSlider style={styles.slider} />\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<SliderWithRange\n  ref=\"sliderWithRange\"\n  onChange={(curValue) => this.setState({\n    min: curValue.min,\n    max: curValue.max,\n    })\n  }\n  onConfirm={(curValue) => {\n    console.log(\"Slider drag ended\");\n    console.log(curValue);\n  }}\n/>\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<Textfield />\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<CustomTextfield />\n```\n\nthe jsx equivalent:\n\n```jsx\n<Textfield\n  tintColor={MKColor.Lime}\n  textInputStyle={{color: MKColor.Orange}}\n  placeholder=“Text…”\n  style={styles.textfield}\n/>\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] & [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<MKIconToggle\n  checked={true}\n  onCheckedChange={this._onIconChecked}\n  onPress={this._onIconClicked}\n>\n  <Text\n    pointerEvents=\"none\"\n    style={styles.toggleTextOff}>Off</Text>\n  <Text state_checked={true}\n        pointerEvents=\"none\"\n        style={[styles.toggleText, styles.toggleTextOn]}>On</Text>\n</MKIconToggle>\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<mdl.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={() => console.log('orange switch pressed')}\n  onCheckedChange={(e) => console.log('orange switch checked', e)}\n/>\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<MKCheckbox\n  checked={true}\n/>\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<MKRadioButton\n  checked={true}\n  group={this.radioGroup}\n/>\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","readmeFilename":"README.md"}