xinthink / react-native-material-kit

[![Build Status][check-badge]][workflows] [![npm][npm-badge]][npm] [![react-native][rn-badge]][rn] [![MIT][license-badge]][license] A set of UI components, in the purpose of introducing [Material Design][md] to apps built with [React Native][rn], quickly and painlessly. [npm-badge]: https://img.shields.io/npm/v/react-native-material-kit.svg [npm]: https://www.npmjs.com/package/react-native-material-kit [rn-badge]: https://img.shields.io/badge/react--native-v0.61-05A5D1.svg [rn]: https://facebook.github.io/react-native [md]: http://www.google.com/design/spec/material-design/introduction.html [license-badge]: https://img.shields.io/dub/l/vibe-d.svg [license]: https://raw.githubusercontent.com/xinthink/react-native-material-kit/master/LICENSE.md [gitter-badge]: https://img.shields.io/gitter/room/xinthink/react-native-material-kit.svg [gitter-rnmk]: https://gitter.im/xinthink/react-native-material-kit [workflows]: https://github.com/xinthink/react-native-material-kit/actions [check-badge]: https://github.com/xinthink/react-native-material-kit/workflows/check/badge.svg Getting Started First, to your RN project directory, and install RNMK through rnpm . If you don't have rnpm, you can install RNMK from npm with the command and link it manually (see below). NOTICE: react-native-material-kit >= 0.4.0 only supports react-native >= 0.40.0 react-native-material-kit = 0.29 Manually • Add to your xcode project, usually under the group • Add (from under ) to build target's list Option: Using CocoaPods Assuming you have CocoaPods installed, create a like this in your app's project directory. You can leave out the modules you don't need. Now run . This will create an Xcode workspace containing all necessary native files, including react-native-material-kit. From now on open instead of in Xcode. Because React Native's iOS code is now pulled in via CocoaPods, you also need to remove the , , etc. subprojects from your app's Xcode project, in case they were added previously. Android • #### React Native = 0.29 Manually • JDK 7+ is required • Add the following snippet to your : • Declare the dependency in your • Import and register it in your (or equivalent, RN >= 0.32 MainApplication.java): Manual Installation Issues If you experience any trouble manually installing on Android, you should be able to safely skip it. Finally, you're good to go, feel free to require in your JS files. Have fun! :metal: Resources • [Release Notes] • Refer to the [Annotated Source][docs] as API docs • Source code of [Demo app] • For contributors, please refer to [How to debug local RNMK module][debug-with-demo] • Chat about bugs/features on [Gitter][gitter-rnmk] [docs]: http://xinthink.github.io/react-native-material-kit/docs/index.html [Demo app]: https://github.com/xinthink/react-native-material-kit/tree/master/example [debug-with-demo]: https://github.com/xinthink/rnmk-demo#debugging-local-rnmk-module [Release Notes]: https://github.com/xinthink/react-native-material-kit/releases Components • Buttons • Cards • Loading • Progress bar • Spinner • Sliders • Range Slider • Textfields • Toggles • Checkbox • Radio button • Icon toggle • Switch Buttons [![img-buttons]][mdl-buttons] Apply [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]. And you can definitely build customized buttons from scratch. with builder: the jsx equivalent: 👉 [props reference][button-props-doc] and [example code][buttons-sample] > Why builders? See the ‘[Builder vs. configuration object][issue-3]’ discussion. [img-buttons]: https://cloud.githubusercontent.com/assets/390805/8888853/69f8d9f8-32f2-11e5-9823-c235ab8c0dd2.gif [mdl-buttons]: http://www.getmdl.io/components/index.html#buttons-section [mdl-theme]: http://www.getmdl.io/customize/index.html [buttons-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/buttons.js [issue-3]: https://github.com/xinthink/react-native-material-kit/issues/3 [button-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Button.html#props Cards [![img-cards]][cards-mdl] Apply [ ][cards-mdl] with only few styles !. 👉 [example code][card-sample] [cards-mdl]: http://www.getmdl.io/components/index.html#cards-section [img-cards]: https://cloud.githubusercontent.com/assets/390805/10262736/4411994a-6a07-11e5-8a72-b7a46ba5e4a9.png [card-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/cards.js Loading [MDL Loading][mdl-loading] components. Progress bar [![progress-demo]][mdl-loading] 👉 [props reference][prog-props-doc] and [example code][progress-sample] Spinner [![spinner-demo]][mdl-loading] 👉 [props reference][spinner-props-doc] and [example code][progress-sample] [mdl-loading]: http://www.getmdl.io/components/index.html#loading-section [progress-demo]: https://cloud.githubusercontent.com/assets/390805/9288698/01e31432-4387-11e5-98e5-85b18471baeb.gif [spinner-demo]: https://cloud.githubusercontent.com/assets/390805/9291361/6e7a75bc-43ec-11e5-95be-2b33eb7f8734.gif [progress-sample]: https://github.com/xinthink/react-native-material-kit/blob/master/example/app/progress.js [prog-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Progress.html#props [spinner-props-doc]: http://xinthink.github.io/react-native-material-kit/docs/lib/mdl/Spinner.ios.html#props Sliders [MDL Slider][mdl-slider] components. [![slider-demo]][mdl-slider] 👉 [props reference][slider-props-doc] and [example code][slider-sample] Range Slider ![range-slider-demo] 👉 [props reference][range-slider-props-doc] and [example code][slider-sample] [mdl-slider]: http://www.getmdl.io/components/index.html#sliders-section [slider-demo]: https://cloud.githubusercontent.com/assets/390805/10123318/6c502e6e-6569-11e5-924a-62c8b850511c.gif [range-slider-demo]: https://cloud.githubusercontent.com/assets/162454…