├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github ├── FUNDING.yml └── workflows │ ├── check.yaml │ ├── docs.yaml │ └── publish.yaml ├── .gitignore ├── .idea ├── codeStyleSettings.xml ├── codeStyles │ ├── Project.xml │ └── codeStyleConfig.xml ├── compiler.xml ├── dictionaries │ └── ywu.xml ├── encodings.xml ├── inspectionProfiles │ ├── Project_Default.xml │ └── profiles_settings.xml └── runConfigurations │ ├── example_android.xml │ └── example_ios.xml ├── .npmignore ├── .prettierignore ├── .vscode └── settings.json ├── .watchmanconfig ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── __tests__ └── lib-test.js ├── android ├── .gitignore ├── build.gradle └── src │ ├── androidTest │ └── java │ │ └── com │ │ └── github │ │ └── xinthink │ │ └── rnmk │ │ └── ApplicationTest.java │ └── main │ ├── AndroidManifest.xml │ ├── java │ └── com │ │ └── github │ │ └── xinthink │ │ └── rnmk │ │ ├── MKSpinnerManager.java │ │ ├── MKTouchableManager.java │ │ ├── ReactMaterialKitPackage.java │ │ ├── TickViewManager.java │ │ ├── utils │ │ └── Utils.java │ │ └── widget │ │ ├── MKSpinner.java │ │ ├── MKTouchable.java │ │ └── TickView.java │ └── res │ └── values │ ├── attributes.xml │ └── constants.xml ├── api-extractor.json ├── example ├── .buckconfig ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .watchmanconfig ├── README.md ├── android │ ├── .gitignore │ ├── app │ │ ├── _BUCK │ │ ├── build.gradle │ │ ├── build_defs.bzl │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ │ └── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── java │ │ │ └── com │ │ │ │ └── github │ │ │ │ └── xinthink │ │ │ │ └── rnmk │ │ │ │ └── demo │ │ │ │ ├── MainActivity.java │ │ │ │ └── MainApplication.java │ │ │ └── res │ │ │ ├── mipmap-hdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-mdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ ├── mipmap-xxxhdpi │ │ │ ├── ic_launcher.png │ │ │ └── ic_launcher_round.png │ │ │ └── values │ │ │ ├── strings.xml │ │ │ └── styles.xml │ ├── build.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ └── settings.gradle ├── app.json ├── app │ ├── buttons.tsx │ ├── cards.tsx │ ├── img │ │ ├── plus_dark.png │ │ └── plus_white.png │ ├── index.tsx │ ├── progress.tsx │ ├── sliders.tsx │ ├── styles.ts │ ├── textfields.tsx │ └── toggles.tsx ├── babel.config.js ├── index.js ├── ios │ ├── Podfile │ ├── Podfile.lock │ ├── example-tvOS │ │ └── Info.plist │ ├── example-tvOSTests │ │ └── Info.plist │ ├── example.xcodeproj │ │ ├── project.pbxproj │ │ └── xcshareddata │ │ │ └── xcschemes │ │ │ ├── example-tvOS.xcscheme │ │ │ └── example.xcscheme │ ├── example.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ └── IDEWorkspaceChecks.plist │ ├── example │ │ ├── AppDelegate.h │ │ ├── AppDelegate.m │ │ ├── Base.lproj │ │ │ └── LaunchScreen.xib │ │ ├── Images.xcassets │ │ │ ├── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ │ └── Contents.json │ │ ├── Info.plist │ │ └── main.m │ └── exampleTests │ │ ├── Info.plist │ │ └── exampleTests.m ├── metro.config.js ├── package.json ├── tsconfig.json ├── tslint.json └── yarn.lock ├── iOS ├── RCTMaterialKit.xcodeproj │ └── project.pbxproj └── RCTMaterialKit │ ├── MKTouchable.h │ ├── MKTouchable.m │ ├── MKTouchableManager.m │ ├── MKUtils.h │ ├── TickView.h │ ├── TickView.m │ ├── TickViewManager.m │ ├── UIColor+MKColor.h │ └── UIColor+MKColor.m ├── package.json ├── react-native-material-kit.podspec ├── src ├── MKColor.ts ├── index.ts ├── internal │ ├── MKTouchable.tsx │ ├── SwitchThumb.tsx │ ├── Thumb.tsx │ ├── Tick.tsx │ └── textfield │ │ ├── FloatingLabel.tsx │ │ └── Underline.tsx ├── mdl │ ├── Button.tsx │ ├── Checkbox.tsx │ ├── IconToggle.tsx │ ├── IndeterminateProgress.tsx │ ├── Progress.tsx │ ├── RadioButton.tsx │ ├── RadioButtonGroup.ts │ ├── RangeSlider.tsx │ ├── Ripple.tsx │ ├── Slider.tsx │ ├── Spinner.android.tsx │ ├── Spinner.ios.tsx │ ├── Switch.tsx │ ├── Textfield.tsx │ ├── index.ts │ ├── progress_common.ts │ └── spinner_common.ts ├── theme.ts ├── types.ts └── utils.ts ├── tsconfig.json ├── tslint.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | .* 2 | lib 3 | node_modules 4 | *.config.js 5 | *.d.ts 6 | 7 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | rules: { 5 | 'prettier/prettier': ['error', { 6 | singleQuote: true, 7 | trailingComma: 'es5', 8 | printWidth: 110, 9 | }], 10 | semi: 'off', 11 | 'react-native/no-inline-styles': 'off', 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.json linguist-language=JSON-with-Comments 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: paypal.me/xinthink/5 13 | -------------------------------------------------------------------------------- /.github/workflows/check.yaml: -------------------------------------------------------------------------------- 1 | name: check 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | - 'refs/pull/*' 8 | - '!**/publish' 9 | - '!publish' 10 | 11 | jobs: 12 | build: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Install 17 | uses: borales/actions-yarn/@v2.0.0 18 | with: 19 | cmd: install 20 | - name: Build 21 | uses: borales/actions-yarn/@v2.0.0 22 | with: 23 | cmd: build 24 | - name: notification 25 | if: cancelled() == false 26 | uses: xinthink/action-telegram@v1.1 27 | with: 28 | botToken: ${{ secrets.TelegramBotToken }} 29 | chatId: ${{ secrets.TelegramTarget }} 30 | jobStatus: ${{ job.status }} 31 | -------------------------------------------------------------------------------- /.github/workflows/docs.yaml: -------------------------------------------------------------------------------- 1 | name: docs 2 | 3 | on: 4 | push: 5 | branches: master 6 | 7 | jobs: 8 | docs: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v1 12 | - name: Install 13 | uses: borales/actions-yarn/@v2.0.0 14 | with: 15 | cmd: install 16 | - name: Generate tsdoc 17 | uses: borales/actions-yarn/@v2.0.0 18 | with: 19 | cmd: build-docs 20 | - name: Deploy to GitHub Pages 21 | uses: peaceiris/actions-gh-pages@v2.8.0 22 | env: 23 | PERSONAL_TOKEN: ${{ secrets.ACCESS_TOKEN }} 24 | PUBLISH_BRANCH: gh-pages 25 | PUBLISH_DIR: ./docs 26 | with: 27 | emptyCommits: false 28 | keepFiles: true 29 | - name: notification 30 | if: cancelled() == false 31 | uses: xinthink/action-telegram@v1.1 32 | with: 33 | botToken: ${{ secrets.TelegramBotToken }} 34 | chatId: ${{ secrets.TelegramTarget }} 35 | jobStatus: ${{ job.status }} 36 | -------------------------------------------------------------------------------- /.github/workflows/publish.yaml: -------------------------------------------------------------------------------- 1 | name: publish 2 | 3 | on: 4 | release: 5 | types: published 6 | 7 | jobs: 8 | publish: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v1 12 | - name: Install 13 | uses: borales/actions-yarn/@v2.0.0 14 | with: 15 | cmd: install 16 | - name: Build js & d.ts files 17 | uses: borales/actions-yarn/@v2.0.0 18 | with: 19 | cmd: build-publish 20 | - name: Publish 21 | run: | 22 | echo '//registry.npmjs.org/:_authToken=${{ secrets.NPM_ACCESS_TOKEN }}' >> ~/.npmrc 23 | npm publish 24 | - name: notification 25 | if: cancelled() == false 26 | uses: xinthink/action-telegram@v1.1 27 | with: 28 | botToken: ${{ secrets.TelegramBotToken }} 29 | chatId: ${{ secrets.TelegramTarget }} 30 | jobStatus: ${{ job.status }} 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # node.js 26 | # 27 | node_modules/ 28 | npm-debug.log 29 | lib-cov 30 | *.seed 31 | *.log 32 | *.csv 33 | *.dat 34 | *.out 35 | *.pid 36 | *.gz 37 | 38 | # WebStorm 39 | # 40 | .idea/*.iml 41 | .idea/.name 42 | .idea/caches 43 | # .idea/dictionaries 44 | .idea/gradle.xml 45 | .idea/jsLibraryMappings.xml 46 | .idea/libraries 47 | .idea/misc.xml 48 | .idea/modules.xml 49 | .idea/runConfigurations.xml 50 | .idea/tasks.xml 51 | .idea/vcs.xml 52 | .idea/workspace.xml 53 | 54 | rn-cli.config.js 55 | lib 56 | temp/ 57 | dist/ 58 | etc/ 59 | docs/ 60 | bak/ 61 | -------------------------------------------------------------------------------- /.idea/codeStyleSettings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 11 | 13 | -------------------------------------------------------------------------------- /.idea/codeStyles/Project.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 35 | -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /.idea/dictionaries/ywu.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | eslint 5 | initializers 6 | textfield 7 | 8 | 9 | -------------------------------------------------------------------------------- /.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 12 | -------------------------------------------------------------------------------- /.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /.idea/runConfigurations/example_android.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | -------------------------------------------------------------------------------- /.idea/runConfigurations/example_ios.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | 24 | # node.js 25 | # 26 | node_modules/ 27 | npm-debug.log 28 | 29 | # WebStorm 30 | # 31 | .idea 32 | *.iml 33 | 34 | # Android 35 | local.properties 36 | .gradle/ 37 | 38 | .eslint* 39 | .github/ 40 | .git* 41 | .prettierignore 42 | .watchmanconfig 43 | api-extractor.json 44 | ts* 45 | .vscode/ 46 | 47 | lib/**/*.d.ts 48 | lib/**/*.ts.map 49 | lib/**/*.js.map 50 | !lib/react-native-material-kit.d.ts 51 | 52 | __tests__/ 53 | src/ 54 | example/ 55 | docs/ 56 | dist/ 57 | etc/ 58 | temp/ 59 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.d.ts 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { "*.json": "jsonc" }, 3 | "eslint.alwaysShowStatus": true, 4 | "eslint.packageManager": "yarn", 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "root_dirs": [ 3 | "lib", 4 | "index*.js" 5 | ], 6 | "ignore_dirs": [ 7 | ".git", 8 | "*/node_modules", 9 | ".idea", 10 | "*/build", 11 | "iOS" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to React Native Material Kit 2 | 3 | Thank you for contributing to [RNMK]! :metal: 4 | 5 | ## Reporting Bugs 6 | 7 | - Before filing a new task, try to make sure it doesn't already exist. 8 | - Provide environment informations, such as RN version, RNMK version, OS version etc. 9 | - Provide error logs or stack trace if possible. For UI issues, screenshots are helpful. 10 | - Try to provide a reduced test case. Either a public repository with a runnable example or a [React Native Playground](https://rnplay.org/) snippet. 11 | 12 | ## Component Contributions 13 | 14 | - Test your components on both iOS and Android platform 15 | - ***Try*** to keep compatible with the oldest version of RN which RNMK supports ([Where to find it?][rnmk-rn-version]) 16 | - Demonstrating the new components in [RNMK Demos] 17 | - Add showcases and brief examples to `README.md` 18 | - Components should be organized in alphabet order 19 | 20 | [rnmk-rn-version]: https://github.com/xinthink/react-native-material-kit/blob/master/package.json#L25 21 | [RNMK Demos]: https://github.com/xinthink/rnmk-demo 22 | 23 | ## Style Guide for Code Contributions 24 | 25 | ### General 26 | 27 | * Replacing tabs with spaces 28 | * End files with a single newline character 29 | * "Attractive" 30 | 31 | ### JavaScript/JSX 32 | 33 | * 2 spaces for indentation (no tabs) 34 | * Prefer ES6/ES7 syntax 35 | * Add trailing commas, ([*Why?*](https://github.com/airbnb/javascript#19.2)) 36 | * Use single-line comments with markdown syntax for documentation (I’m using a documentation generator called [Docco]) 37 | * [Airbnb JavaScript Style Guide] 38 | * [Airbnb React/JSX Style Guide] 39 | 40 | [Airbnb JavaScript Style Guide]: https://github.com/airbnb/javascript 41 | [Airbnb React/JSX Style Guide]: https://github.com/airbnb/javascript/tree/master/react 42 | [Docco]: https://jashkenas.github.io/docco/ 43 | 44 | ### Objective-C 45 | 46 | * Space after `@property` declarations 47 | * Brackets on *every* `if`, on the *same* line 48 | * `- method`, `@interface`, and `@implementation` brackets on the following line 49 | * *Try* to keep it around 80 characters line length (sometimes it's just not possible...) 50 | * `*` operator goes with the variable name (e.g. `NSObject *variableName;`) 51 | * [Objective-C Style Guide] 52 | 53 | [Objective-C Style Guide]: https://github.com/raywenderlich/objective-c-style-guide 54 | 55 | ### Java 56 | 57 | * [Java Style Guide] 58 | 59 | [Java Style Guide]: https://github.com/raywenderlich/java-style-guide 60 | 61 | ## License 62 | 63 | By contributing to [React Native Material Kit][RNMK], you agree that your contributions will be licensed under its [MIT license]. 64 | 65 | [RNMK]: https://github.com/xinthink/react-native-material-kit 66 | [MIT license]: https://raw.githubusercontent.com/xinthink/react-native-material-kit/master/LICENSE.md 67 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Yingxin Wu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /__tests__/lib-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | test('adds 1 + 2 to equal 3', () => { 6 | expect(1 + 2).toBe(3); 7 | }); 8 | -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | # Gradle 2 | # 3 | build 4 | .gradle 5 | 6 | # WebStorm 7 | # 8 | .idea 9 | *.iml 10 | 11 | local.properties 12 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | 2 | buildscript { 3 | repositories { 4 | google() 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:3.4.1' 9 | } 10 | } 11 | 12 | apply plugin: 'com.android.library' 13 | 14 | android { 15 | compileSdkVersion project.hasProperty('compileSdkVersion') ? project.compileSdkVersion : 28 16 | if (project.hasProperty('buildToolsVersion')) buildToolsVersion project.buildToolsVersion 17 | 18 | defaultConfig { 19 | minSdkVersion 16 20 | } 21 | compileOptions { 22 | sourceCompatibility JavaVersion.VERSION_1_7 23 | targetCompatibility JavaVersion.VERSION_1_7 24 | } 25 | } 26 | 27 | repositories { 28 | mavenLocal() 29 | google() 30 | jcenter() 31 | mavenCentral() 32 | } 33 | 34 | dependencies { 35 | //noinspection GradleDynamicVersion 36 | compileOnly 'com.facebook.react:react-native:+' 37 | implementation 'androidx.annotation:annotation:1.1.0' 38 | } 39 | -------------------------------------------------------------------------------- /android/src/androidTest/java/com/github/xinthink/rnmk/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/MKSpinnerManager.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk; 2 | 3 | import com.facebook.react.bridge.ReadableArray; 4 | import com.facebook.react.uimanager.SimpleViewManager; 5 | import com.facebook.react.uimanager.ThemedReactContext; 6 | import com.facebook.react.uimanager.annotations.ReactProp; 7 | import com.github.xinthink.rnmk.widget.MKSpinner; 8 | 9 | import javax.annotation.Nullable; 10 | 11 | /** 12 | * MKSpinner View Manager 13 | * 14 | * Created by ywu on 15/9/23. 15 | */ 16 | public class MKSpinnerManager extends SimpleViewManager { 17 | 18 | @Override 19 | public String getName() { 20 | return "MKSpinner"; 21 | } 22 | 23 | @Override 24 | public MKSpinner createViewInstance(ThemedReactContext context) { 25 | return new MKSpinner(context); 26 | } 27 | 28 | /** 29 | * Color scheme of the progress stroke 30 | */ 31 | @ReactProp(name = "strokeColors") 32 | public void setStrokeColors(MKSpinner view, @Nullable ReadableArray colors) { 33 | if (colors != null && colors.size() > 0) { 34 | int[] colorScheme = new int[colors.size()]; 35 | 36 | for (int i = 0; i < colors.size(); i++) { 37 | if (!colors.isNull(i)) { 38 | colorScheme[i] = colors.getInt(i); 39 | } 40 | } 41 | 42 | view.setStrokeColors(colorScheme); 43 | } 44 | } 45 | 46 | /** 47 | * Width of the progress stroke 48 | */ 49 | @ReactProp(name = "strokeWidth", defaultFloat = 0) 50 | public void setStrokeWidth(MKSpinner view, float strokeWidthDp) { 51 | view.setStrokeWidthInDip(strokeWidthDp); 52 | } 53 | 54 | /** 55 | * Duration of the spinner animation, in milliseconds 56 | */ 57 | @ReactProp(name = "spinnerAniDuration", defaultInt = 0) 58 | public void setSpinnerAniDuration(MKSpinner view, int duration) { 59 | view.setSpinnerAniDuration(duration); 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/MKTouchableManager.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk; 2 | 3 | import android.view.MotionEvent; 4 | import android.view.View; 5 | 6 | import com.facebook.react.bridge.Arguments; 7 | import com.facebook.react.bridge.WritableMap; 8 | import com.facebook.react.uimanager.ThemedReactContext; 9 | import com.facebook.react.uimanager.events.RCTEventEmitter; 10 | import com.facebook.react.views.view.ReactViewManager; 11 | import com.github.xinthink.rnmk.widget.MKTouchable; 12 | 13 | /** 14 | * MKTouchable View Manager, forwarding touch events to JS module 15 | * 16 | * Created by ywu on 15/9/23. 17 | */ 18 | public class MKTouchableManager extends ReactViewManager { 19 | 20 | @Override 21 | public String getName() { 22 | return "MKTouchable"; 23 | } 24 | 25 | @Override 26 | public MKTouchable createViewInstance(ThemedReactContext context) { 27 | final RCTEventEmitter emitter = context.getJSModule(RCTEventEmitter.class); 28 | return new MKTouchable(context, new View.OnTouchListener() { 29 | private int prevAction; 30 | private long prevEventTime; 31 | 32 | @Override 33 | public boolean onTouch(View view, MotionEvent event) { 34 | String type = isInBounds(view, event) ? getEventType(event) : "TOUCH_CANCEL"; 35 | 36 | if (type != null && isValid(event)) { 37 | WritableMap body = Arguments.createMap(); 38 | body.putString("type", type); 39 | body.putDouble("x", event.getX()); 40 | body.putDouble("y", event.getY()); 41 | 42 | emitter.receiveEvent(view.getId(), "topChange", body); 43 | } 44 | return true; 45 | } 46 | 47 | private String getEventType(MotionEvent evt) { 48 | String type = null; 49 | switch (evt.getAction()) { 50 | case MotionEvent.ACTION_DOWN: 51 | type = "TOUCH_DOWN"; 52 | break; 53 | case MotionEvent.ACTION_UP: 54 | type = "TOUCH_UP"; 55 | break; 56 | case MotionEvent.ACTION_CANCEL: 57 | type = "TOUCH_CANCEL"; 58 | break; 59 | case MotionEvent.ACTION_MOVE: 60 | type = "TOUCH_MOVE"; 61 | break; 62 | } 63 | return type; 64 | } 65 | 66 | private boolean isInBounds(View v, MotionEvent evt) { 67 | float x = evt.getX(), y = evt.getY(); 68 | return x >= 0 && x <= v.getWidth() && y >= 0 && y <= v.getHeight(); 69 | } 70 | 71 | private boolean isValid(MotionEvent evt) { 72 | final long now = System.currentTimeMillis(); 73 | boolean valid; 74 | if (prevEventTime == 0) { 75 | valid = true; 76 | } else { 77 | long elapsed = now - prevEventTime; 78 | valid = evt.getAction() != prevAction || elapsed > 80; 79 | } 80 | 81 | if (valid) { 82 | prevAction = evt.getAction(); 83 | prevEventTime = now; 84 | } 85 | 86 | return valid; 87 | } 88 | }); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/ReactMaterialKitPackage.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.Arrays; 10 | import java.util.Collections; 11 | import java.util.List; 12 | 13 | /** 14 | * RNMK Package declaration. 15 | * 16 | * Created by ywu on 15/9/23. 17 | */ 18 | public class ReactMaterialKitPackage implements ReactPackage { 19 | 20 | @Override 21 | public List createNativeModules(ReactApplicationContext reactApplicationContext) { 22 | return Collections.emptyList(); 23 | } 24 | 25 | // Deprecated RN 0.47 26 | public List> createJSModules() { 27 | return Collections.emptyList(); 28 | } 29 | 30 | @Override 31 | public List createViewManagers(ReactApplicationContext reactApplicationContext) { 32 | return Arrays.asList( 33 | new MKTouchableManager(), 34 | new MKSpinnerManager(), 35 | new TickViewManager() 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/TickViewManager.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk; 2 | 3 | import com.facebook.react.uimanager.annotations.ReactProp; 4 | import com.facebook.react.uimanager.SimpleViewManager; 5 | import com.facebook.react.uimanager.ThemedReactContext; 6 | import com.github.xinthink.rnmk.widget.TickView; 7 | 8 | /** 9 | * TickView view manger, for internal use only 10 | * Created by ywu on 15/12/13. 11 | */ 12 | public class TickViewManager extends SimpleViewManager { 13 | @Override 14 | public String getName() { 15 | return "TickView"; 16 | } 17 | 18 | @Override 19 | protected TickView createViewInstance(ThemedReactContext context) { 20 | return new TickView(context); 21 | } 22 | 23 | /** 24 | * Background color of the tick 25 | */ 26 | @ReactProp(name = "fillColor") 27 | public void setFillColor(TickView view, int color) { 28 | view.setFillColor(color); 29 | } 30 | 31 | /** 32 | * Insets of the tick 33 | */ 34 | @ReactProp(name = "inset") 35 | public void setInset(TickView view, float dim) { 36 | view.setInsetInDip(dim); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/utils/Utils.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk.utils; 2 | 3 | import android.content.Context; 4 | import android.os.Build; 5 | 6 | /** 7 | * Utilities. 8 | * 9 | * Created by ywu on 15/10/6. 10 | */ 11 | public final class Utils { 12 | 13 | private Utils() { 14 | 15 | } 16 | 17 | @SuppressWarnings("deprecation") 18 | public static int getColor(Context context, int resId) { 19 | int color; 20 | if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { 21 | color = context.getResources().getColor(resId, context.getTheme()); 22 | } else { 23 | color = context.getResources().getColor(resId); 24 | } 25 | 26 | return color; 27 | } 28 | 29 | public static int toPixels(Context context, float dps) { 30 | float scale = context.getResources().getDisplayMetrics().density; 31 | return (int) (dps * scale + 0.5f); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/widget/MKTouchable.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk.widget; 2 | 3 | import android.annotation.SuppressLint; 4 | import android.content.Context; 5 | import android.util.Log; 6 | import android.view.MotionEvent; 7 | 8 | import com.facebook.react.views.view.ReactViewGroup; 9 | 10 | import javax.annotation.Nonnull; 11 | 12 | /** 13 | * Touchable view, for listening to touch events, but not intercept them. 14 | * 15 | * Created by ywu on 15/9/26. 16 | */ 17 | @SuppressLint("ViewConstructor") 18 | public class MKTouchable extends ReactViewGroup { 19 | @Nonnull 20 | private final OnTouchListener onTouchListener; 21 | 22 | public MKTouchable(Context context, 23 | @Nonnull OnTouchListener onTouchListener) { 24 | super(context); 25 | this.onTouchListener = onTouchListener; 26 | } 27 | 28 | @Override 29 | public boolean onTouchEvent(MotionEvent ev) { 30 | return this.onTouchListener.onTouch(this, ev); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /android/src/main/java/com/github/xinthink/rnmk/widget/TickView.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk.widget; 2 | 3 | import android.content.Context; 4 | import android.content.res.Resources; 5 | import android.content.res.TypedArray; 6 | import android.graphics.Canvas; 7 | import android.graphics.Paint; 8 | import android.graphics.Path; 9 | import android.graphics.RectF; 10 | import android.util.AttributeSet; 11 | import android.view.View; 12 | 13 | import androidx.annotation.NonNull; 14 | 15 | import com.facebook.react.uimanager.ReactCompoundView; 16 | import com.github.xinthink.rnmk.R; 17 | import com.github.xinthink.rnmk.utils.Utils; 18 | 19 | /** 20 | * The 'tick' used in `Checkbox`, for internal use only 21 | *

22 | * Created by ywu on 15/12/6. 23 | */ 24 | public class TickView extends View implements ReactCompoundView { 25 | 26 | private int fillColor; 27 | private int inset; 28 | 29 | private Paint bgPaint; 30 | private Path tickPath, tickBoundsPath; 31 | private RectF rect; 32 | 33 | public TickView(Context context) { 34 | this(context, null, 0); 35 | } 36 | 37 | public TickView(Context context, AttributeSet attrs) { 38 | this(context, attrs, 0); 39 | } 40 | 41 | public TickView(Context context, AttributeSet attrs, int defStyleAttr) { 42 | super(context, attrs, defStyleAttr); 43 | initDefaults(); 44 | init(context, attrs); 45 | initPaints(); 46 | } 47 | 48 | private void initDefaults() { 49 | Resources res = getResources(); 50 | fillColor = res.getColor(R.color.mdl_indigo); 51 | inset = res.getDimensionPixelOffset(R.dimen.mk_tick_inset); 52 | } 53 | 54 | private void init(Context context, AttributeSet attrs) { 55 | if (attrs == null) { 56 | return; 57 | } 58 | 59 | TypedArray a = context.getTheme().obtainStyledAttributes( 60 | attrs, 61 | R.styleable.TickView, 62 | 0, 0); 63 | 64 | try { 65 | fillColor = a.getColor(R.styleable.TickView_mk_tickFillColor, fillColor); 66 | inset = a.getDimensionPixelOffset(R.styleable.TickView_mk_tickInset, inset); 67 | } finally { 68 | a.recycle(); 69 | } 70 | } 71 | 72 | @Override 73 | public int reactTagForTouch(float touchX, float touchY) { 74 | return getId(); 75 | } 76 | 77 | @Override 78 | protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 79 | int w = MeasureSpec.getSize(widthMeasureSpec); 80 | int h = MeasureSpec.getSize(heightMeasureSpec); 81 | w = h = Math.min(w, h); // make it a square 82 | setMeasuredDimension(w, h); 83 | 84 | calcBounds(w, h); // update bounds 85 | } 86 | 87 | @Override 88 | protected void onSizeChanged(int w, int h, int oldw, int oldh) { 89 | calcBounds(w, h); 90 | } 91 | 92 | private void calcBounds(int w, int h) { 93 | if (rect == null || rect.right != w || rect.bottom != h) { 94 | rect = new RectF(0, 0, w, h); 95 | calcTickPath(rect); 96 | } 97 | } 98 | 99 | private void calcTickPath(@NonNull RectF bounds) { 100 | final float left = bounds.left; 101 | final float right = bounds.right; 102 | final float top = bounds.top; 103 | final float bottom = bounds.bottom; 104 | 105 | float extraBottomInset = 2; // #117 Leaving 2px gap from bottom 106 | float width = right - left; 107 | float baseSize = width / 3f; // choose a box at the left bottom corner which defines the width of the tick 108 | float tickBottomY = bottom - this.inset - extraBottomInset; 109 | float tickWidth = (float) ((baseSize - this.inset - extraBottomInset) / Math.sqrt(2)); 110 | float a = (float) (tickWidth / Math.sqrt(2)); 111 | float x0 = left + inset; 112 | float y0 = tickBottomY - (baseSize - inset); 113 | 114 | tickPath = new Path(); 115 | tickPath.setFillType(Path.FillType.INVERSE_EVEN_ODD); 116 | tickPath.moveTo(x0, y0); 117 | tickPath.lineTo(x0 + a, y0 - a); 118 | tickPath.lineTo(baseSize, bottom - baseSize); 119 | tickPath.lineTo(right - a - inset, top + a + inset); 120 | tickPath.lineTo(right - inset, top + 2 * a + inset); 121 | tickPath.lineTo(baseSize, tickBottomY); 122 | tickPath.close(); 123 | 124 | // the remain parts outside the tick 125 | tickBoundsPath = new Path(); 126 | tickBoundsPath.addRect(0, 0, inset, bottom, Path.Direction.CW); 127 | tickBoundsPath.addRect(right - inset, 0, right, bottom, Path.Direction.CW); 128 | tickBoundsPath.addRect(inset, 0, right - inset, top + a + inset, Path.Direction.CW); 129 | tickBoundsPath.addRect(inset, tickBottomY, right - inset, bottom, Path.Direction.CW); 130 | } 131 | 132 | private void initPaints() { 133 | if (bgPaint == null) { 134 | bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 135 | bgPaint.setColor(fillColor); 136 | bgPaint.setStyle(Paint.Style.FILL); 137 | } 138 | } 139 | 140 | public void setFillColor(int fillColor) { 141 | this.fillColor = fillColor; 142 | this.bgPaint = null; 143 | initPaints(); 144 | invalidate(); 145 | } 146 | 147 | public void setInset(int inset) { 148 | this.inset = inset; 149 | if (rect != null) { 150 | calcTickPath(rect); 151 | invalidate(); 152 | } 153 | } 154 | 155 | public void setInsetInDip(float insetDp) { 156 | setInset(Utils.toPixels(getContext(), insetDp)); 157 | } 158 | 159 | @Override 160 | protected void onDraw(Canvas canvas) { 161 | super.onDraw(canvas); 162 | canvas.drawPath(tickPath, bgPaint); 163 | canvas.drawPath(tickBoundsPath, bgPaint); 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /android/src/main/res/values/attributes.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /android/src/main/res/values/constants.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #3F51B5 5 | 6 | #42a5f5 7 | #f44336 8 | #fdd835 9 | #4caf50 10 | 11 | 12 | 28dp 13 | 28dp 14 | 1333 15 | 3dp 16 | 17 | @color/mdl_palette_blue_400 18 | @color/mdl_palette_red_500 19 | @color/mdl_palette_yellow_600 20 | @color/mdl_palette_green_500 21 | 22 | 23 | 24 | 1dp 25 | 26 | -------------------------------------------------------------------------------- /example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /example/.eslintignore: -------------------------------------------------------------------------------- 1 | .* 2 | lib 3 | node_modules 4 | *.config.js 5 | -------------------------------------------------------------------------------- /example/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: '@react-native-community', 4 | parser: '@typescript-eslint/parser', 5 | plugins: ['@typescript-eslint'], 6 | rules: { 7 | 'prettier/prettier': ['error', { 8 | bracketSpacing: true, 9 | jsxBracketSameLine: true, 10 | singleQuote: true, 11 | trailingComma: 'all', // 'es5' 12 | printWidth: 120, 13 | }], 14 | semi: 'off', 15 | 'react-native/no-inline-styles': 'off', 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /example/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # WebStorm/Android/IntelliJ 26 | # 27 | *.iml 28 | .idea/ 29 | build/ 30 | .gradle 31 | local.properties 32 | 33 | # VS Code 34 | .vscode/ 35 | 36 | # node.js 37 | # 38 | node_modules/ 39 | npm-debug.log 40 | yarn-error.log 41 | 42 | # BUCK 43 | buck-out/ 44 | \.buckd/ 45 | *.keystore 46 | 47 | # fastlane 48 | # 49 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 50 | # screenshots whenever they are needed. 51 | # For more information about the recommended setup visit: 52 | # https://docs.fastlane.tools/best-practices/source-control/ 53 | 54 | */fastlane/report.xml 55 | */fastlane/Preview.html 56 | */fastlane/screenshots 57 | 58 | # Bundle artifact 59 | *.jsbundle 60 | 61 | # CocoaPods 62 | /ios/Pods/ 63 | 64 | # Project 65 | bak/ 66 | -------------------------------------------------------------------------------- /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Example APP 2 | 3 | ## Build & run the example app 4 | 5 | Checkout the [repo] first. 6 | 7 | Build & launch: 8 | 9 | ```sh 10 | yarn # install dependencies 11 | 12 | cd example 13 | yarn # install dependencies of the example app 14 | (cd iOS && pod install) # prepare iOS xcode workspace 15 | yarn start # start the react-native packager 16 | yarn ios # or yarn android, launch the example app 17 | ``` 18 | 19 | Available npm scripts: 20 | - `yarn start` to start the dev server 21 | - `yarn ios` build your app and starts it on iOS simulator 22 | - `yarn iosx` build your app and starts it on iPhone X simulator 23 | - `yarn android` build your app and starts it on a connected Android emulator or device 24 | - or run any `react-native` commands: `yarn cli [options] [command]` 25 | 26 | ## Resources 27 | 28 | - :point_right: [Getting Started Guide] 29 | - :point_right: [API Docs] 30 | 31 | [repo]: https://github.com/xinthink/react-native-material-kit 32 | [Getting Started Guide]: https://github.com/xinthink/react-native-material-kit#getting-started 33 | [API Docs]: https://rnmk.xinthink.com/api/react-native-material-kit/ 34 | -------------------------------------------------------------------------------- /example/android/.gitignore: -------------------------------------------------------------------------------- 1 | *.keystore 2 | captures 3 | -------------------------------------------------------------------------------- /example/android/app/_BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.rnmk_demo", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.rnmk_demo", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /example/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /example/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /example/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/github/xinthink/rnmk/demo/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk.demo; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. This is used to schedule 9 | * rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "example"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/github/xinthink/rnmk/demo/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.github.xinthink.rnmk.demo; 2 | 3 | import android.app.Application; 4 | import android.content.Context; 5 | import com.facebook.react.PackageList; 6 | import com.facebook.react.ReactApplication; 7 | import com.facebook.react.ReactNativeHost; 8 | import com.facebook.react.ReactPackage; 9 | import com.facebook.soloader.SoLoader; 10 | import com.github.xinthink.rnmk.ReactMaterialKitPackage; 11 | 12 | import java.lang.reflect.InvocationTargetException; 13 | import java.util.List; 14 | 15 | public class MainApplication extends Application implements ReactApplication { 16 | 17 | private final ReactNativeHost mReactNativeHost = 18 | new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | @SuppressWarnings("UnnecessaryLocalVariable") 27 | List packages = new PackageList(this).getPackages(); 28 | // Packages that cannot be autolinked yet can be added manually here, for example: 29 | // packages.add(new MyReactNativePackage()); 30 | packages.add(new ReactMaterialKitPackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | @Override 41 | public ReactNativeHost getReactNativeHost() { 42 | return mReactNativeHost; 43 | } 44 | 45 | @Override 46 | public void onCreate() { 47 | super.onCreate(); 48 | SoLoader.init(this, /* native exopackage */ false); 49 | initializeFlipper(this); // Remove this line if you don't want Flipper enabled 50 | } 51 | 52 | /** 53 | * Loads Flipper in React Native templates. 54 | * 55 | * @param context 56 | */ 57 | private static void initializeFlipper(Context context) { 58 | if (BuildConfig.DEBUG) { 59 | try { 60 | /* 61 | We use reflection here to pick up the class that initializes Flipper, 62 | since Flipper library is not available in release mode 63 | */ 64 | Class aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper"); 65 | aClass.getMethod("initializeFlipper", Context.class).invoke(null, context); 66 | } catch (ClassNotFoundException e) { 67 | e.printStackTrace(); 68 | } catch (NoSuchMethodException e) { 69 | e.printStackTrace(); 70 | } catch (IllegalAccessException e) { 71 | e.printStackTrace(); 72 | } catch (InvocationTargetException e) { 73 | e.printStackTrace(); 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | RNMK Demo 3 | 4 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /example/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | // buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | } 10 | repositories { 11 | google() 12 | jcenter() 13 | } 14 | dependencies { 15 | classpath("com.android.tools.build:gradle:3.5.3") 16 | 17 | // NOTE: Do not place your application dependencies here; they belong 18 | // in the individual module build.gradle files 19 | } 20 | } 21 | 22 | allprojects { 23 | repositories { 24 | mavenLocal() 25 | maven { 26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 27 | url("$rootDir/../node_modules/react-native/android") 28 | } 29 | maven { 30 | // Android JSC is installed from npm 31 | url("$rootDir/../node_modules/jsc-android/dist") 32 | } 33 | 34 | google() 35 | jcenter() 36 | maven { url 'https://jitpack.io' } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.5.1-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # 4 | # Copyright 2015 the original author or authors. 5 | # 6 | # Licensed under the Apache License, Version 2.0 (the "License"); 7 | # you may not use this file except in compliance with the License. 8 | # You may obtain a copy of the License at 9 | # 10 | # http://www.apache.org/licenses/LICENSE-2.0 11 | # 12 | # Unless required by applicable law or agreed to in writing, software 13 | # distributed under the License is distributed on an "AS IS" BASIS, 14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 | # See the License for the specific language governing permissions and 16 | # limitations under the License. 17 | # 18 | 19 | ############################################################################## 20 | ## 21 | ## Gradle start up script for UN*X 22 | ## 23 | ############################################################################## 24 | 25 | # Attempt to set APP_HOME 26 | # Resolve links: $0 may be a link 27 | PRG="$0" 28 | # Need this for relative symlinks. 29 | while [ -h "$PRG" ] ; do 30 | ls=`ls -ld "$PRG"` 31 | link=`expr "$ls" : '.*-> \(.*\)$'` 32 | if expr "$link" : '/.*' > /dev/null; then 33 | PRG="$link" 34 | else 35 | PRG=`dirname "$PRG"`"/$link" 36 | fi 37 | done 38 | SAVED="`pwd`" 39 | cd "`dirname \"$PRG\"`/" >/dev/null 40 | APP_HOME="`pwd -P`" 41 | cd "$SAVED" >/dev/null 42 | 43 | APP_NAME="Gradle" 44 | APP_BASE_NAME=`basename "$0"` 45 | 46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' 48 | 49 | # Use the maximum available, or set MAX_FD != -1 to use that value. 50 | MAX_FD="maximum" 51 | 52 | warn () { 53 | echo "$*" 54 | } 55 | 56 | die () { 57 | echo 58 | echo "$*" 59 | echo 60 | exit 1 61 | } 62 | 63 | # OS specific support (must be 'true' or 'false'). 64 | cygwin=false 65 | msys=false 66 | darwin=false 67 | nonstop=false 68 | case "`uname`" in 69 | CYGWIN* ) 70 | cygwin=true 71 | ;; 72 | Darwin* ) 73 | darwin=true 74 | ;; 75 | MINGW* ) 76 | msys=true 77 | ;; 78 | NONSTOP* ) 79 | nonstop=true 80 | ;; 81 | esac 82 | 83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 84 | 85 | # Determine the Java command to use to start the JVM. 86 | if [ -n "$JAVA_HOME" ] ; then 87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 88 | # IBM's JDK on AIX uses strange locations for the executables 89 | JAVACMD="$JAVA_HOME/jre/sh/java" 90 | else 91 | JAVACMD="$JAVA_HOME/bin/java" 92 | fi 93 | if [ ! -x "$JAVACMD" ] ; then 94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 95 | 96 | Please set the JAVA_HOME variable in your environment to match the 97 | location of your Java installation." 98 | fi 99 | else 100 | JAVACMD="java" 101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 102 | 103 | Please set the JAVA_HOME variable in your environment to match the 104 | location of your Java installation." 105 | fi 106 | 107 | # Increase the maximum file descriptors if we can. 108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then 109 | MAX_FD_LIMIT=`ulimit -H -n` 110 | if [ $? -eq 0 ] ; then 111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 112 | MAX_FD="$MAX_FD_LIMIT" 113 | fi 114 | ulimit -n $MAX_FD 115 | if [ $? -ne 0 ] ; then 116 | warn "Could not set maximum file descriptor limit: $MAX_FD" 117 | fi 118 | else 119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 120 | fi 121 | fi 122 | 123 | # For Darwin, add options to specify how the application appears in the dock 124 | if $darwin; then 125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 126 | fi 127 | 128 | # For Cygwin, switch paths to Windows format before running java 129 | if $cygwin ; then 130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 132 | JAVACMD=`cygpath --unix "$JAVACMD"` 133 | 134 | # We build the pattern for arguments to be converted via cygpath 135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 136 | SEP="" 137 | for dir in $ROOTDIRSRAW ; do 138 | ROOTDIRS="$ROOTDIRS$SEP$dir" 139 | SEP="|" 140 | done 141 | OURCYGPATTERN="(^($ROOTDIRS))" 142 | # Add a user-defined pattern to the cygpath arguments 143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 145 | fi 146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 147 | i=0 148 | for arg in "$@" ; do 149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 151 | 152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 154 | else 155 | eval `echo args$i`="\"$arg\"" 156 | fi 157 | i=$((i+1)) 158 | done 159 | case $i in 160 | (0) set -- ;; 161 | (1) set -- "$args0" ;; 162 | (2) set -- "$args0" "$args1" ;; 163 | (3) set -- "$args0" "$args1" "$args2" ;; 164 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 165 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 166 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 167 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 168 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 169 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 170 | esac 171 | fi 172 | 173 | # Escape application args 174 | save () { 175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done 176 | echo " " 177 | } 178 | APP_ARGS=$(save "$@") 179 | 180 | # Collect all arguments for the java command, following the shell quoting and substitution rules 181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS" 182 | 183 | # by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong 184 | if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then 185 | cd "$(dirname "$0")" 186 | fi 187 | 188 | exec "$JAVACMD" "$@" 189 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @rem 2 | @rem Copyright 2015 the original author or authors. 3 | @rem 4 | @rem Licensed under the Apache License, Version 2.0 (the "License"); 5 | @rem you may not use this file except in compliance with the License. 6 | @rem You may obtain a copy of the License at 7 | @rem 8 | @rem http://www.apache.org/licenses/LICENSE-2.0 9 | @rem 10 | @rem Unless required by applicable law or agreed to in writing, software 11 | @rem distributed under the License is distributed on an "AS IS" BASIS, 12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | @rem See the License for the specific language governing permissions and 14 | @rem limitations under the License. 15 | @rem 16 | 17 | @if "%DEBUG%" == "" @echo off 18 | @rem ########################################################################## 19 | @rem 20 | @rem Gradle startup script for Windows 21 | @rem 22 | @rem ########################################################################## 23 | 24 | @rem Set local scope for the variables with windows NT shell 25 | if "%OS%"=="Windows_NT" setlocal 26 | 27 | set DIRNAME=%~dp0 28 | if "%DIRNAME%" == "" set DIRNAME=. 29 | set APP_BASE_NAME=%~n0 30 | set APP_HOME=%DIRNAME% 31 | 32 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 33 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m" 34 | 35 | @rem Find java.exe 36 | if defined JAVA_HOME goto findJavaFromJavaHome 37 | 38 | set JAVA_EXE=java.exe 39 | %JAVA_EXE% -version >NUL 2>&1 40 | if "%ERRORLEVEL%" == "0" goto init 41 | 42 | echo. 43 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 44 | echo. 45 | echo Please set the JAVA_HOME variable in your environment to match the 46 | echo location of your Java installation. 47 | 48 | goto fail 49 | 50 | :findJavaFromJavaHome 51 | set JAVA_HOME=%JAVA_HOME:"=% 52 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 53 | 54 | if exist "%JAVA_EXE%" goto init 55 | 56 | echo. 57 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 58 | echo. 59 | echo Please set the JAVA_HOME variable in your environment to match the 60 | echo location of your Java installation. 61 | 62 | goto fail 63 | 64 | :init 65 | @rem Get command-line arguments, handling Windows variants 66 | 67 | if not "%OS%" == "Windows_NT" goto win9xME_args 68 | 69 | :win9xME_args 70 | @rem Slurp the command line arguments. 71 | set CMD_LINE_ARGS= 72 | set _SKIP=2 73 | 74 | :win9xME_args_slurp 75 | if "x%~1" == "x" goto execute 76 | 77 | set CMD_LINE_ARGS=%* 78 | 79 | :execute 80 | @rem Setup the command line 81 | 82 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 83 | 84 | @rem Execute Gradle 85 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 86 | 87 | :end 88 | @rem End local scope for the variables with windows NT shell 89 | if "%ERRORLEVEL%"=="0" goto mainEnd 90 | 91 | :fail 92 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 93 | rem the _cmd.exe /c_ return code! 94 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 95 | exit /b 1 96 | 97 | :mainEnd 98 | if "%OS%"=="Windows_NT" endlocal 99 | 100 | :omega 101 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | // resolve symbolic links if need 2 | static def resolve(File dir) { 3 | dir.toPath().toAbsolutePath().toFile() 4 | } 5 | 6 | rootProject.name = 'example' 7 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 8 | include ':app' 9 | 10 | include ':RNMaterialKit' 11 | project(':RNMaterialKit').projectDir = file('../../android') 12 | -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "displayName": "RNMK Demo" 4 | } 5 | -------------------------------------------------------------------------------- /example/app/buttons.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ywu on 15/7/16. 3 | */ 4 | import React from 'react'; 5 | import { StyleSheet, Text, View, ScrollView, Image } from 'react-native'; 6 | 7 | import { 8 | ButtonStyles, 9 | ColoredRaisedButton, 10 | RaisedButton, 11 | FlatButton, 12 | Fab, 13 | ColoredFab, 14 | AccentFab, 15 | // MKColor, 16 | // setTheme, 17 | getTheme, 18 | } from 'react-native-material-kit'; 19 | 20 | import appStyles from './styles'; 21 | 22 | const { buttonText, buttonTextAccent, buttonTextPrimary, coloredButtonText } = ButtonStyles; 23 | 24 | // customize the material design theme 25 | // setTheme({ 26 | // primaryColor: MKColor.Teal, 27 | // accentColor: MKColor.Purple, 28 | // }); 29 | 30 | const styles = Object.assign( 31 | {}, 32 | appStyles, 33 | StyleSheet.create({ 34 | buttonText: { 35 | fontSize: 14, 36 | fontWeight: 'bold', 37 | color: 'white', 38 | }, 39 | fab: { 40 | // width: 200, 41 | // height: 200, 42 | // borderRadius: 100, 43 | }, 44 | }), 45 | ); 46 | 47 | const Buttons = () => ( 48 | 49 | 50 | 51 | 52 | BUTTON 53 | 54 | Raised button 55 | 56 | 57 | 58 | BUTTON 59 | 60 | Colored 61 | 62 | 63 | {/* Or use AccentRaisedButton */} 64 | 68 | BUTTON 69 | 70 | Accent colored 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | Plain FAB 79 | 80 | 81 | 82 | 83 | 84 | Colored 85 | 86 | 87 | 88 | 89 | 90 | Accent colored 91 | 92 | 93 | 94 | 95 | 96 | BUTTON 97 | 98 | Flat button 99 | 100 | 101 | 102 | BUTTON 103 | 104 | Colored 105 | 106 | 107 | {/* custom ripple color */} 108 | 109 | BUTTON 110 | 111 | Accent colored 112 | 113 | 114 | 115 | ); 116 | 117 | export default Buttons; 118 | -------------------------------------------------------------------------------- /example/app/cards.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Text, View, ScrollView, Image } from 'react-native'; 3 | 4 | import { IconToggle, getTheme, CheckedListener } from 'react-native-material-kit'; 5 | 6 | import styles from './styles'; 7 | 8 | const theme = getTheme(); 9 | 10 | const base64Icon = 'http://www.getmdl.io/assets/demos/welcome_card.jpg'; 11 | 12 | const onIconChecked: CheckedListener = ({ checked }) => console.log(`the IconToggle is ${checked ? 'ON' : 'OFF'}`); 13 | const onIconClicked = () => console.log('-- clicked --'); 14 | 15 | const action = My action; 16 | const menu = ( 17 | 18 | Off 19 | 23 | On 24 | 25 | 26 | ); 27 | 28 | const Cards = () => ( 29 | 30 | {/* Here the magic happens*/} 31 | 32 | 33 | Welcome 34 | 38 | 39 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend 40 | lacinia... 41 | 42 | 43 | {menu} 44 | {action} 45 | 46 | 47 | ); 48 | 49 | export default Cards; 50 | -------------------------------------------------------------------------------- /example/app/img/plus_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/app/img/plus_dark.png -------------------------------------------------------------------------------- /example/app/img/plus_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xinthink/react-native-material-kit/3a1c7a7ea25d14e4e03ee2a5dfc2463c39240589/example/app/img/plus_white.png -------------------------------------------------------------------------------- /example/app/index.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | */ 5 | import React from 'react'; 6 | import { StyleSheet, Text, ScrollView, TouchableOpacity, Platform } from 'react-native'; 7 | import { NavigationContainer } from '@react-navigation/native'; 8 | import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack'; 9 | 10 | // import { setTheme, MKColor } from 'react-native-material-kit'; 11 | 12 | // customize the material design theme 13 | // setTheme({ 14 | // primaryColor: MKColor.Purple, 15 | // primaryColorRGB: MKColor.RGBPurple, 16 | // accentColor: MKColor.Amber, 17 | // }); 18 | 19 | import Buttons from './buttons'; 20 | import TextFields from './textfields'; 21 | import Toggles from './toggles'; 22 | import Progress from './progress'; 23 | import Sliders from './sliders'; 24 | import Cards from './cards'; 25 | 26 | type RootStackParamList = { 27 | Home: undefined; 28 | Buttons: undefined; 29 | Cards: undefined; 30 | Progress: undefined; 31 | Sliders: undefined; 32 | Textfields: undefined; 33 | Toggles: undefined; 34 | }; 35 | 36 | const Stack = createStackNavigator(); 37 | 38 | const App = () => ( 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | 52 | interface ScreenProps { 53 | navigation: StackNavigationProp; 54 | } 55 | 56 | function Home(props: ScreenProps) { 57 | const navigate = (route: keyof RootStackParamList) => props.navigation.navigate(route); 58 | return ( 59 | 60 | navigate('Buttons')}> 61 | Buttons 62 | 63 | navigate('Cards')}> 64 | Cards 65 | 66 | navigate('Progress')}> 67 | Loading 68 | 69 | navigate('Sliders')}> 70 | Sliders 71 | 72 | navigate('Textfields')}> 73 | Text Fields 74 | 75 | navigate('Toggles')}> 76 | Toggles 77 | 78 | 79 | ); 80 | } 81 | 82 | const styles = StyleSheet.create({ 83 | list: { 84 | backgroundColor: '#F5FCFF', 85 | paddingTop: Platform.OS === 'ios' ? 20 : 0, 86 | }, 87 | container: { 88 | flex: 1, 89 | alignItems: 'center', 90 | }, 91 | welcome: { 92 | fontSize: 20, 93 | textAlign: 'center', 94 | margin: 10, 95 | }, 96 | instructions: { 97 | textAlign: 'center', 98 | color: '#333333', 99 | marginTop: 20, 100 | marginBottom: 0, 101 | }, 102 | pushLabel: { 103 | padding: 10, 104 | color: '#2196F3', 105 | }, 106 | }); 107 | 108 | export default App; 109 | -------------------------------------------------------------------------------- /example/app/progress.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ywu on 15/8/13. 3 | */ 4 | import React, { createRef } from 'react'; 5 | import { StyleSheet, Text, View, ScrollView } from 'react-native'; 6 | 7 | import { Progress, Spinner } from 'react-native-material-kit'; 8 | import appStyles from './styles'; 9 | 10 | const styles = Object.assign( 11 | {}, 12 | appStyles, 13 | StyleSheet.create({ 14 | progress: { 15 | width: 150, 16 | //height: 2, 17 | }, 18 | spinner: { 19 | // width: 22, 20 | // height: 22, 21 | }, 22 | }), 23 | ); 24 | 25 | export default class extends React.Component { 26 | _progRef = createRef(); 27 | _progWithBufferRef = createRef(); 28 | 29 | constructor(props: any) { 30 | super(props); 31 | } 32 | 33 | componentDidMount() { 34 | setTimeout(() => { 35 | const progBarWithBuffer = this._progWithBufferRef.current; 36 | if (progBarWithBuffer) { 37 | progBarWithBuffer.buffer = 0.8; 38 | } 39 | }, 1000); 40 | setTimeout(() => { 41 | const progBar = this._progRef.current; 42 | const progBarWithBuffer = this._progWithBufferRef.current; 43 | if (progBar && progBarWithBuffer) { 44 | progBar.progress = 0.6; 45 | progBarWithBuffer.progress = 0.6; 46 | } 47 | }, 1600); 48 | } 49 | 50 | render = () => ( 51 | 52 | 53 | 54 | 55 | Default progress bar 56 | 57 | 58 | 59 | 60 | 61 | Indeterminate 62 | 63 | 64 | 65 | 66 | 67 | Buffering 68 | 69 | 70 | 71 | 72 | 73 | Default spinner 74 | 75 | 76 | 77 | Single color 78 | 79 | 80 | 81 | ); 82 | } 83 | -------------------------------------------------------------------------------- /example/app/sliders.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ywu on 15/8/31. 3 | */ 4 | 5 | import React, { Component, createRef } from 'react'; 6 | import { StyleSheet, Text, View } from 'react-native'; 7 | 8 | import { Slider, RangeSlider, NumRange } from 'react-native-material-kit'; 9 | 10 | import appStyles from './styles'; 11 | 12 | // customize the material design theme 13 | // setTheme({ 14 | // primaryColor: MKColor.Orange, 15 | // }); 16 | 17 | const styles = Object.assign( 18 | {}, 19 | appStyles, 20 | StyleSheet.create({ 21 | slider: { 22 | width: 130, 23 | }, 24 | }), 25 | ); 26 | 27 | interface ValueTextProps { 28 | initial: string; 29 | rangeText?: string; 30 | } 31 | 32 | interface ValueTextStyle { 33 | curValue: string; 34 | } 35 | 36 | class ValueText extends Component { 37 | constructor(props: ValueTextProps) { 38 | super(props); 39 | this.state = { 40 | curValue: props.initial, 41 | }; 42 | } 43 | 44 | onChange(curValue: string) { 45 | this.setState({ curValue }); 46 | } 47 | 48 | render = () => ( 49 | 50 | {this.state.curValue} {this.props.rangeText ? `(${this.props.rangeText})` : ''} 51 | 52 | ); 53 | } 54 | 55 | class Sliders extends Component { 56 | sliderWithValue = createRef(); 57 | rangeSlider = createRef(); 58 | valueText = createRef(); 59 | rangeValueText = createRef(); 60 | 61 | componentDidMount() { 62 | const slider = this.sliderWithValue.current; 63 | // const ranged = this.rangeSlider.current; 64 | 65 | setTimeout(() => { 66 | if (slider) { 67 | slider.value = 75; 68 | } 69 | // if (ranged) { 70 | // ranged.maxValue = 95; 71 | // } 72 | }, 1000); 73 | } 74 | 75 | render() { 76 | return ( 77 | 85 | 86 | 87 | 88 | Slider 89 | 90 | 91 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | Range Slider 106 | 107 | 108 | 115 | 116 | 117 | 118 | 119 | ); 120 | } 121 | 122 | _onChange = (value: number) => { 123 | const text = this.valueText.current; 124 | if (text) { 125 | text.onChange(value.toFixed(2)); 126 | } 127 | }; 128 | 129 | _onRangeChange = (range: NumRange) => { 130 | const text = this.rangeValueText.current; 131 | if (text) { 132 | text.onChange(range.min.toFixed(2) + '-' + range.max.toFixed(2)); 133 | } 134 | }; 135 | } 136 | 137 | export default Sliders; 138 | -------------------------------------------------------------------------------- /example/app/styles.ts: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native'; 2 | import { MKColor } from 'react-native-material-kit'; 3 | 4 | export default StyleSheet.create({ 5 | scrollView: { 6 | flex: 1, 7 | }, 8 | container: { 9 | flex: 1, 10 | alignItems: 'stretch', 11 | backgroundColor: '#F5FCFF', 12 | padding: 24, 13 | }, 14 | row: { 15 | flexDirection: 'row', 16 | }, 17 | col: { 18 | flex: 1, 19 | flexDirection: 'column', 20 | alignItems: 'center', 21 | marginLeft: 7, 22 | marginRight: 7, 23 | }, 24 | welcome: { 25 | fontSize: 20, 26 | textAlign: 'center', 27 | margin: 10, 28 | }, 29 | instructions: { 30 | textAlign: 'center', 31 | color: '#333333', 32 | marginTop: 10, 33 | marginBottom: 20, 34 | }, 35 | legendLabel: { 36 | textAlign: 'center', 37 | color: '#666666', 38 | marginTop: 10, 39 | marginBottom: 20, 40 | fontSize: 12, 41 | fontWeight: '300', 42 | }, 43 | toggleTextOn: { 44 | fontSize: 18, 45 | color: MKColor.Lime, 46 | }, 47 | toggleTextOff: { 48 | fontSize: 18, 49 | color: MKColor.BlueGrey, 50 | }, 51 | }); 52 | -------------------------------------------------------------------------------- /example/app/textfields.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by ywu on 15/7/16. 3 | */ 4 | import React, { createRef } from 'react'; 5 | import { StyleSheet, Text, View, ScrollView } from 'react-native'; 6 | 7 | import { Textfield, MKColor } from 'react-native-material-kit'; 8 | 9 | import appStyles from './styles'; 10 | 11 | const styles = Object.assign( 12 | {}, 13 | appStyles, 14 | StyleSheet.create({ 15 | col: { 16 | flex: 1, 17 | flexDirection: 'column', 18 | // alignItems: 'center', // this will prevent TFs from stretching horizontal 19 | marginLeft: 7, 20 | marginRight: 7, 21 | // backgroundColor: MKColor.Lime, 22 | }, 23 | textfield: { 24 | height: 28, // have to do it on iOS 25 | marginTop: 32, 26 | }, 27 | textfieldWithFloatingLabel: { 28 | height: 48, // have to do it on iOS 29 | marginTop: 10, 30 | }, 31 | }), 32 | ); 33 | 34 | export default class extends React.Component { 35 | defaultInputRef = createRef(); 36 | 37 | componentDidMount() { 38 | setTimeout(() => { 39 | this.defaultInputRef.current && this.defaultInputRef.current.focus(); 40 | }, 500); 41 | } 42 | 43 | render = () => ( 44 | 45 | 46 | 47 | 55 | Textfield 56 | 57 | 58 | 70 | With floating label 71 | 72 | 73 | 74 | 75 | 85 | Textfield 86 | 87 | 88 | console.log('Focus', !!e)} 96 | onBlur={e => console.log('Blur', !!e)} 97 | onEndEditing={e => console.log('EndEditing', !!e)} 98 | onSubmitEditing={e => console.log('SubmitEditing', !!e)} 99 | onTextChange={s => console.log('TextChange', s)} 100 | onChangeText={s => console.log('ChangeText', s)} 101 | /> 102 | With floating label 103 | 104 | 105 | {/* */} 106 | 107 | ); 108 | } 109 | 110 | // /** Test controlled state of builtin `TextInput` */ 111 | // class TF extends React.Component { 112 | // constructor(props) { 113 | // super(props); 114 | // this.state = { 115 | // count: 10, 116 | // }; 117 | // } 118 | 119 | // render = () => ( 120 | // 121 | // 122 | // console.log(`text => ${s}`)} 126 | // /> 127 | // 128 | //