{"_id":"@biomedia-nl/react-native-material-kit","_rev":"2-cb992cab1ad3ec6305c4738455992759","name":"@biomedia-nl/react-native-material-kit","dist-tags":{"latest":"3.0.0"},"versions":{"1.0.0":{"name":"@biomedia-nl/react-native-material-kit","version":"1.0.0","description":"Bringing Material Design to React Native","main":"lib/index.js","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/xinthink/react-native-material-kit.git"},"devDependencies":{"@types/ramda":"^0.25.40","@types/react":"^16.4.18","@types/react-native":"^0.57.7","babel-eslint":"^9.0.0","eslint":"^5.5.0","eslint-config-airbnb":"^17.1.0","eslint-plugin-import":"^2.14.0","eslint-plugin-jsx-a11y":"^6.1.1","eslint-plugin-react":"^7.11.1","gulp":"^3.9.0","gulp-docco":"0.0.4","react-native-typescript-transformer":"^1.2.10","tslint":"^5.11.0","tslint-config-prettier":"^1.15.0","tslint-config-standard":"^8.0.1","tslint-react":"^3.6.0","typescript":"^3.1.3"},"dependencies":{"ramda":"^0.25.0"},"peerDependencies":{"react":"*","react-native":">=0.50.0"},"scripts":{"lint":"tslint -p .","test":"jest","build":"lint && tsc"},"gitHead":"1e3aa092f1a206a68d3c479ff2c45f5ca11ee62b","_id":"@biomedia-nl/react-native-material-kit@1.0.0","_nodeVersion":"8.15.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-zGWall80CKKNWr799UAlLq6vEHskY+/iU0fdFUYeRbBT4EYjwu1h/M9cy9N599jd1YiIaKZvpS1DlpuQtjzgog==","shasum":"eb4c669b1afb1814d78e9c4da87b1c9668225fb9","tarball":"https://registry.npmjs.org/@biomedia-nl/react-native-material-kit/-/react-native-material-kit-1.0.0.tgz","fileCount":84,"unpackedSize":330010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvs6ZCRA9TVsSAnZWagAAqmEQAIyAfyX/cXtxQ68VNEJV\n8HVUYhk75TJq0AWG/UZlvg0z8qBYGK/CCBhGoD8FFY8U9ry8Un4ZxXpQxLUG\nc9CWh2feqR/03iNu1Pz1ZbYgnd/X5IMAn1SVWnwmiBMDa3mSOdW/Z8pQj9R3\nia9hPMOcvLeSZFPxb41d4Es+UczAlIevYyKd4Wj2vEoGxfONg8vme2zbB8cX\nuLLhrAElFmvVrI8yVWVlhJqY8up6kiJad1DaHmEsQcVV5ZbN6HP2rCx7brPp\n4/vc/auTmQrVSbLKXXnDhRI1Iyx1KIIkF6i1jlcsUVomjOC57O/fut1V4NoT\nTbyyXT3NlRcwSuP7/9rAL+WxBZUixw/bF5V4ndTK+/WeRtQDhpTF6oxKXfhZ\n4OPNIMr+EdVHT6wGsBzLVG10/tZjJ6sUCRKbeCQvQ1OWEGyAZC2KvH7QLaZz\ny8fpvJh5oWmJE7nEgsr0kdqgvBb6tlyGa3Uh3+jJ/s7bAFIVJC/4Cd051pL2\nMamNOgRxGLvwSv67n0hHOU39WtiS+VA6jDfLwNOSwp11OwpFDG+SfY/yN3Og\n5KPmulJNGoV30S+qklkDQhVOfaCHkGg2ueAVP9zw6BlsJv8nzRIWucwOLlB0\nLycaC3t/AOpNHypm0TIrsqELXz0OTet8rjsA9dav2Uv/xGAj1TJpqYuFnEI5\nOPZE\r\n=uTMT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKQcis9DvNxNRKiu5B/ZrVxZB6rR6SKjCGYOssyJBhgAiBQtGHjpRy5ZN8s3EdEqQUeJZ6svyTobPC47XJjpJPYrQ=="}]},"maintainers":[{"name":"biomedia-thomas","email":"npm@biomedia.nl"}],"_npmUser":{"name":"biomedia-thomas","email":"npm@biomedia.nl"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-material-kit_1.0.0_1556008601077_0.8103725466812135"},"_hasShrinkwrap":false},"3.0.0":{"name":"@biomedia-nl/react-native-material-kit","version":"3.0.0","description":"Bringing Material Design to React Native","main":"lib/index.js","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/xinthink/react-native-material-kit.git"},"devDependencies":{"babel-eslint":"^6.0.2","eslint":"^2.9.0","eslint-config-airbnb":"^6.2.0","eslint-plugin-react":"^4.3.0","gulp":"^3.9.0","gulp-docco":"0.0.4"},"dependencies":{"prop-types":"^15.5.10","ramda":"^0.24.1"},"scripts":{"lint":"eslint lib"},"gitHead":"cc1205e74b5720a1d521fbee0d0c11741e298cdc","_id":"@biomedia-nl/react-native-material-kit@3.0.0","_nodeVersion":"8.15.1","_npmVersion":"6.9.0","dist":{"integrity":"sha512-SudrNhfb/RunjrLGRQkSIXwy1YzS4nKcJ8Ra/nxUXwZ0LpYd6aobmLOYYPz8hK0pLI/64q4MoPAWST0MTThESA==","shasum":"c52fd90f4aae26b4aafb73cb6df847bcf546374c","tarball":"https://registry.npmjs.org/@biomedia-nl/react-native-material-kit/-/react-native-material-kit-3.0.0.tgz","fileCount":64,"unpackedSize":261472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvt72CRA9TVsSAnZWagAA2pQQAJiNRS4G2Hy0ibp15w4B\ndc5Jk63Oo0YUdoXg6uhAGJMfKa+svwnXBcLDLmvly1g52Y0dKUg7RrqDEmPE\nUB0bCaTRdUkmDRzVZ8UNeyGVU6LDNBNQQBhpil4xHacbwRHdghfI7UO7Yfvh\nXiIcAZbNcwsCu0wSf1kUkvIdojviJIGRwkBkQoNMeYevO9JSJ0r55/pbjQLK\nC0CPOJe0sbj7sWCpdFB7xiwT1dRO9aqRak0iqdbhkXbW1wd1+NWt9pk49jAp\nyf5N+9jsHsn8GNygE0dAWnucWicvDj+0ZrG/sqm+BKYxrplHuKDgQREsygf8\nN5fShSkMoWVIxEmeDLtKqwVsKE4FTNwdsHcKiLsMQUnIwRACzxD1wdcgP8F9\nmLHuKUvLcIOpJKhOaXHR2AAQZdoKmIFPuczpCeWln1ZHg8cfQf4aJQBYJCRj\nJmTvdB8+8UFVLim8fwq8m3ENkNdaav4EFHG49FGr2hxErOVY4wm1vMRn/Hb6\n3sm5DetLQh8LVZRNje1SkWPp2C9RBjoNhOWkJu8wYCSdhli3LH1/HNb7qFr1\nQ9keQ03Od1DIy4kowidYrnqFOHuWJcrn8evtoYQTirakfX2a683AJus1dZEL\n8ptTZrDIeWA/vZnNA2isTWBxCl+cXFspjfvLhn1E5rCpB7Z4Plx0/gL2wuvg\ncsbw\r\n=4Zqa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUV5IwBdHsmQAMzdpV2wvTsPA6pAb43+iBw0mHf+LANgIgOTepkkRmQAyUXTWDECTbxSPDLPNGuQ7czf/3/xzUeG4="}]},"maintainers":[{"name":"biomedia-thomas","email":"npm@biomedia.nl"}],"_npmUser":{"name":"biomedia-thomas","email":"npm@biomedia.nl"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-material-kit_3.0.0_1556012789648_0.7662397260225657"},"_hasShrinkwrap":false}},"time":{"created":"2019-04-23T08:36:40.918Z","1.0.0":"2019-04-23T08:36:41.209Z","modified":"2022-04-04T18:53:40.379Z","3.0.0":"2019-04-23T09:46:29.787Z"},"maintainers":[{"name":"biomedia-thomas","email":"npm@biomedia.nl"}],"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/xinthink/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":"[![npm][npm-badge]][npm]\n[![react-native][rn-badge]][rn]\n[![MIT][license-badge]][license]\n[![bitHound Score][bithound-badge]][bithound]\n[![Gitter][gitter-badge]][gitter-rnmk]\n\n\n \"Built\n\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.39-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[bithound-badge]: https://www.bithound.io/github/xinthink/react-native-material-kit/badges/score.svg\n[bithound]: https://www.bithound.io/github/xinthink/react-native-material-kit\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\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 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/rnmk-demo\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\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\n```\n\nthe jsx equivalent:\n\n```jsx\n {\n console.log('hi, raised button!');\n }}\n >\n \n RAISED BUTTON\n \n\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/rnmk-demo/blob/master/app/buttons.js\n[issue-3]: https://github.com/xinthink/react-native-material-kit/issues/3\n[button-props-doc]: http://www.xinthink.com/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\n \n Welcome\n \n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Mauris sagittis pellentesque lacus eleifend lacinia...\n \n {menu}\n My Action\n\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/rnmk-demo/blob/master/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\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\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/rnmk-demo/blob/master/app/progress.js\n[prog-props-doc]: http://www.xinthink.com/react-native-material-kit/docs/lib/mdl/Progress.html#props\n[spinner-props-doc]: http://www.xinthink.com/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\n…\nconst SliderWithValue = mdl.Slider.slider()\n .withStyle(styles.slider)\n .withMin(10)\n .withMax(100)\n .build();\n…\n 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\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 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/rnmk-demo/blob/master/app/sliders.js\n[slider-props-doc]: http://www.xinthink.com/react-native-material-kit/docs/lib/mdl/Slider.html#props\n[range-slider-props-doc]: http://www.xinthink.com/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\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\n```\n\nthe jsx equivalent:\n\n```jsx\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/rnmk-demo/blob/master/app/textfields.js\n[tf-props-doc]: http://www.xinthink.com/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\n Off\n On\n\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://www.xinthink.com/react-native-material-kit/docs/lib/mdl/Switch.html\n[icon-toggle-props-doc]: http://www.xinthink.com/react-native-material-kit/docs/lib/mdl/IconToggle.html#props\n\n#### Switch\n\n```jsx\n 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/rnmk-demo/blob/master/app/toggles.js\n[switch-js-props-doc]: http://www.xinthink.com/react-native-material-kit/docs/lib/mdl/Switch.html#props\n\n#### Checkbox\n\n[![img-checkbox]][mdl-checkbox]\n\n```jsx\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://www.xinthink.com/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\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://www.xinthink.com/react-native-material-kit/docs/lib/mdl/RadioButton.html#props\n\n\n## About\nThis project is inspired by [MaterialKit][], thanks [@nghialv][] for the great work!πŸ‘πŸ––\n\nBut I rewrote almost all the components in JSX, with limited help of native code.\n\nAnd lastly, it’s lots of work to be done, ***contributions*** are welcome!πŸŽ‰πŸ»\n\n[@nghialv]: https://github.com/nghialv\n[MaterialKit]: https://github.com/nghialv/MaterialKit\n","readmeFilename":"README.md"}