├── example ├── .watchmanconfig ├── .babelrc ├── app.json ├── assets │ └── cover.jpg ├── android │ ├── app │ │ ├── src │ │ │ └── main │ │ │ │ ├── res │ │ │ │ ├── values │ │ │ │ │ ├── strings.xml │ │ │ │ │ └── styles.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ └── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── assets │ │ │ │ └── fonts │ │ │ │ │ ├── Entypo.ttf │ │ │ │ │ ├── Ionicons.ttf │ │ │ │ │ ├── Octicons.ttf │ │ │ │ │ ├── Zocial.ttf │ │ │ │ │ ├── EvilIcons.ttf │ │ │ │ │ ├── Foundation.ttf │ │ │ │ │ ├── FontAwesome.ttf │ │ │ │ │ ├── MaterialIcons.ttf │ │ │ │ │ ├── SimpleLineIcons.ttf │ │ │ │ │ └── MaterialCommunityIcons.ttf │ │ │ │ ├── java │ │ │ │ └── com │ │ │ │ │ └── testpalette │ │ │ │ │ ├── MainActivity.java │ │ │ │ │ └── MainApplication.java │ │ │ │ └── AndroidManifest.xml │ │ ├── BUCK │ │ ├── proguard-rules.pro │ │ └── build.gradle │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── keystores │ │ ├── debug.keystore.properties │ │ └── BUCK │ ├── settings.gradle │ ├── build.gradle │ ├── gradle.properties │ ├── gradlew.bat │ └── gradlew ├── webpack.haul.js ├── .buckconfig ├── README.md ├── ios │ ├── TestPalette │ │ ├── AppDelegate.h │ │ ├── main.m │ │ ├── Images.xcassets │ │ │ └── AppIcon.appiconset │ │ │ │ └── Contents.json │ │ ├── AppDelegate.m │ │ ├── Info.plist │ │ └── Base.lproj │ │ │ └── LaunchScreen.xib │ ├── TestPaletteTests │ │ ├── Info.plist │ │ └── TestPaletteTests.m │ ├── TestPalette-tvOSTests │ │ └── Info.plist │ ├── TestPalette-tvOS │ │ └── Info.plist │ └── TestPalette.xcodeproj │ │ └── xcshareddata │ │ └── xcschemes │ │ ├── TestPalette.xcscheme │ │ └── TestPalette-tvOS.xcscheme ├── src │ ├── components │ │ ├── Fab.js │ │ ├── Toolbar.js │ │ └── CoverImage.js │ └── screens │ │ ├── ScreenDetails.js │ │ └── ImageGallery.js ├── package.json ├── index.ios.js ├── .flowconfig └── index.android.js ├── .eslintignore ├── testSetup.js ├── android ├── src │ └── main │ │ ├── res │ │ ├── values │ │ │ ├── strings.xml │ │ │ ├── colors.xml │ │ │ └── styles.xml │ │ ├── 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 │ │ ├── AndroidManifest.xml │ │ └── java │ │ └── io │ │ └── callstack │ │ └── react_native_material_palette │ │ ├── MaterialPalettePackage.java │ │ └── MaterialPaletteModule.kt ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradle.properties ├── build.gradle ├── gradlew.bat └── gradlew ├── .yo-rc.json ├── jsconfig.json ├── flow-typed └── npm │ ├── flow-bin_v0.x.x.js │ ├── npm-release_vx.x.x.js │ ├── eslint-plugin-prettier_vx.x.x.js │ ├── babel-plugin-transform-flow-strip-types_vx.x.x.js │ ├── babel-plugin-transform-object-rest-spread_vx.x.x.js │ ├── eslint-config-prettier_vx.x.x.js │ ├── eslint-config-airbnb_vx.x.x.js │ ├── babel-eslint_vx.x.x.js │ ├── babel-preset-env_vx.x.x.js │ ├── babel-cli_vx.x.x.js │ ├── prettier_vx.x.x.js │ └── babel-core_vx.x.x.js ├── src ├── index.js ├── utils │ ├── validateCreatePalette.js │ ├── __tests__ │ │ ├── validateCreatePalette.test.js │ │ └── validateCreatePaletteArgs.test.js │ └── validateCreatePaletteArgs.js ├── createEventEmitter.js ├── types.js ├── __tests__ │ ├── createEventEmitter.test.js │ ├── PaletteProvider.test.js │ ├── withPalette.test.js │ └── createMaterialPalette.test.js ├── constants │ └── defaults.js ├── createMaterialPalette.js ├── PaletteProvider.js └── withPalette.js ├── .editorconfig ├── .gitignore ├── .eslintrc ├── LICENSE ├── .circleci └── config.yml ├── docs ├── SETUP.md ├── DEVELOPMENT.md └── API.md ├── .flowconfig ├── package.json ├── CODE_OF_CONDUCT.md └── README.md /example/.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/flow-typed/** 2 | -------------------------------------------------------------------------------- /testSetup.js: -------------------------------------------------------------------------------- 1 | require('react-native-mock/mock'); 2 | -------------------------------------------------------------------------------- /example/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react-native"] 3 | } -------------------------------------------------------------------------------- /example/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "TestPalette", 3 | "displayName": "TestPalette" 4 | } -------------------------------------------------------------------------------- /example/assets/cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/assets/cover.jpg -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | TestPalette 3 | 4 | -------------------------------------------------------------------------------- /android/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | react-native-material-palette 3 | 4 | -------------------------------------------------------------------------------- /example/webpack.haul.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ platform }) => ({ 2 | entry: `./index.${platform}.js`, 3 | devtool: 'eval-source-map', 4 | }); 5 | -------------------------------------------------------------------------------- /.yo-rc.json: -------------------------------------------------------------------------------- 1 | { 2 | "@callstack-io/generator-node-module": { 3 | "promptValues": { 4 | "githubUsername": "callstack-io" 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /android/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /example/android/keystores/debug.keystore.properties: -------------------------------------------------------------------------------- 1 | key.store=debug.keystore 2 | key.alias=androiddebugkey 3 | key.store.password=android 4 | key.alias.password=android 5 | -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Entypo.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/Entypo.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/Ionicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Octicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/Octicons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Zocial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/Zocial.ttf -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/EvilIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/EvilIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/Foundation.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/Foundation.ttf -------------------------------------------------------------------------------- /android/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/android/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/FontAwesome.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/FontAwesome.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/MaterialIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/SimpleLineIcons.ttf -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } -------------------------------------------------------------------------------- /example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/callstack/react-native-material-palette/HEAD/example/android/app/src/main/assets/fonts/MaterialCommunityIcons.ttf -------------------------------------------------------------------------------- /example/android/keystores/BUCK: -------------------------------------------------------------------------------- 1 | keystore( 2 | name = "debug", 3 | properties = "debug.keystore.properties", 4 | store = "debug.keystore", 5 | visibility = [ 6 | "PUBLIC", 7 | ], 8 | ) 9 | -------------------------------------------------------------------------------- /flow-typed/npm/flow-bin_v0.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583 2 | // flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x 3 | 4 | declare module "flow-bin" { 5 | declare module.exports: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | export { default as MaterialPaletteProvider } from './PaletteProvider'; 4 | export { default as withMaterialPalette } from './withPalette'; 5 | export { default as createMaterialPalette } from './createMaterialPalette'; 6 | -------------------------------------------------------------------------------- /android/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #3F51B5 4 | #303F9F 5 | #FF4081 6 | 7 | -------------------------------------------------------------------------------- /example/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /example/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | zipStoreBase=GRADLE_USER_HOME 4 | zipStorePath=wrapper/dists 5 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip 6 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Wed Jul 05 15:15:15 IST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | indent_style = space 11 | indent_size = 2 12 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Example App 2 | In order to run the example you need to: 3 | 4 | 1. Clone the repository 5 | 6 | 2. Go to example folder 7 | 8 | ```bash 9 | $ cd example 10 | ``` 11 | 12 | 3. Install dependencies 13 | 14 | ```bash 15 | $ yarn 16 | ``` 17 | 18 | 4. Run the app 19 | ```bash 20 | react-native run-android 21 | ``` 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Android/IntelliJ 6 | # 7 | build/ 8 | .idea 9 | .gradle 10 | local.properties 11 | *.iml 12 | 13 | # node.js 14 | # 15 | node_modules/ 16 | npm-debug.log 17 | 18 | # BUCK 19 | buck-out/ 20 | \.buckd/ 21 | android/app/libs 22 | *.keystore 23 | 24 | .vscode 25 | .github 26 | lib/ 27 | 28 | # EXAMPLE 29 | example/.happypack 30 | 31 | coverage/ 32 | -------------------------------------------------------------------------------- /example/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'TestPalette' 2 | include ':react-native-vector-icons' 3 | project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android') 4 | include ':react-native-material-palette' 5 | project(':react-native-material-palette').projectDir = new File(rootProject.projectDir, '../../android') 6 | include ':app' 7 | -------------------------------------------------------------------------------- /android/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 10 | 11 | -------------------------------------------------------------------------------- /android/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/testpalette/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.testpalette; 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. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "PaletteExample"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "callstack-io", 3 | "plugins": [ 4 | "flowtype", 5 | "react", 6 | "prettier" 7 | ], 8 | "env": { 9 | "jest": true 10 | }, 11 | "globals": { 12 | "ReactClass": true 13 | }, 14 | "parserOptions": { 15 | "sourceType": "module" 16 | }, 17 | "rules": { 18 | "prettier/prettier": [ 19 | "error", 20 | { 21 | "trailingComma": "all", 22 | "singleQuote": true 23 | } 24 | ], 25 | "flowtype/require-parameter-type": 0 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /example/ios/TestPalette/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | @interface AppDelegate : UIResponder 13 | 14 | @property (nonatomic, strong) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /example/ios/TestPalette/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | 12 | #import "AppDelegate.h" 13 | 14 | int main(int argc, char * argv[]) { 15 | @autoreleasepool { 16 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /example/src/components/Fab.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | // $FlowFixMe 5 | import { FAB } from 'react-native-paper'; 6 | import { StyleSheet } from 'react-native'; 7 | import { withMaterialPalette } from 'react-native-material-palette'; 8 | 9 | function Fab({ palette, icon, style }) { 10 | return ( 11 | 16 | ); 17 | } 18 | 19 | export default withMaterialPalette(palette => ({ 20 | backgroundColor: palette.darkVibrant.color, 21 | }))(Fab); 22 | 23 | const styles = StyleSheet.create({ 24 | fab: { 25 | position: 'absolute', 26 | bottom: 16, 27 | right: 16, 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /src/utils/validateCreatePalette.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { 4 | validateImage, 5 | validateOptionsKeys, 6 | validateType, 7 | validateMaximumColorCount, 8 | validateRegion, 9 | } from './validateCreatePaletteArgs'; 10 | import type { Image, Options } from '../types'; 11 | 12 | export default function validateCreatePalette(image: Image, options: Options) { 13 | validateImage(image); 14 | if (Object.keys(options).length) { 15 | validateOptionsKeys(options); 16 | } 17 | if (options.type) { 18 | validateType(options.type); 19 | } 20 | if (options.maximumColorCount) { 21 | validateMaximumColorCount(options.maximumColorCount); 22 | } 23 | if (options.region) { 24 | validateRegion(options.region); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/createEventEmitter.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | type Subscriber = (value: *) => void; 4 | 5 | export default function createEventEmitter(initialValue: *) { 6 | let subscribers: Subscriber[] = []; 7 | let currentValue = initialValue; 8 | 9 | return { 10 | publish(value: *) { 11 | currentValue = value; 12 | subscribers.forEach((subscriber: Subscriber) => subscriber(currentValue)); 13 | }, 14 | 15 | subscribe(newSubscriber: Subscriber) { 16 | subscribers.push(newSubscriber); 17 | newSubscriber(currentValue); 18 | 19 | return () => { 20 | subscribers = subscribers.filter( 21 | (subscriber: Subscriber) => subscriber !== newSubscriber, 22 | ); 23 | }; 24 | }, 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /example/src/components/Toolbar.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { withMaterialPalette } from 'react-native-material-palette'; 5 | // $FlowFixMe 6 | import { Toolbar as ToolbarPaper } from 'react-native-paper'; 7 | 8 | function ToolBar({ style, palette, dark, onArrowBackPressed }) { 9 | return ( 10 | 11 | 12 | 16 | 17 | ); 18 | } 19 | 20 | export default withMaterialPalette(palette => ({ 21 | backgroundColor: palette.muted.color, 22 | }))(ToolBar); 23 | -------------------------------------------------------------------------------- /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 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.2.3' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | mavenLocal() 18 | jcenter() 19 | maven { 20 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 21 | url "$rootDir/../node_modules/react-native/android" 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /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 | org.gradle.jvmargs=-Xmx1536m 13 | 14 | # When configured, Gradle will run in incubating parallel mode. 15 | # This option should only be used with decoupled projects. More details, visit 16 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 17 | # org.gradle.parallel=true 18 | -------------------------------------------------------------------------------- /example/ios/TestPalette/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /example/ios/TestPaletteTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/ios/TestPalette-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PaletteExample", 3 | "version": "0.0.1", 4 | "private": true, 5 | "scripts": { 6 | "start": "node node_modules/react-native/local-cli/cli.js start", 7 | "test": "jest", 8 | "haul": "haul start", 9 | "build:android": "cd android && ./gradlew clean && cd .. && react-native run-android" 10 | }, 11 | "dependencies": { 12 | "react": "16.0.0-alpha.12", 13 | "react-native": "0.47.0", 14 | "react-native-material-palette": "0.0.6", 15 | "react-native-paper": "^0.0.6", 16 | "react-native-vector-icons": "^4.3.0", 17 | "react-navigation": "^1.0.0-beta.11" 18 | }, 19 | "devDependencies": { 20 | "babel-jest": "20.0.3", 21 | "babel-preset-react-native": "1.9.2", 22 | "haul-cli": "^0.6.0", 23 | "jest": "20.0.4", 24 | "react-test-renderer": "16.0.0-alpha.6" 25 | }, 26 | "jest": { 27 | "preset": "react-native" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /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.useDeprecatedNdk=true 21 | -------------------------------------------------------------------------------- /flow-typed/npm/npm-release_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 919d721ee788421f5bcc11c26177d34d 2 | // flow-typed version: <>/npm-release_v^1.0.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'npm-release' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'npm-release' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | 26 | 27 | // Filename aliases 28 | declare module 'npm-release/index' { 29 | declare module.exports: $Exports<'npm-release'>; 30 | } 31 | declare module 'npm-release/index.js' { 32 | declare module.exports: $Exports<'npm-release'>; 33 | } 34 | -------------------------------------------------------------------------------- /flow-typed/npm/eslint-plugin-prettier_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 37da9a05beed3eacb3548491ffa642d3 2 | // flow-typed version: <>/eslint-plugin-prettier_v^2.0.1/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'eslint-plugin-prettier' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'eslint-plugin-prettier' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'eslint-plugin-prettier/eslint-plugin-prettier' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'eslint-plugin-prettier/eslint-plugin-prettier.js' { 31 | declare module.exports: $Exports<'eslint-plugin-prettier/eslint-plugin-prettier'>; 32 | } 33 | -------------------------------------------------------------------------------- /src/types.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { validColorProfiles } from './constants/defaults'; 4 | 5 | // Number is the opaque type returned by require('./image.jpg') 6 | export type Image = number | { uri: string }; 7 | export type Region = { 8 | top: number, 9 | left: number, 10 | bottom: number, 11 | right: number, 12 | }; 13 | 14 | export type ColorProfile = $Keys; 15 | export type Swatch = { 16 | population: number, // number of pixels 17 | color: string, // color for swatch, 18 | bodyTextColor: string, // appropriate color to use for any 'body' text 19 | titleTextColor: string, // appropriate color to use for any 'title' text 20 | }; 21 | 22 | export type DefaultSwatch = { 23 | color: string, 24 | bodyTextColor: string, 25 | titleTextColor: string, 26 | }; 27 | 28 | export type PaletteDefaults = { 29 | [key: ColorProfile]: DefaultSwatch, 30 | }; 31 | 32 | export type PaletteInstance = { 33 | [key: ColorProfile]: ?Swatch, 34 | }; 35 | 36 | export type Options = { 37 | region?: Region, 38 | maximumColorCount?: number, 39 | type?: ColorProfile | Array, 40 | }; 41 | -------------------------------------------------------------------------------- /android/src/main/java/io/callstack/react_native_material_palette/MaterialPalettePackage.java: -------------------------------------------------------------------------------- 1 | package io.callstack.react_native_material_palette; 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 | import java.util.*; 9 | 10 | public class MaterialPalettePackage implements ReactPackage { 11 | 12 | // Deprecated RN 0.47 13 | public List> createJSModules() { 14 | return Collections.emptyList(); 15 | } 16 | 17 | @Override 18 | public List createViewManagers(ReactApplicationContext reactContext) { 19 | return Collections.emptyList(); 20 | } 21 | 22 | @Override 23 | public List createNativeModules( 24 | ReactApplicationContext reactContext) { 25 | List modules = new ArrayList<>(); 26 | 27 | modules.add(new MaterialPaletteModule(reactContext)); 28 | 29 | return modules; 30 | } 31 | 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) Raul Gomez Acuna 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:latest 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | steps: 17 | - checkout 18 | 19 | # Download and cache dependencies 20 | - restore_cache: 21 | keys: 22 | - v1-dependencies-{{ checksum "package.json" }} 23 | # fallback to using the latest cache if no exact match is found 24 | - v1-dependencies 25 | 26 | - run: yarn 27 | - save_cache: 28 | paths: 29 | - node_modules 30 | key: v1-dependencies-{{ checksum "package.json" }} 31 | 32 | # run flow and unit tests! 33 | - run: yarn run flow 34 | - run: yarn run jest:coverage 35 | - store_artifacts: 36 | path: coverage 37 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-flow-strip-types_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 24d4b500d1c478bc1261153aaf11dd1b 2 | // flow-typed version: <>/babel-plugin-transform-flow-strip-types_v^6.22.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-flow-strip-types' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-flow-strip-types' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-flow-strip-types/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-flow-strip-types/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-flow-strip-types/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-plugin-transform-object-rest-spread_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 2ed2053061a969aed6bd8f7205f27ea9 2 | // flow-typed version: <>/babel-plugin-transform-object-rest-spread_v^6.23.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-plugin-transform-object-rest-spread' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-plugin-transform-object-rest-spread' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-plugin-transform-object-rest-spread/lib/index' { 26 | declare module.exports: any; 27 | } 28 | 29 | // Filename aliases 30 | declare module 'babel-plugin-transform-object-rest-spread/lib/index.js' { 31 | declare module.exports: $Exports<'babel-plugin-transform-object-rest-spread/lib/index'>; 32 | } 33 | -------------------------------------------------------------------------------- /example/android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 19 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /example/index.ios.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample React Native App 3 | * https://github.com/facebook/react-native 4 | * @flow 5 | */ 6 | 7 | import React, { Component } from 'react'; 8 | import { 9 | AppRegistry, 10 | StyleSheet, 11 | Text, 12 | View 13 | } from 'react-native'; 14 | 15 | export default class TestPalette extends Component { 16 | render() { 17 | return ( 18 | 19 | 20 | Welcome to React Native! 21 | 22 | 23 | To get started, edit index.ios.js 24 | 25 | 26 | Press Cmd+R to reload,{'\n'} 27 | Cmd+D or shake for dev menu 28 | 29 | 30 | ); 31 | } 32 | } 33 | 34 | const styles = StyleSheet.create({ 35 | container: { 36 | flex: 1, 37 | justifyContent: 'center', 38 | alignItems: 'center', 39 | backgroundColor: '#F5FCFF', 40 | }, 41 | welcome: { 42 | fontSize: 20, 43 | textAlign: 'center', 44 | margin: 10, 45 | }, 46 | instructions: { 47 | textAlign: 'center', 48 | color: '#333333', 49 | marginBottom: 5, 50 | }, 51 | }); 52 | 53 | AppRegistry.registerComponent('TestPalette', () => TestPalette); 54 | -------------------------------------------------------------------------------- /example/src/components/CoverImage.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { StyleSheet, Image, View, Text } from 'react-native'; 5 | import { withMaterialPalette } from 'react-native-material-palette'; 6 | 7 | function Article({ style, palette }) { 8 | return ( 9 | 10 | 11 | 12 | 13 | Babel Fish 14 | 15 | 18 | The Hitchhiker's Guide to the Galaxy 19 | 20 | 21 | 22 | ); 23 | } 24 | 25 | export default withMaterialPalette()(Article); 26 | 27 | const styles = StyleSheet.create({ 28 | cover: { 29 | height: 200, 30 | width: null, 31 | resizeMode: 'cover', 32 | }, 33 | label: { 34 | paddingVertical: 12, 35 | paddingHorizontal: 16, 36 | }, 37 | title: { 38 | fontSize: 16, 39 | fontWeight: 'bold', 40 | lineHeight: 24, 41 | }, 42 | subtitle: { 43 | fontSize: 12, 44 | lineHeight: 18, 45 | }, 46 | }); 47 | -------------------------------------------------------------------------------- /src/__tests__/createEventEmitter.test.js: -------------------------------------------------------------------------------- 1 | import createEventEmitter from '../createEventEmitter'; 2 | 3 | describe('createEventEmitter', () => { 4 | it('should return object with publish and subscribe methods', () => { 5 | const eventEmitter = createEventEmitter(); 6 | expect(eventEmitter.publish).toBeDefined(); 7 | expect(eventEmitter.subscribe).toBeDefined(); 8 | }); 9 | 10 | it('should provide initial value when listener subscribes', () => { 11 | const eventEmitter = createEventEmitter('data'); 12 | eventEmitter.subscribe(data => { 13 | expect(data).toBe('data'); 14 | }); 15 | }); 16 | 17 | it('should allow listeners to subscribe and be notified with new values', done => { 18 | const eventEmitter = createEventEmitter(); 19 | let initial = true; 20 | eventEmitter.subscribe(data => { 21 | if (!initial) { 22 | expect(data).toBe('data'); 23 | done(); 24 | } 25 | initial = initial ? !initial : initial; 26 | }); 27 | eventEmitter.publish('data'); 28 | }); 29 | 30 | it('should provide listeners with unsubscribe function', () => { 31 | const eventEmitter = createEventEmitter(); 32 | const handler = jest.fn(); 33 | const unsubscribe = eventEmitter.subscribe(handler); 34 | unsubscribe(); 35 | eventEmitter.publish('data'); 36 | expect(handler).toHaveBeenCalledTimes(1); 37 | }); 38 | }); 39 | -------------------------------------------------------------------------------- /example/android/app/src/main/java/com/testpalette/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.testpalette; 2 | 3 | import android.app.Application; 4 | 5 | import com.facebook.react.ReactApplication; 6 | import com.oblador.vectoricons.VectorIconsPackage; 7 | import io.callstack.react_native_material_palette.MaterialPalettePackage; 8 | import com.facebook.react.ReactNativeHost; 9 | import com.facebook.react.ReactPackage; 10 | import com.facebook.react.shell.MainReactPackage; 11 | import com.facebook.soloader.SoLoader; 12 | 13 | import java.util.Arrays; 14 | import java.util.List; 15 | 16 | public class MainApplication extends Application implements ReactApplication { 17 | 18 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 19 | @Override 20 | public boolean getUseDeveloperSupport() { 21 | return BuildConfig.DEBUG; 22 | } 23 | 24 | @Override 25 | protected List getPackages() { 26 | return Arrays.asList( 27 | new MainReactPackage(), 28 | new VectorIconsPackage(), 29 | new MaterialPalettePackage() 30 | ); 31 | } 32 | }; 33 | 34 | @Override 35 | public ReactNativeHost getReactNativeHost() { 36 | return mReactNativeHost; 37 | } 38 | 39 | @Override 40 | public void onCreate() { 41 | super.onCreate(); 42 | SoLoader.init(this, /* native exopackage */ false); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /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.kotlin_version = '1.1.2-4' 5 | repositories { 6 | jcenter() 7 | maven { 8 | url 'https://maven.google.com' 9 | } 10 | } 11 | dependencies { 12 | classpath 'com.android.tools.build:gradle:2.2.3' 13 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 14 | 15 | // NOTE: Do not place your application dependencies here; they belong 16 | // in the individual module build.gradle files 17 | } 18 | } 19 | 20 | apply plugin: 'com.android.library' 21 | apply plugin: 'kotlin-android' 22 | 23 | android { 24 | compileSdkVersion 25 25 | buildToolsVersion "25.0.3" 26 | defaultConfig { 27 | minSdkVersion 16 28 | targetSdkVersion 25 29 | versionCode 1 30 | versionName "1.0.0" 31 | } 32 | } 33 | 34 | allprojects { 35 | repositories { 36 | mavenLocal() 37 | jcenter() 38 | maven { 39 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 40 | url "$rootDir/../node_modules/react-native/android" 41 | } 42 | } 43 | } 44 | 45 | dependencies { 46 | compile 'com.facebook.react:react-native:+' 47 | compile 'com.android.support:palette-v7:23.4.0' 48 | compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" 49 | } 50 | repositories { 51 | mavenCentral() 52 | } 53 | -------------------------------------------------------------------------------- /example/ios/TestPalette/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import "AppDelegate.h" 11 | 12 | #import 13 | #import 14 | 15 | @implementation AppDelegate 16 | 17 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 18 | { 19 | NSURL *jsCodeLocation; 20 | 21 | jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; 22 | 23 | RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation 24 | moduleName:@"TestPalette" 25 | initialProperties:nil 26 | launchOptions:launchOptions]; 27 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 28 | 29 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 30 | UIViewController *rootViewController = [UIViewController new]; 31 | rootViewController.view = rootView; 32 | self.window.rootViewController = rootViewController; 33 | [self.window makeKeyAndVisible]; 34 | return YES; 35 | } 36 | 37 | @end 38 | -------------------------------------------------------------------------------- /example/.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.buckd/ 7 | 8 | ; Ignore unexpected extra "@providesModule" 9 | .*/node_modules/.*/node_modules/fbjs/.* 10 | 11 | ; Ignore duplicate module providers 12 | ; For RN Apps installed via npm, "Libraries" folder is inside 13 | ; "node_modules/react-native" but in the source repo it is in the root 14 | .*/Libraries/react-native/React.js 15 | .*/Libraries/react-native/ReactNative.js 16 | 17 | [include] 18 | 19 | [libs] 20 | node_modules/react-native/Libraries/react-native/react-native-interface.js 21 | node_modules/react-native/flow 22 | flow/ 23 | 24 | [options] 25 | emoji=true 26 | 27 | module.system=haste 28 | 29 | experimental.strict_type_args=true 30 | 31 | munge_underscores=true 32 | 33 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 34 | 35 | suppress_type=$FlowIssue 36 | suppress_type=$FlowFixMe 37 | suppress_type=$FixMe 38 | 39 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 40 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 41 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 42 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 43 | 44 | unsafe.enable_getters_and_setters=true 45 | 46 | [version] 47 | ^0.40.0 48 | -------------------------------------------------------------------------------- /src/constants/defaults.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import type { Region, Options, Swatch } from '../types'; 4 | 5 | const defaultVibrant = '#757575'; 6 | const defaultLightVibrant = '#E0E0E0'; 7 | const defaultDarkVibrant = '#212121'; 8 | const defaultMuted = '#9E9E9E'; 9 | const defaultLightMuted = '#BDBDBD'; 10 | const defaultDarkMuted = '#616161'; 11 | 12 | export const validColorProfiles = { 13 | vibrant: true, 14 | lightVibrant: true, 15 | darkVibrant: true, 16 | muted: true, 17 | lightMuted: true, 18 | darkMuted: true, 19 | }; 20 | 21 | export const defaultRegion: Region = { 22 | top: 0, 23 | right: 0, 24 | bottom: 0, 25 | left: 0, 26 | }; 27 | 28 | export const defaultOptions: Options = { 29 | region: defaultRegion, 30 | maximumColorCount: 16, 31 | type: 'vibrant', 32 | }; 33 | 34 | export const defaultLightSwatch: Swatch = { 35 | population: 0, 36 | color: '#000000', 37 | bodyTextColor: '#000000', 38 | titleTextColor: '#000000', 39 | }; 40 | 41 | export const defaultProfile = { 42 | color: '#000000', 43 | bodyTextColor: '#000000', 44 | titleTextColor: '#000000', 45 | }; 46 | 47 | export const defaultDarkSwatch: Swatch = { 48 | population: 0, 49 | color: '#000000', 50 | bodyTextColor: '#FFFFFF', 51 | titleTextColor: '#FFFFFF', 52 | }; 53 | 54 | export const defaultSwatches = { 55 | vibrant: { ...defaultDarkSwatch, color: defaultVibrant }, 56 | lightVibrant: { ...defaultLightSwatch, color: defaultLightVibrant }, 57 | darkVibrant: { ...defaultLightSwatch, color: defaultDarkVibrant }, 58 | muted: { ...defaultDarkSwatch, color: defaultMuted }, 59 | lightMuted: { ...defaultLightSwatch, color: defaultLightMuted }, 60 | darkMuted: { ...defaultLightSwatch, color: defaultDarkMuted }, 61 | }; 62 | -------------------------------------------------------------------------------- /flow-typed/npm/eslint-config-prettier_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: b7733986690d8db326b6509f2c0412ed 2 | // flow-typed version: <>/eslint-config-prettier_v^1.5.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'eslint-config-prettier' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'eslint-config-prettier' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'eslint-config-prettier/bin/cli' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'eslint-config-prettier/flowtype' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'eslint-config-prettier/react' { 34 | declare module.exports: any; 35 | } 36 | 37 | // Filename aliases 38 | declare module 'eslint-config-prettier/bin/cli.js' { 39 | declare module.exports: $Exports<'eslint-config-prettier/bin/cli'>; 40 | } 41 | declare module 'eslint-config-prettier/flowtype.js' { 42 | declare module.exports: $Exports<'eslint-config-prettier/flowtype'>; 43 | } 44 | declare module 'eslint-config-prettier/index' { 45 | declare module.exports: $Exports<'eslint-config-prettier'>; 46 | } 47 | declare module 'eslint-config-prettier/index.js' { 48 | declare module.exports: $Exports<'eslint-config-prettier'>; 49 | } 50 | declare module 'eslint-config-prettier/react.js' { 51 | declare module.exports: $Exports<'eslint-config-prettier/react'>; 52 | } 53 | -------------------------------------------------------------------------------- /example/ios/TestPalette-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIRequiredDeviceCapabilities 28 | 29 | armv7 30 | 31 | UISupportedInterfaceOrientations 32 | 33 | UIInterfaceOrientationPortrait 34 | UIInterfaceOrientationLandscapeLeft 35 | UIInterfaceOrientationLandscapeRight 36 | 37 | UIViewControllerBasedStatusBarAppearance 38 | 39 | NSLocationWhenInUseUsageDescription 40 | 41 | NSAppTransportSecurity 42 | 43 | 44 | NSExceptionDomains 45 | 46 | localhost 47 | 48 | NSExceptionAllowsInsecureHTTPLoads 49 | 50 | 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /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 | lib_deps = [] 12 | 13 | for jarfile in glob(['libs/*.jar']): 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 | 21 | for aarfile in glob(['libs/*.aar']): 22 | name = 'aars__' + aarfile[aarfile.rindex('/') + 1: aarfile.rindex('.aar')] 23 | lib_deps.append(':' + name) 24 | android_prebuilt_aar( 25 | name = name, 26 | aar = aarfile, 27 | ) 28 | 29 | android_library( 30 | name = "all-libs", 31 | exported_deps = lib_deps, 32 | ) 33 | 34 | android_library( 35 | name = "app-code", 36 | srcs = glob([ 37 | "src/main/java/**/*.java", 38 | ]), 39 | deps = [ 40 | ":all-libs", 41 | ":build_config", 42 | ":res", 43 | ], 44 | ) 45 | 46 | android_build_config( 47 | name = "build_config", 48 | package = "com.testpalette", 49 | ) 50 | 51 | android_resource( 52 | name = "res", 53 | package = "com.testpalette", 54 | res = "src/main/res", 55 | ) 56 | 57 | android_binary( 58 | name = "app", 59 | keystore = "//android/keystores:debug", 60 | manifest = "src/main/AndroidManifest.xml", 61 | package_type = "debug", 62 | deps = [ 63 | ":app-code", 64 | ], 65 | ) 66 | -------------------------------------------------------------------------------- /example/index.android.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Sample Material Palette App 3 | */ 4 | 5 | import React, { Component } from 'react'; 6 | import { 7 | AppRegistry, 8 | TouchableOpacity, 9 | Text, 10 | StyleSheet, 11 | View, 12 | } from 'react-native'; 13 | import { StackNavigator } from 'react-navigation'; 14 | import ImageGallery from './src/screens/ImageGallery'; 15 | import ScreenDetails from './src/screens/ScreenDetails'; 16 | 17 | class Menu extends Component { 18 | static navigationOptions = { 19 | title: 'Palette Example', 20 | }; 21 | 22 | render() { 23 | const { navigate } = this.props.navigation; 24 | return ( 25 | 26 | navigate('ImageGallery')} 29 | > 30 | 31 | Image Gallery 32 | 33 | 34 | navigate('ScreenDetails')} 37 | > 38 | 39 | Screen Details 40 | 41 | 42 | 43 | ); 44 | } 45 | } 46 | 47 | const PaletteExample = StackNavigator({ 48 | Home: { screen: Menu }, 49 | ImageGallery: { screen: ImageGallery }, 50 | ScreenDetails: { screen: ScreenDetails }, 51 | }); 52 | 53 | const styles = StyleSheet.create({ 54 | button: { 55 | width: '100%', 56 | height: 50, 57 | backgroundColor: 'blue', 58 | marginBottom: 15, 59 | justifyContent: 'center', 60 | alignItems: 'center', 61 | borderRadius: 2, 62 | elevation: 2, 63 | }, 64 | text: { 65 | fontSize: 14, 66 | color: 'white', 67 | }, 68 | }); 69 | 70 | AppRegistry.registerComponent('PaletteExample', () => PaletteExample); 71 | -------------------------------------------------------------------------------- /src/utils/__tests__/validateCreatePalette.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/first */ 2 | jest.mock('../validateCreatePaletteArgs'); 3 | 4 | import validateCreatePalette from '../validateCreatePalette'; 5 | import { defaultOptions } from '../../constants/defaults'; 6 | import { 7 | validateType, 8 | validateImage, 9 | validateMaximumColorCount, 10 | validateRegion, 11 | validateOptionsKeys, 12 | } from '../validateCreatePaletteArgs'; 13 | 14 | const VALID_IMAGE = { uri: 'https://something.image.jpg' }; 15 | 16 | describe('validateCreatePalette', () => { 17 | beforeEach(() => { 18 | validateType.mockReset(); 19 | validateImage.mockReset(); 20 | validateMaximumColorCount.mockReset(); 21 | validateRegion.mockReset(); 22 | validateOptionsKeys.mockReset(); 23 | }); 24 | 25 | it('should run all validators if all args are passed', () => { 26 | expect(() => 27 | validateCreatePalette(VALID_IMAGE, defaultOptions), 28 | ).not.toThrow(); 29 | 30 | validateCreatePalette(VALID_IMAGE, defaultOptions); 31 | 32 | expect(validateImage).toHaveBeenCalledWith(VALID_IMAGE); 33 | expect(validateOptionsKeys).toHaveBeenCalledWith(defaultOptions); 34 | expect(validateType).toHaveBeenCalledWith(defaultOptions.type); 35 | expect(validateRegion).toHaveBeenCalledWith(defaultOptions.region); 36 | expect(validateMaximumColorCount).toHaveBeenCalledWith( 37 | defaultOptions.maximumColorCount, 38 | ); 39 | }); 40 | 41 | it('should not run options validators if options are not provided', () => { 42 | expect(() => validateCreatePalette(VALID_IMAGE, {})).not.toThrow(); 43 | validateCreatePalette(VALID_IMAGE, {}); 44 | expect(validateImage).toHaveBeenCalledWith(VALID_IMAGE); 45 | expect(validateOptionsKeys).not.toHaveBeenCalled(); 46 | expect(validateType).not.toHaveBeenCalled(); 47 | expect(validateRegion).not.toHaveBeenCalled(); 48 | expect(validateMaximumColorCount).not.toHaveBeenCalled(); 49 | }); 50 | }); 51 | -------------------------------------------------------------------------------- /docs/SETUP.md: -------------------------------------------------------------------------------- 1 | # Installation and setup 2 | 3 | `react-native-material-palette` is a native module written in Kotlin, thus you need to follow the instructions below in order to set it up. 4 | 5 | ## Setup instructions 6 | 7 | 1. Install module using npm or yarn: 8 | ```bash 9 | yarn add react-native-material-palette 10 | ``` 11 | 12 | ### RN 0.47 or higher 13 | 14 | 2. Link the native library's dependencies 15 | ```bash 16 | react-native link react-native-material-palette 17 | ``` 18 | 19 | ### RN < 0.47 20 | Linking modules written in Kotlin is only supported from RN 0.47 on. For lower versions, you'll have to follow the manual steps described below: 21 | 22 | 2. Add the following lines to `android/settings.gradle`: 23 | ```diff 24 | rootProject.name = 'YourProjectName' 25 | + include ':react-native-material-palette' 26 | + project(':react-native-material-palette').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-material-palette/android') 27 | include ':app' 28 | ``` 29 | 30 | 3. Add the following lines to `android/app/src/main/java/com//MainApplication.java`: 31 | ```diff 32 | // ... 33 | 34 | + import io.callstack.react_native_material_palette.MaterialPalettePackage; 35 | 36 | public class MainApplication extends Application implements ReactApplication { 37 | 38 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 39 | // ... 40 | 41 | @Override 42 | protected List getPackages() { 43 | return Arrays.asList( 44 | new MainReactPackage(), 45 | + new MaterialPalettePackage() 46 | ); 47 | } 48 | }; 49 | 50 | // ... 51 | } 52 | 53 | ``` 54 | 55 | 4. Do the following changes to `android/app/src/build.gradle`: 56 | ```diff 57 | // ... 58 | 59 | dependencies { 60 | + compile project(':react-native-material-palette') 61 | compile fileTree(dir: "libs", include: ["*.jar"]) 62 | - compile "com.android.support:appcompat-v7:23.0.1" 63 | + compile "com.android.support:appcompat-v7:24.0.1" // Or version 25, depends on your project compileSdkVersion 64 | compile "com.facebook.react:react-native:+" // From node_modules 65 | } 66 | 67 | // ... 68 | ``` 69 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore templates for 'react-native init' 6 | .*/local-cli/templates/.* 7 | 8 | ; Ignore the website subdir 9 | /website/.* 10 | 11 | ; Ignore "BUCK" generated dirs 12 | /\.buckd/ 13 | 14 | ; Ignore unexpected extra "@providesModule" 15 | .*/node_modules/.*/node_modules/fbjs/.* 16 | 17 | ; Ignore duplicate module providers 18 | ; For RN Apps installed via npm, "Libraries" folder is inside 19 | ; "node_modules/react-native" but in the source repo it is in the root 20 | .*/Libraries/react-native/React.js 21 | .*/Libraries/react-native/ReactNative.js 22 | 23 | ; Additional create-react-native-app ignores 24 | 25 | ; Ignore duplicate module providers 26 | .*/node_modules/fbemitter/lib/* 27 | 28 | ; Ignore misbehaving dev-dependencies 29 | .*/node_modules/xdl/build/* 30 | .*/node_modules/reqwest/tests/* 31 | 32 | ; Ignore missing expo-sdk dependencies (temporarily) 33 | ; https://github.com/exponent/exponent-sdk/issues/36 34 | .*/node_modules/expo/src/* 35 | 36 | ; Ignore react-native-fbads dependency of the expo sdk 37 | .*/node_modules/react-native-fbads/* 38 | 39 | ; Ignore react-native-mock 40 | .*/node_modules/react-native-mock/* 41 | 42 | [include] 43 | 44 | [libs] 45 | node_modules/react-native/Libraries/react-native/react-native-interface.js 46 | node_modules/react-native/flow 47 | flow/ 48 | 49 | [options] 50 | emoji=true 51 | 52 | module.system=haste 53 | 54 | experimental.strict_type_args=true 55 | 56 | munge_underscores=true 57 | 58 | module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub' 59 | 60 | suppress_type=$FlowIssue 61 | suppress_type=$FlowFixMe 62 | suppress_type=$FixMe 63 | 64 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\) 65 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-0]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native_oss[a-z,_]*\\)?)\\)?:? #[0-9]+ 66 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 67 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 68 | 69 | unsafe.enable_getters_and_setters=true 70 | 71 | [version] 72 | ^0.40.0 73 | -------------------------------------------------------------------------------- /example/ios/TestPaletteTests/TestPaletteTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | #import 11 | #import 12 | 13 | #import 14 | #import 15 | 16 | #define TIMEOUT_SECONDS 600 17 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 18 | 19 | @interface TestPaletteTests : XCTestCase 20 | 21 | @end 22 | 23 | @implementation TestPaletteTests 24 | 25 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 26 | { 27 | if (test(view)) { 28 | return YES; 29 | } 30 | for (UIView *subview in [view subviews]) { 31 | if ([self findSubviewInView:subview matching:test]) { 32 | return YES; 33 | } 34 | } 35 | return NO; 36 | } 37 | 38 | - (void)testRendersWelcomeScreen 39 | { 40 | UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController]; 41 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 42 | BOOL foundElement = NO; 43 | 44 | __block NSString *redboxError = nil; 45 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 46 | if (level >= RCTLogLevelError) { 47 | redboxError = message; 48 | } 49 | }); 50 | 51 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 52 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 53 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 54 | 55 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 56 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 57 | return YES; 58 | } 59 | return NO; 60 | }]; 61 | } 62 | 63 | RCTSetLogFunction(RCTDefaultLogFunction); 64 | 65 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 66 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 67 | } 68 | 69 | 70 | @end 71 | -------------------------------------------------------------------------------- /example/ios/TestPalette/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | TestPalette 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | UILaunchStoryboardName 28 | LaunchScreen 29 | UIRequiredDeviceCapabilities 30 | 31 | armv7 32 | 33 | UISupportedInterfaceOrientations 34 | 35 | UIInterfaceOrientationPortrait 36 | UIInterfaceOrientationLandscapeLeft 37 | UIInterfaceOrientationLandscapeRight 38 | 39 | UIViewControllerBasedStatusBarAppearance 40 | 41 | NSLocationWhenInUseUsageDescription 42 | 43 | NSAppTransportSecurity 44 | 45 | NSExceptionDomains 46 | 47 | localhost 48 | 49 | NSExceptionAllowsInsecureHTTPLoads 50 | 51 | 52 | 53 | 54 | UIAppFonts 55 | 56 | Entypo.ttf 57 | EvilIcons.ttf 58 | FontAwesome.ttf 59 | Foundation.ttf 60 | Ionicons.ttf 61 | MaterialCommunityIcons.ttf 62 | MaterialIcons.ttf 63 | Octicons.ttf 64 | SimpleLineIcons.ttf 65 | Zocial.ttf 66 | 67 | 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-material-palette", 3 | "version": "0.1.0", 4 | "description": "", 5 | "license": "MIT", 6 | "repository": "github:callstack-io/react-native-material-palette", 7 | "author": { 8 | "name": "Raul Gomez Acuna", 9 | "email": "rauliyohmc@gmail.com" 10 | }, 11 | "main": "./lib/index.js", 12 | "files": [ 13 | "lib", 14 | "android" 15 | ], 16 | "engines": { 17 | "node": ">=6" 18 | }, 19 | "scripts": { 20 | "flow": "flow", 21 | "lint": "eslint src", 22 | "clean": "rimraf lib", 23 | "prepublish": "yarn run clean && babel src --out-dir lib --ignore '__tests__/'", 24 | "build:watch": "yarn run clean && babel src --out-dir lib --watch --ignore '__tests__/'", 25 | "jest": "jest src", 26 | "jest:coverage": "npm run jest && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js", 27 | "test": "concurrently \"npm run lint\" \"npm run jest\" \"npm run flow\"", 28 | "format": "eslint --fix src", 29 | "prettier": "prettier --single-quote --trailing-comma all --write \"src/**/*.js\"", 30 | "precommit": "yarn run lint" 31 | }, 32 | "dependencies": { 33 | "hoist-non-react-statics": "^2.2.0", 34 | "lodash": "^4.17.4", 35 | "prop-types": "^15.5.10" 36 | }, 37 | "devDependencies": { 38 | "babel-cli": "^6.24.0", 39 | "babel-core": "^6.24.0", 40 | "babel-eslint": "^7.2.1", 41 | "babel-plugin-transform-flow-strip-types": "^6.22.0", 42 | "babel-plugin-transform-object-rest-spread": "^6.23.0", 43 | "babel-preset-react-native-stage-0": "^1.0.1", 44 | "concurrently": "^3.4.0", 45 | "coveralls": "^2.13.1", 46 | "enzyme": "^2.9.1", 47 | "eslint": "^4.4.1", 48 | "eslint-config-callstack-io": "^0.4.1", 49 | "flow-bin": "^0.40.0", 50 | "husky": "^0.14.3", 51 | "jest": "^19.0.2", 52 | "npm-release": "^1.0.0", 53 | "prettier": "^1.5.3", 54 | "react": "16.0.0-alpha.6", 55 | "react-native": "0.43.4", 56 | "react-native-mock": "^0.3.1", 57 | "rimraf": "^2.6.1" 58 | }, 59 | "peerDependencies": { 60 | "react": "*", 61 | "react-native": "*" 62 | }, 63 | "babel": { 64 | "presets": [ 65 | [ 66 | "react-native" 67 | ] 68 | ], 69 | "plugins": [ 70 | "transform-flow-strip-types", 71 | "transform-object-rest-spread" 72 | ] 73 | }, 74 | "jest": { 75 | "preset": "react-native", 76 | "setupFiles": [ 77 | "./testSetup.js" 78 | ], 79 | "collectCoverage": true 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /flow-typed/npm/eslint-config-airbnb_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 701d0e4e590cf0a97e05837357a8f459 2 | // flow-typed version: <>/eslint-config-airbnb_v^14.1.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'eslint-config-airbnb' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'eslint-config-airbnb' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'eslint-config-airbnb/base' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'eslint-config-airbnb/legacy' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'eslint-config-airbnb/rules/react-a11y' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'eslint-config-airbnb/rules/react' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'eslint-config-airbnb/test/test-base' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'eslint-config-airbnb/test/test-react-order' { 46 | declare module.exports: any; 47 | } 48 | 49 | // Filename aliases 50 | declare module 'eslint-config-airbnb/base.js' { 51 | declare module.exports: $Exports<'eslint-config-airbnb/base'>; 52 | } 53 | declare module 'eslint-config-airbnb/index' { 54 | declare module.exports: $Exports<'eslint-config-airbnb'>; 55 | } 56 | declare module 'eslint-config-airbnb/index.js' { 57 | declare module.exports: $Exports<'eslint-config-airbnb'>; 58 | } 59 | declare module 'eslint-config-airbnb/legacy.js' { 60 | declare module.exports: $Exports<'eslint-config-airbnb/legacy'>; 61 | } 62 | declare module 'eslint-config-airbnb/rules/react-a11y.js' { 63 | declare module.exports: $Exports<'eslint-config-airbnb/rules/react-a11y'>; 64 | } 65 | declare module 'eslint-config-airbnb/rules/react.js' { 66 | declare module.exports: $Exports<'eslint-config-airbnb/rules/react'>; 67 | } 68 | declare module 'eslint-config-airbnb/test/test-base.js' { 69 | declare module.exports: $Exports<'eslint-config-airbnb/test/test-base'>; 70 | } 71 | declare module 'eslint-config-airbnb/test/test-react-order.js' { 72 | declare module.exports: $Exports<'eslint-config-airbnb/test/test-react-order'>; 73 | } 74 | -------------------------------------------------------------------------------- /example/src/screens/ScreenDetails.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React from 'react'; 4 | import { View, Text, StyleSheet, ScrollView } from 'react-native'; 5 | // $FlowFixMe 6 | import { Provider as PaperProvider } from 'react-native-paper'; 7 | import { MaterialPaletteProvider } from 'react-native-material-palette'; 8 | import Toolbar from '../components/Toolbar'; 9 | import Fab from '../components/Fab'; 10 | import CoverImage from '../components/CoverImage'; 11 | 12 | export default class ScreenDetails extends React.Component { 13 | static navigationOptions = { 14 | header: null, 15 | }; 16 | 17 | navigateBack = () => { 18 | this.props.navigation.goBack(); 19 | }; 20 | 21 | render() { 22 | return ( 23 | 24 | 36 | 37 | 38 | 39 | 40 | 41 | ‘The Babel fish,’ said The Hitchhiker’s Guide to the Galaxy quietly, ‘is small, yellow, and leech-like, and probably the oddest thing in the Universe. It feeds on brainwave energy received not from its own carrier but from those around it. It absorbs all unconscious mental frequencies from this brainwave energy to nourish itself with. It then excretes into the mind of its carrier a telepathic matrix formed by combining the conscious thought frequencies with nerve signals picked up from the speech centres of the brain which has supplied them. The practical upshot of all this is that if you stick a Babel fish in your ear you can instantly understand anything said to you in any form of language. The speech patterns you actually hear decode the brainwave matrix which has been fed into your mind by your Babel fish.’ 42 | 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | const styles = StyleSheet.create({ 53 | container: { 54 | flex: 1, 55 | backgroundColor: 'white', 56 | }, 57 | paragraph: { 58 | lineHeight: 21, 59 | color: '#222', 60 | margin: 16, 61 | marginBottom: 88, 62 | }, 63 | }); 64 | -------------------------------------------------------------------------------- /src/createMaterialPalette.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { NativeModules } from 'react-native'; 4 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 5 | import isEqual from 'lodash/isEqual'; 6 | import { 7 | defaultOptions, 8 | defaultLightSwatch, 9 | defaultSwatches, 10 | } from './constants/defaults'; 11 | import validateCreatePalette from './utils/validateCreatePalette'; 12 | import type { 13 | Image, 14 | PaletteInstance, 15 | Options, 16 | ColorProfile, 17 | PaletteDefaults, 18 | } from './types'; 19 | 20 | function mergeWithDefaults( 21 | palette: PaletteInstance, 22 | customDefaults: PaletteDefaults = {}, 23 | ) { 24 | const globalDefaultsForTypesProvided = ((Object.keys( 25 | palette, 26 | ): any): ColorProfile[]).reduce( 27 | (acc, profile) => ({ 28 | ...acc, 29 | [profile]: defaultSwatches[profile], 30 | }), 31 | {}, 32 | ); 33 | 34 | const defaults = { 35 | ...globalDefaultsForTypesProvided, 36 | ...((Object.keys(customDefaults): any): ColorProfile[]).reduce( 37 | (acc: *, profile: ColorProfile) => ({ 38 | ...acc, 39 | [profile]: { 40 | ...(customDefaults && customDefaults[profile] 41 | ? customDefaults[profile] 42 | : defaultSwatches[profile]), 43 | population: 0, 44 | }, 45 | }), 46 | {}, 47 | ), 48 | }; 49 | return { 50 | ...defaults, 51 | ...((Object.keys(palette): any): ColorProfile[]) 52 | .filter((profile: ColorProfile) => !!palette[profile]) // Stripping out unavailable profiles 53 | .reduce( 54 | (acc: *, profile: ColorProfile) => ({ 55 | ...acc, 56 | [profile]: palette[profile], 57 | }), 58 | {}, 59 | ), 60 | }; 61 | } 62 | 63 | export default (async function createMaterialPalette( 64 | image: Image, 65 | options?: Options = {}, 66 | defaults?: PaletteDefaults, 67 | ): Promise { 68 | validateCreatePalette(image, options); 69 | const { region, maximumColorCount, type } = { ...defaultOptions, ...options }; 70 | 71 | const source = resolveAssetSource(image); 72 | 73 | const paletteInstance = await NativeModules.MaterialPalette.createMaterialPalette( 74 | source, 75 | { 76 | region, 77 | maximumColorCount, 78 | type: typeof type === 'string' ? [type] : type, 79 | }, 80 | ); 81 | Object.keys(paletteInstance).forEach((profile: ColorProfile) => { 82 | if (isEqual(paletteInstance[profile], defaultLightSwatch)) { 83 | paletteInstance[profile] = null; 84 | } 85 | }); 86 | return mergeWithDefaults(paletteInstance, defaults); 87 | }); 88 | -------------------------------------------------------------------------------- /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 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | 19 | # Disabling obfuscation is useful if you collect stack traces from production crashes 20 | # (unless you are using a system that supports de-obfuscate the stack traces). 21 | -dontobfuscate 22 | 23 | # React Native 24 | 25 | # Keep our interfaces so they can be used by other ProGuard rules. 26 | # See http://sourceforge.net/p/proguard/bugs/466/ 27 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip 28 | -keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters 29 | -keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip 30 | 31 | # Do not strip any method/class that is annotated with @DoNotStrip 32 | -keep @com.facebook.proguard.annotations.DoNotStrip class * 33 | -keep @com.facebook.common.internal.DoNotStrip class * 34 | -keepclassmembers class * { 35 | @com.facebook.proguard.annotations.DoNotStrip *; 36 | @com.facebook.common.internal.DoNotStrip *; 37 | } 38 | 39 | -keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * { 40 | void set*(***); 41 | *** get*(); 42 | } 43 | 44 | -keep class * extends com.facebook.react.bridge.JavaScriptModule { *; } 45 | -keep class * extends com.facebook.react.bridge.NativeModule { *; } 46 | -keepclassmembers,includedescriptorclasses class * { native ; } 47 | -keepclassmembers class * { @com.facebook.react.uimanager.UIProp ; } 48 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactProp ; } 49 | -keepclassmembers class * { @com.facebook.react.uimanager.annotations.ReactPropGroup ; } 50 | 51 | -dontwarn com.facebook.react.** 52 | 53 | # okhttp 54 | 55 | -keepattributes Signature 56 | -keepattributes *Annotation* 57 | -keep class okhttp3.** { *; } 58 | -keep interface okhttp3.** { *; } 59 | -dontwarn okhttp3.** 60 | 61 | # okio 62 | 63 | -keep class sun.misc.Unsafe { *; } 64 | -dontwarn java.nio.file.* 65 | -dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement 66 | -dontwarn okio.** 67 | -------------------------------------------------------------------------------- /android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /example/android/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-eslint_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: d9c320305b75e2570ef036ead3185ffb 2 | // flow-typed version: <>/babel-eslint_v^7.2.1/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-eslint' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-eslint' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-eslint/babylon-to-espree/attachComments' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-eslint/babylon-to-espree/convertComments' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-eslint/babylon-to-espree/convertTemplateType' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-eslint/babylon-to-espree/index' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-eslint/babylon-to-espree/toAST' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'babel-eslint/babylon-to-espree/toToken' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'babel-eslint/babylon-to-espree/toTokens' { 50 | declare module.exports: any; 51 | } 52 | 53 | // Filename aliases 54 | declare module 'babel-eslint/babylon-to-espree/attachComments.js' { 55 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/attachComments'>; 56 | } 57 | declare module 'babel-eslint/babylon-to-espree/convertComments.js' { 58 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/convertComments'>; 59 | } 60 | declare module 'babel-eslint/babylon-to-espree/convertTemplateType.js' { 61 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/convertTemplateType'>; 62 | } 63 | declare module 'babel-eslint/babylon-to-espree/index.js' { 64 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/index'>; 65 | } 66 | declare module 'babel-eslint/babylon-to-espree/toAST.js' { 67 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/toAST'>; 68 | } 69 | declare module 'babel-eslint/babylon-to-espree/toToken.js' { 70 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/toToken'>; 71 | } 72 | declare module 'babel-eslint/babylon-to-espree/toTokens.js' { 73 | declare module.exports: $Exports<'babel-eslint/babylon-to-espree/toTokens'>; 74 | } 75 | declare module 'babel-eslint/index' { 76 | declare module.exports: $Exports<'babel-eslint'>; 77 | } 78 | declare module 'babel-eslint/index.js' { 79 | declare module.exports: $Exports<'babel-eslint'>; 80 | } 81 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-preset-env_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: cc4630ef33d575afc33d7f7a15475ea6 2 | // flow-typed version: <>/babel-preset-env_v^1.2.2/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-preset-env' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-preset-env' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-preset-env/data/built-in-features' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-preset-env/data/plugin-features' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-preset-env/lib/default-includes' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-preset-env/lib/index' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-preset-env/lib/module-transformations' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'babel-preset-env/lib/normalize-options' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'babel-preset-env/lib/targets-parser' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'babel-preset-env/lib/transform-polyfill-require-plugin' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'babel-preset-env/lib/utils' { 58 | declare module.exports: any; 59 | } 60 | 61 | // Filename aliases 62 | declare module 'babel-preset-env/data/built-in-features.js' { 63 | declare module.exports: $Exports<'babel-preset-env/data/built-in-features'>; 64 | } 65 | declare module 'babel-preset-env/data/plugin-features.js' { 66 | declare module.exports: $Exports<'babel-preset-env/data/plugin-features'>; 67 | } 68 | declare module 'babel-preset-env/lib/default-includes.js' { 69 | declare module.exports: $Exports<'babel-preset-env/lib/default-includes'>; 70 | } 71 | declare module 'babel-preset-env/lib/index.js' { 72 | declare module.exports: $Exports<'babel-preset-env/lib/index'>; 73 | } 74 | declare module 'babel-preset-env/lib/module-transformations.js' { 75 | declare module.exports: $Exports<'babel-preset-env/lib/module-transformations'>; 76 | } 77 | declare module 'babel-preset-env/lib/normalize-options.js' { 78 | declare module.exports: $Exports<'babel-preset-env/lib/normalize-options'>; 79 | } 80 | declare module 'babel-preset-env/lib/targets-parser.js' { 81 | declare module.exports: $Exports<'babel-preset-env/lib/targets-parser'>; 82 | } 83 | declare module 'babel-preset-env/lib/transform-polyfill-require-plugin.js' { 84 | declare module.exports: $Exports<'babel-preset-env/lib/transform-polyfill-require-plugin'>; 85 | } 86 | declare module 'babel-preset-env/lib/utils.js' { 87 | declare module.exports: $Exports<'babel-preset-env/lib/utils'>; 88 | } 89 | -------------------------------------------------------------------------------- /docs/DEVELOPMENT.md: -------------------------------------------------------------------------------- 1 | # `react-native-material-palette` development 2 | 3 | The recommended way to develop `react-native-material-palette` is by cloning the repository and symlinking it to a project using `yarn link` or `npm link`. 4 | 5 | Follow the steps below in order to setup `react-native-material-palette` for development: 6 | 7 | 1. Clone the repository: 8 | ```bash 9 | $ git clone https://github.com/callstack-io/react-native-material-palette.git 10 | ``` 11 | 12 | 2. Install dependencies: 13 | ```bash 14 | $ yarn # or `npm install` 15 | ``` 16 | 17 | 3. Link the module: 18 | ```bash 19 | $ yarn link # or `npm link` 20 | ``` 21 | 22 | ## Using example app 23 | 4. Navigate to the example app: 24 | ```bash 25 | cd example 26 | ``` 27 | 28 | 5. Install example app dependencies: 29 | ```bash 30 | $ yarn # or `npm install` 31 | ``` 32 | 33 | 6. Link `react-native-material-palette` within the example app: 34 | ```bash 35 | $ yarn link react-native-material-palette # or `npm link react-native-material-palette` 36 | ``` 37 | 38 | Done. Everything is set up aleady. Run `yarn run haul -- --platform android` to start the development server and `react-native run-android` to build and start the app. 39 | 40 | ## Custom app 41 | 42 | 4. (Optional) Create a React Native project and navigate to it: 43 | ```bash 44 | $ react-native init MyProject && cd MyProject 45 | ``` 46 | 47 | 5. Link `react-native-material-palette` within the project: 48 | ```bash 49 | $ yarn link react-native-material-palette # or `npm link react-native-material-palette` 50 | ``` 51 | 52 | 6. Perform first time setup, if you haven't done it before. Instructions can be found here: [Setup guide](./SETUP.md). 53 | 54 | # Useful `react-native-material-palette` scripts 55 | 56 | * Watch `react-native-material-palette` repository and automatically transpile changed files: 57 | ```bash 58 | $ yarn run build:watch # or `npm run build:watch` 59 | ``` 60 | 61 | * Lint the files and apply automatic fixes: 62 | ```bash 63 | $ yarn run format # or `npm run format` 64 | ``` 65 | 66 | * Type check the files 67 | ```bash 68 | $ yarn run flow # or `npm run flow` 69 | ``` 70 | 71 | * Run tests 72 | ```bash 73 | $ yarn run jest # or `npm run jest` 74 | ``` 75 | 76 | * Lint the files, type check them and run test concurently: 77 | ``` 78 | $ yarn run test # or `npm run test` 79 | ``` 80 | 81 | # Troubleshooting 82 | 83 | ### Cannot find module `react` or `react-native` 84 | This error might happen if you're using `haul` and have `react-native-material-palette` symlinked via `yarn link` or `npm link`. In order to fix it, you need to overwrite `webpack.haul.js` and set `resolve.symlinks` to `false`: 85 | 86 | ```diff 87 | - module.exports = ({ platform }) => ({ 88 | + module.exports = ({ platform }, defaults) => ({ 89 | + ...defaults, 90 | entry: `./index.${platform}.js`, 91 | + resolve: { 92 | + ...defaults.resolve, 93 | + symlinks: false 94 | + } 95 | }); 96 | ``` 97 | 98 | ### Cannot build the example project, `kotlin.KotlinNullPointerException` 99 | This error happens when you made some kotlin changes in the library and attempt to rebuild the example project. To fix that, run `yarn run build:android` from within the `example` folder. 100 | -------------------------------------------------------------------------------- /example/src/screens/ImageGallery.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { Component } from 'react'; 4 | import { 5 | FlatList, 6 | Image, 7 | View, 8 | Text, 9 | ActivityIndicator, 10 | StyleSheet, 11 | } from 'react-native'; 12 | import { createMaterialPalette } from 'react-native-material-palette'; 13 | 14 | export default class ImageGallery extends Component { 15 | static navigationOptions = { 16 | title: 'Image Gallery', 17 | }; 18 | 19 | state = { 20 | data: [], 21 | error: null, 22 | }; 23 | 24 | componentDidMount() { 25 | this._loadPalettes(); 26 | } 27 | 28 | _loadPalettes = async () => { 29 | const words = [ 30 | 'Daleks', 31 | 'Thals', 32 | 'Voord', 33 | 'Sensorites', 34 | 'Koquillion', 35 | 'Menoptera', 36 | 'Zarbi', 37 | 'Larvae guns', 38 | 'Xerons', 39 | 'Aridians', 40 | 'Mire Beasts', 41 | 'Drahvins', 42 | ]; 43 | const urls = Array.from({ length: 12 }).map( 44 | (_, i) => `https://unsplash.it/300?random&num=${i * 100}`, 45 | ); 46 | 47 | let palettes; 48 | 49 | try { 50 | palettes = await Promise.all( 51 | urls.map(url => createMaterialPalette({ uri: url }, { type: 'muted' })), 52 | ); 53 | } catch (error) { 54 | this.setState({ 55 | error, 56 | }); 57 | return; 58 | } 59 | 60 | this.setState({ 61 | data: palettes.map((palette, i) => ({ 62 | palette, 63 | url: urls[i], 64 | label: words[i], 65 | key: urls[i], 66 | })), 67 | }); 68 | }; 69 | 70 | render() { 71 | if (this.state.error) { 72 | return ( 73 | 74 | 75 | An error occurred: {this.state.error.message} 76 | 77 | 78 | ); 79 | } 80 | if (!this.state.data.length) { 81 | return ( 82 | 83 | 84 | 85 | ); 86 | } 87 | return ( 88 | ( 92 | 93 | 94 | 102 | 103 | {item.label} 104 | 105 | 106 | 107 | )} 108 | /> 109 | ); 110 | } 111 | } 112 | 113 | const styles = StyleSheet.create({ 114 | container: { 115 | flex: 1, 116 | }, 117 | image: { 118 | minWidth: 120, 119 | maxWidth: 180, 120 | height: 120, 121 | }, 122 | blankslate: { 123 | flex: 1, 124 | justifyContent: 'center', 125 | alignItems: 'center', 126 | padding: 24, 127 | }, 128 | error: { 129 | backgroundColor: 'red', 130 | }, 131 | label: { 132 | padding: 8, 133 | }, 134 | }); 135 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at rauliyohmc@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-cli_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 9fdf8c731ebb12a8f64037abb2ebe2e1 2 | // flow-typed version: <>/babel-cli_v^6.24.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-cli' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-cli' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-cli/bin/babel-doctor' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-cli/bin/babel-external-helpers' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-cli/bin/babel-node' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-cli/bin/babel' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-cli/lib/_babel-node' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'babel-cli/lib/babel-external-helpers' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'babel-cli/lib/babel-node' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'babel-cli/lib/babel/dir' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'babel-cli/lib/babel/file' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'babel-cli/lib/babel/index' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'babel-cli/lib/babel/util' { 66 | declare module.exports: any; 67 | } 68 | 69 | // Filename aliases 70 | declare module 'babel-cli/bin/babel-doctor.js' { 71 | declare module.exports: $Exports<'babel-cli/bin/babel-doctor'>; 72 | } 73 | declare module 'babel-cli/bin/babel-external-helpers.js' { 74 | declare module.exports: $Exports<'babel-cli/bin/babel-external-helpers'>; 75 | } 76 | declare module 'babel-cli/bin/babel-node.js' { 77 | declare module.exports: $Exports<'babel-cli/bin/babel-node'>; 78 | } 79 | declare module 'babel-cli/bin/babel.js' { 80 | declare module.exports: $Exports<'babel-cli/bin/babel'>; 81 | } 82 | declare module 'babel-cli/index' { 83 | declare module.exports: $Exports<'babel-cli'>; 84 | } 85 | declare module 'babel-cli/index.js' { 86 | declare module.exports: $Exports<'babel-cli'>; 87 | } 88 | declare module 'babel-cli/lib/_babel-node.js' { 89 | declare module.exports: $Exports<'babel-cli/lib/_babel-node'>; 90 | } 91 | declare module 'babel-cli/lib/babel-external-helpers.js' { 92 | declare module.exports: $Exports<'babel-cli/lib/babel-external-helpers'>; 93 | } 94 | declare module 'babel-cli/lib/babel-node.js' { 95 | declare module.exports: $Exports<'babel-cli/lib/babel-node'>; 96 | } 97 | declare module 'babel-cli/lib/babel/dir.js' { 98 | declare module.exports: $Exports<'babel-cli/lib/babel/dir'>; 99 | } 100 | declare module 'babel-cli/lib/babel/file.js' { 101 | declare module.exports: $Exports<'babel-cli/lib/babel/file'>; 102 | } 103 | declare module 'babel-cli/lib/babel/index.js' { 104 | declare module.exports: $Exports<'babel-cli/lib/babel/index'>; 105 | } 106 | declare module 'babel-cli/lib/babel/util.js' { 107 | declare module.exports: $Exports<'babel-cli/lib/babel/util'>; 108 | } 109 | -------------------------------------------------------------------------------- /src/PaletteProvider.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { Component } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import createEventEmitter from './createEventEmitter'; 6 | import { createMaterialPalette } from './index'; 7 | import { validateDefaults } from './utils/validateCreatePaletteArgs'; 8 | 9 | import type { PaletteInstance, Image, Options, PaletteDefaults } from './types'; 10 | 11 | export const KEY = '__react-native-material-palette__'; 12 | 13 | type Props = { 14 | /** 15 | * Image from which to generate the palette 16 | */ 17 | image: Image, 18 | /** 19 | * Options for palette generation 20 | */ 21 | options?: Options, 22 | /** 23 | * Global defaults for Swatches 24 | */ 25 | defaults?: PaletteDefaults, 26 | /** 27 | * Children 28 | */ 29 | children: React$Element<*>, 30 | /** 31 | * Error handler, called when palette generation fails 32 | */ 33 | onError?: (error: Error) => void, 34 | /** 35 | * Finish handler, called right after the palette is generated 36 | */ 37 | onFinish?: (palette: PaletteInstance) => void, 38 | /** 39 | * Render the children regardless whether palette is still being created, does not 40 | * take effect if `LoaderComponent` is specified 41 | */ 42 | forceRender?: boolean, 43 | /** 44 | * Render LoaderComponent when the palette is being created 45 | */ 46 | LoaderComponent?: ReactClass<*> | ((...args: Array<*>) => React.Element<*>), 47 | }; 48 | 49 | type State = { 50 | palette: ?PaletteInstance, 51 | }; 52 | 53 | /** 54 | * Provides broadcast for material palette instance via context. 55 | * Passes `subscribe` method via context, which `withPalette` can call 56 | * and subscribe in order to receive the palette instance. 57 | */ 58 | export default class MaterialPaletteProvider extends Component< 59 | void, 60 | Props, 61 | State, 62 | > { 63 | static childContextTypes = { 64 | [KEY]: PropTypes.func.isRequired, 65 | }; 66 | 67 | state: State = { 68 | palette: null, 69 | }; 70 | 71 | eventEmitter = createEventEmitter(null); 72 | 73 | getChildContext() { 74 | return { 75 | [KEY]: this.eventEmitter.subscribe, 76 | }; 77 | } 78 | 79 | componentWillMount() { 80 | if (this.props.defaults) { 81 | validateDefaults(this.props.defaults); 82 | } 83 | 84 | this._createPalette(); 85 | } 86 | 87 | _createPalette = () => { 88 | const { image, options, defaults, onFinish, onError } = this.props; 89 | 90 | createMaterialPalette(image, options, defaults).then( 91 | palette => { 92 | if (onFinish) onFinish(palette); 93 | 94 | this.eventEmitter.publish({ 95 | palette, 96 | }); 97 | this.setState({ palette }); 98 | }, 99 | error => { 100 | if (onError) { 101 | onError(error); 102 | } else { 103 | error.message = `Uncaught MaterialPaletteProvider exception: ${error.message}`; // eslint-disable-line no-param-reassign 104 | throw error; 105 | } 106 | }, 107 | ); 108 | }; 109 | 110 | render() { 111 | const { forceRender, LoaderComponent, children } = this.props; 112 | const shouldRender = this.state.palette || forceRender; 113 | 114 | if (LoaderComponent && !this.state.palette) { 115 | return ; 116 | } 117 | 118 | if (shouldRender) { 119 | return React.Children.only(children); 120 | } 121 | 122 | return null; 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /src/withPalette.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import React, { Component } from 'react'; 4 | import PropTypes from 'prop-types'; 5 | import hoistNonReactStatic from 'hoist-non-react-statics'; 6 | import { KEY } from './PaletteProvider'; 7 | 8 | import type { PaletteInstance, ColorProfile, PaletteDefaults } from './types'; 9 | 10 | type State = { 11 | palette: ?PaletteInstance, 12 | globalDefaults: ?PaletteDefaults, 13 | }; 14 | 15 | /** 16 | * Connect component to a material palette notification channel in order to obtain 17 | * palette instance when palette is resolved. 18 | * Prop `palette` will be passed to wrapped component with either `null` or with palette instance. 19 | * 20 | * If `mapPaletteToStyle` is specified, it will be evaluated when palette is available and 21 | * the results will be passed to a `style` prop to wrapped component. 22 | */ 23 | export default function withMaterialPalette( 24 | mapPaletteToStyle?: ( 25 | palette: PaletteInstance, 26 | ) => { 27 | [key: string]: mixed, 28 | }, 29 | localDefaults?: PaletteDefaults, 30 | ) { 31 | return (WrappedComponent: ReactClass<*>) => { 32 | class MaterialPaletteConnector extends Component { 33 | unsubscribe: ?() => void; 34 | state: State; 35 | 36 | constructor(props: *) { 37 | super(props); 38 | this.unsubscribe = null; 39 | this.state = { 40 | palette: null, 41 | globalDefaults: null, 42 | }; 43 | } 44 | 45 | static contextTypes = { 46 | [KEY]: PropTypes.func.isRequired, 47 | }; 48 | 49 | componentWillMount() { 50 | const subscribe = this.context[KEY]; 51 | 52 | if (typeof subscribe !== 'function') { 53 | throw new Error( 54 | 'Cannot find MaterialPaletteProvider key in context. ' + 55 | 'Did you forget to add on top of components tree?', 56 | ); 57 | } 58 | 59 | this.unsubscribe = subscribe((data: { palette: PaletteInstance }) => { 60 | if (data) { 61 | this.setState(data); 62 | } 63 | }); 64 | } 65 | 66 | componentWillUnmount() { 67 | if (typeof this.unsubscribe === 'function') { 68 | this.unsubscribe(); 69 | } 70 | } 71 | 72 | _mergePaletteWithDefaults(): PaletteInstance { 73 | const { palette } = this.state; 74 | 75 | return [ 76 | ...Object.keys(palette || {}), 77 | ...Object.keys(localDefaults || {}), 78 | ].reduce((acc: *, key: string) => { 79 | const profile = ((key: any): ColorProfile); 80 | return { 81 | ...acc, 82 | [key]: { 83 | population: 0, 84 | ...acc[key], 85 | ...(localDefaults && localDefaults[profile] 86 | ? localDefaults[profile] 87 | : {}), 88 | ...(palette && palette[profile] ? palette[profile] : {}), 89 | }, 90 | }; 91 | }, {}); 92 | } 93 | 94 | render() { 95 | const { style, ...rest } = this.props; 96 | const palette: PaletteInstance = this._mergePaletteWithDefaults(); 97 | const stylesFromPalette = 98 | this.state.palette && typeof mapPaletteToStyle === 'function' 99 | ? mapPaletteToStyle(palette) 100 | : {}; 101 | return ( 102 | 107 | ); 108 | } 109 | } 110 | 111 | return hoistNonReactStatic(MaterialPaletteConnector, WrappedComponent); 112 | }; 113 | } 114 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-material-palette 2 | 3 | [![Build Status][build-badge]][build] 4 | [![Code Coverage][coverage-badge]][coverage] 5 | [![Version][version-badge]][package] 6 | [![MIT License][license-badge]][license] 7 | 8 | 9 | [![PRs Welcome][prs-welcome-badge]][prs-welcome] 10 | [![Chat][chat-badge]][chat] 11 | [![Code of Conduct][coc-badge]][coc] 12 | 13 | [Android Palette API](https://developer.android.com/training/material/palette-colors.html) brought to react native. It extracts prominent colors from images to help you create visually engaging apps. At the moment it only supports Android. 14 | 15 | Check out [this medium article](https://blog.callstack.io/colour-your-apps-in-react-native-using-material-palette-35448df91958) for a broader introduction! 16 | 17 | ## Installation 18 | 19 | Installation and setup guide can be found here: [Setup guide](./docs/SETUP.md). 20 | 21 | ## Usage with `createMaterialPalette` 22 | 23 | ```js 24 | import { createMaterialPalette } from "react-native-material-palette"; 25 | 26 | const palette = await createMaterialPalette({ uri: 'http://dummySite/images/yummy.jpg' }); 27 | ``` 28 | 29 | ## Usage with `MaterialPaletteProvider` and `withMaterialPalette` 30 | 31 | ```js 32 | import { MaterialPaletteProvider, withMaterialPalette } from 'react-native-material-palette'; 33 | 34 | const PaletteView = withMaterialPalette( 35 | palette => ({ backgroundColor: palette.vibrant.color }), 36 | )(View); 37 | 38 | // later ... 39 | 40 | 53 | 54 | Hello World 55 | 56 | 57 | ``` 58 | 59 | ## API 60 | Full API documentation can be found here: [API documentation](./docs/API.md). 61 | 62 | ## Future work 63 | - [ ] iOS support 64 | - [ ] Providing own color profiles 65 | 66 | ## Example app 67 | The repo includes an example app that covers all the API cases. Go [here](./example) to try it out! 68 | 69 | ![image](https://user-images.githubusercontent.com/4982414/29513573-0f5acf5a-8666-11e7-989e-30409a50cb8c.png) 70 | 71 | ![image](https://user-images.githubusercontent.com/4982414/29513689-5f64b4ac-8666-11e7-86fc-0eeea7813630.png) 72 | 73 | ## Development 74 | 75 | Development instructions can be found here: [`react-native-material-palette` development](./docs/DEVELOPMENT.md). 76 | 77 | 78 | [build-badge]: https://img.shields.io/circleci/project/github/callstack/react-native-material-palette/master.svg?style=flat-square 79 | [build]: https://circleci.com/gh/callstack/react-native-material-palette 80 | [coverage-badge]: https://img.shields.io/coveralls/github/callstack-io/react-native-material-palette.svg?style=flat-square 81 | [coverage]: https://coveralls.io/github/callstack-io/react-native-material-palette?branch=master 82 | [version-badge]: https://img.shields.io/npm/v/react-native-material-palette.svg?style=flat-square 83 | [package]: https://www.npmjs.com/package/react-native-material-palette 84 | [license-badge]: https://img.shields.io/npm/l/react-native-material-palette.svg?style=flat-square 85 | [license]: https://opensource.org/licenses/MIT 86 | [prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square 87 | [prs-welcome]: http://makeapullrequest.com 88 | [coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square 89 | [coc]: https://github.com/callstack/react-native-material-palette/blob/master/CODE_OF_CONDUCT.md 90 | [chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3 91 | [chat]: https://discord.gg/zwR2Cdh 92 | -------------------------------------------------------------------------------- /example/ios/TestPalette/Base.lproj/LaunchScreen.xib: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 21 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /flow-typed/npm/prettier_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: 4d2a41326e0c1becebe554cb6b1df7c9 2 | // flow-typed version: <>/prettier_v^0.22.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'prettier' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'prettier' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'prettier/bin/prettier' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'prettier/docs/prettier.min' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'prettier/docs/rollup.config' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'prettier/src/comments' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'prettier/src/deprecated' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'prettier/src/doc-builders' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'prettier/src/doc-debug' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'prettier/src/doc-printer' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'prettier/src/doc-utils' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'prettier/src/fast-path' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'prettier/src/options' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'prettier/src/parser' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'prettier/src/printer' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module 'prettier/src/util' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module 'prettier/test' { 82 | declare module.exports: any; 83 | } 84 | 85 | // Filename aliases 86 | declare module 'prettier/bin/prettier.js' { 87 | declare module.exports: $Exports<'prettier/bin/prettier'>; 88 | } 89 | declare module 'prettier/docs/prettier.min.js' { 90 | declare module.exports: $Exports<'prettier/docs/prettier.min'>; 91 | } 92 | declare module 'prettier/docs/rollup.config.js' { 93 | declare module.exports: $Exports<'prettier/docs/rollup.config'>; 94 | } 95 | declare module 'prettier/index' { 96 | declare module.exports: $Exports<'prettier'>; 97 | } 98 | declare module 'prettier/index.js' { 99 | declare module.exports: $Exports<'prettier'>; 100 | } 101 | declare module 'prettier/src/comments.js' { 102 | declare module.exports: $Exports<'prettier/src/comments'>; 103 | } 104 | declare module 'prettier/src/deprecated.js' { 105 | declare module.exports: $Exports<'prettier/src/deprecated'>; 106 | } 107 | declare module 'prettier/src/doc-builders.js' { 108 | declare module.exports: $Exports<'prettier/src/doc-builders'>; 109 | } 110 | declare module 'prettier/src/doc-debug.js' { 111 | declare module.exports: $Exports<'prettier/src/doc-debug'>; 112 | } 113 | declare module 'prettier/src/doc-printer.js' { 114 | declare module.exports: $Exports<'prettier/src/doc-printer'>; 115 | } 116 | declare module 'prettier/src/doc-utils.js' { 117 | declare module.exports: $Exports<'prettier/src/doc-utils'>; 118 | } 119 | declare module 'prettier/src/fast-path.js' { 120 | declare module.exports: $Exports<'prettier/src/fast-path'>; 121 | } 122 | declare module 'prettier/src/options.js' { 123 | declare module.exports: $Exports<'prettier/src/options'>; 124 | } 125 | declare module 'prettier/src/parser.js' { 126 | declare module.exports: $Exports<'prettier/src/parser'>; 127 | } 128 | declare module 'prettier/src/printer.js' { 129 | declare module.exports: $Exports<'prettier/src/printer'>; 130 | } 131 | declare module 'prettier/src/util.js' { 132 | declare module.exports: $Exports<'prettier/src/util'>; 133 | } 134 | declare module 'prettier/test.js' { 135 | declare module.exports: $Exports<'prettier/test'>; 136 | } 137 | -------------------------------------------------------------------------------- /src/utils/validateCreatePaletteArgs.js: -------------------------------------------------------------------------------- 1 | /* @flow */ 2 | 3 | import { validColorProfiles } from '../constants/defaults'; 4 | import type { 5 | Image, 6 | Options, 7 | Region, 8 | ColorProfile, 9 | PaletteDefaults, 10 | } from '../types'; 11 | 12 | export const INVALID_IMAGE_MESSAGE = 13 | 'Invalid image param, you should either require a local asset, or provide an external URI'; 14 | 15 | export const createOptionsErrorMessage = (hint: string): string => 16 | `Invalid options param - ${hint}. Please refer to the API documentation`; 17 | 18 | export function validateImage(image: Image) { 19 | if (typeof image !== 'number' && typeof image !== 'object') { 20 | throw new Error(INVALID_IMAGE_MESSAGE); 21 | } 22 | if (typeof image === 'object') { 23 | if (!image.uri) throw new Error(INVALID_IMAGE_MESSAGE); 24 | if (typeof image.uri !== 'string') throw new Error(INVALID_IMAGE_MESSAGE); 25 | } 26 | } 27 | 28 | export function validateOptionsKeys(options: Options) { 29 | if (typeof options !== 'object') { 30 | throw new Error(createOptionsErrorMessage('options should be an object')); 31 | } else { 32 | const validKeys = ['region', 'maximumColorCount', 'type']; 33 | Object.keys(options).forEach((opt: string) => { 34 | if (!validKeys.includes(opt)) { 35 | throw new Error(createOptionsErrorMessage(`${opt} is not a valid key`)); 36 | } 37 | }); 38 | } 39 | } 40 | 41 | export function validateRegion(region: Region) { 42 | if (typeof region !== 'object') { 43 | throw new Error( 44 | createOptionsErrorMessage('options.region should be an object'), 45 | ); 46 | } else { 47 | const validKeys = ['top', 'bottom', 'left', 'right']; 48 | Object.keys(region).forEach((reg: string) => { 49 | const isNumber = typeof region[reg] === 'number'; 50 | if (!validKeys.includes(reg) || !isNumber) { 51 | throw new Error( 52 | createOptionsErrorMessage( 53 | `region.${reg} ${!isNumber 54 | ? 'should be a number' 55 | : 'is not a valid param'}`, 56 | ), 57 | ); 58 | } 59 | }); 60 | } 61 | } 62 | 63 | export function validateMaximumColorCount(maxColorCount: number) { 64 | if ( 65 | typeof maxColorCount !== 'number' || 66 | maxColorCount <= 0 || 67 | maxColorCount % 1 !== 0 68 | ) { 69 | throw new Error( 70 | createOptionsErrorMessage( 71 | 'options.maximumColorCount should be positive integer', 72 | ), 73 | ); 74 | } 75 | } 76 | 77 | export function validateType(type: ColorProfile | Array) { 78 | if (typeof type !== 'string' && !Array.isArray(type)) { 79 | throw new Error( 80 | createOptionsErrorMessage( 81 | 'options.type should be either a string or an Array of strings', 82 | ), 83 | ); 84 | } 85 | if (Array.isArray(type)) { 86 | type.forEach((t: string) => { 87 | if (typeof t !== 'string') { 88 | throw new Error( 89 | createOptionsErrorMessage( 90 | 'options.type should be an Array of strings', 91 | ), 92 | ); 93 | } 94 | }); 95 | } 96 | } 97 | 98 | export function validateDefaults(defaults: PaletteDefaults) { 99 | if (typeof defaults !== 'object') { 100 | throw new Error('this.props.defaults should be an object'); 101 | } else { 102 | const validProfilesKeys = ['bodyTextColor', 'color', 'titleTextColor']; 103 | (Object.keys((defaults: any)): ColorProfile[]).forEach(profile => { 104 | if (!(profile in validColorProfiles)) { 105 | throw new Error( 106 | `${profile} is not a valid color profile for this.props.defaults. Please refer to the API documentation`, 107 | ); 108 | } else { 109 | const profileKeys = Object.keys(defaults[profile]).sort(); 110 | const areTypesCorrect = profileKeys.every( 111 | key => typeof defaults[profile][key] === 'string', 112 | ); 113 | const areEqual = 114 | validProfilesKeys.length === profileKeys.length && 115 | validProfilesKeys.every((v, i) => v === profileKeys[i]); 116 | if (!areEqual) { 117 | throw new Error( 118 | `Each default profile should define 'bodyTextColor', 'color' and 'titleTextColor' parameters. Please refer to the API documentation`, 119 | ); 120 | } 121 | if (!areTypesCorrect) { 122 | throw new Error( 123 | `'bodyTextColor', 'color' and 'titleTextColor' should all be strings`, 124 | ); 125 | } 126 | } 127 | }); 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/utils/__tests__/validateCreatePaletteArgs.test.js: -------------------------------------------------------------------------------- 1 | import { 2 | INVALID_IMAGE_MESSAGE, 3 | createOptionsErrorMessage, 4 | validateImage, 5 | validateOptionsKeys, 6 | validateRegion, 7 | validateMaximumColorCount, 8 | validateType, 9 | validateDefaults, 10 | } from '../validateCreatePaletteArgs'; 11 | import { defaultProfile } from '../../constants/defaults'; 12 | 13 | const VALID_IMAGE = { uri: 'https://something.image.jpg' }; 14 | 15 | describe('validateCreatePaletteArgs', () => { 16 | it('Should throw if image param is not valid', () => { 17 | expect(() => validateImage(false)).toThrow(INVALID_IMAGE_MESSAGE); 18 | expect(() => validateImage({ urii: '' })).toThrow(INVALID_IMAGE_MESSAGE); 19 | expect(() => validateImage({ uri: 45 })).toThrow(INVALID_IMAGE_MESSAGE); 20 | expect(() => validateImage(4)).not.toThrow(); 21 | expect(() => validateImage(VALID_IMAGE)).not.toThrow(); 22 | }); 23 | 24 | it('Should throw if options param is not valid', () => { 25 | expect(() => validateOptionsKeys('hello')).toThrow( 26 | createOptionsErrorMessage('options should be an object'), 27 | ); 28 | expect(() => validateOptionsKeys({ foo: 'something' })).toThrow( 29 | createOptionsErrorMessage(`foo is not a valid key`), 30 | ); 31 | expect(() => 32 | validateOptionsKeys({ 33 | region: 'region', 34 | type: 'vibrant', 35 | bar: 'bar', 36 | }), 37 | ).toThrow(createOptionsErrorMessage(`bar is not a valid key`)); 38 | expect(() => validateOptionsKeys({})).not.toThrow(); 39 | expect(() => 40 | validateOptionsKeys({ 41 | region: 'region', 42 | type: 'type', 43 | maximumColorCount: 4, 44 | }), 45 | ).not.toThrow(); 46 | }); 47 | 48 | it('Should throw if region param is not valid', () => { 49 | expect(() => validateRegion('region')).toThrow( 50 | createOptionsErrorMessage('options.region should be an object'), 51 | ); 52 | expect(() => 53 | validateRegion({ foo: 1, bottom: 4, left: 4, right: 8 }), 54 | ).toThrow(createOptionsErrorMessage('region.foo is not a valid param')); 55 | expect(() => 56 | validateRegion({ top: 1, bottom: '4', left: 4, right: 8 }), 57 | ).toThrow(createOptionsErrorMessage('region.bottom should be a number')); 58 | expect(() => 59 | validateRegion({ top: 1, bottom: 45, left: 8, right: 1 }), 60 | ).not.toThrow(); 61 | }); 62 | 63 | it('Should throw if maximumColorCount is not valid', () => { 64 | expect(() => validateMaximumColorCount('hola')).toThrow( 65 | createOptionsErrorMessage( 66 | 'options.maximumColorCount should be positive integer', 67 | ), 68 | ); 69 | expect(() => validateMaximumColorCount(-1)).toThrow( 70 | createOptionsErrorMessage( 71 | 'options.maximumColorCount should be positive integer', 72 | ), 73 | ); 74 | expect(() => validateMaximumColorCount(22.3)).toThrow( 75 | createOptionsErrorMessage( 76 | 'options.maximumColorCount should be positive integer', 77 | ), 78 | ); 79 | expect(() => validateMaximumColorCount(4)).not.toThrow(); 80 | }); 81 | 82 | it('should throw if type is not valid', () => { 83 | expect(() => validateType(12)).toThrow( 84 | createOptionsErrorMessage( 85 | 'options.type should be either a string or an Array of strings', 86 | ), 87 | ); 88 | expect(() => validateType(['muted', 12])).toThrow( 89 | createOptionsErrorMessage('options.type should be an Array of strings'), 90 | ); 91 | expect(() => validateType('vibrant')).not.toThrow(); 92 | expect(() => validateType(['vibrant', 'lightVibrant'])).not.toThrow(); 93 | }); 94 | 95 | it('this.props.defaults validation', () => { 96 | const invalidDefaults1 = 'hej'; 97 | const invalidDefaults2 = { 98 | foo: 'bar', 99 | vibrant: 'bar', 100 | }; 101 | const invalidDefaults3 = { 102 | lightVibrant: 'foo', 103 | muted: { 104 | color: '#000000', 105 | bodyTextColor: '#000000', 106 | titleTextColor: '#000000', 107 | }, 108 | }; 109 | const invalidDefaults4 = { 110 | muted: { 111 | color: '#000000', 112 | bodyTextColor: '#000000', 113 | titleTextColor: '#000000', 114 | }, 115 | darkVibrant: { 116 | color: '#000000', 117 | bodyTextColor: 12, 118 | titleTextColor: '#000000', 119 | }, 120 | }; 121 | const validDefaults = { 122 | muted: defaultProfile, 123 | darkMuted: defaultProfile, 124 | lightMuted: defaultProfile, 125 | darkVibrant: defaultProfile, 126 | vibrant: defaultProfile, 127 | lightVibrant: defaultProfile, 128 | }; 129 | 130 | expect(() => validateDefaults(invalidDefaults1)).toThrow( 131 | 'this.props.defaults should be an object', 132 | ); 133 | expect(() => validateDefaults(invalidDefaults2)).toThrow( 134 | 'foo is not a valid color profile for this.props.defaults. Please refer to the API documentation', 135 | ); 136 | expect(() => validateDefaults(invalidDefaults3)).toThrow( 137 | `Each default profile should define 'bodyTextColor', 'color' and 'titleTextColor' parameters. Please refer to the API documentation`, 138 | ); 139 | expect(() => validateDefaults(invalidDefaults4)).toThrow( 140 | `'bodyTextColor', 'color' and 'titleTextColor' should all be strings`, 141 | ); 142 | expect(() => validateDefaults(validDefaults)).not.toThrow(); 143 | }); 144 | }); 145 | -------------------------------------------------------------------------------- /example/ios/TestPalette.xcodeproj/xcshareddata/xcschemes/TestPalette.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /src/__tests__/PaletteProvider.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/first */ 2 | jest.mock('../index.js', () => ({ createMaterialPalette: jest.fn() })); 3 | jest.mock('../utils/validateCreatePaletteArgs', () => ({ 4 | __esModule: true, 5 | validateDefaults: jest.fn(), 6 | })); 7 | 8 | import React from 'react'; 9 | import { Text } from 'react-native'; 10 | import PropTypes from 'prop-types'; 11 | import { shallow, render } from 'enzyme'; 12 | import PaletteProvider, { KEY } from '../PaletteProvider'; 13 | import { createMaterialPalette } from '../index'; 14 | import { defaultSwatches } from '../constants/defaults'; 15 | 16 | // eslint-disable-next-line react/prefer-stateless-function 17 | class TestComponent extends React.Component { 18 | static contextTypes = { 19 | [KEY]: PropTypes.func.isRequired, 20 | }; 21 | 22 | render() { 23 | this.props.onRender(this.context); 24 | return TestComponent; 25 | } 26 | } 27 | 28 | describe('PaletteProvider', () => { 29 | beforeEach(() => { 30 | createMaterialPalette.mockReset(); 31 | }); 32 | 33 | it('should create palette and call `onFinish` handler when done', done => { 34 | createMaterialPalette.mockImplementation(() => 35 | Promise.resolve({ vibrant: defaultSwatches.vibrant }), 36 | ); 37 | 38 | function onFinish(palette) { 39 | expect(createMaterialPalette).toHaveBeenCalledWith( 40 | 0, 41 | { 42 | type: 'vibrant', 43 | }, 44 | { 45 | vibrant: { 46 | color: '#000000', 47 | bodyTextColor: '#FFFFFF', 48 | titleTextColor: '#FFFFFF', 49 | }, 50 | }, 51 | ); 52 | expect(palette).toEqual({ 53 | vibrant: defaultSwatches.vibrant, 54 | }); 55 | done(); 56 | } 57 | 58 | render( 59 | 71 | Test 72 | , 73 | ); 74 | }); 75 | 76 | it('should pass `subscribe` function via context', done => { 77 | createMaterialPalette.mockImplementation(() => 78 | Promise.resolve({ vibrant: null }), 79 | ); 80 | 81 | function onRender(context) { 82 | expect(typeof context[KEY]).toEqual('function'); 83 | done(); 84 | } 85 | 86 | render( 87 | 92 | 93 | , 94 | ); 95 | }); 96 | 97 | it('should run `onError` handler if palette creation fails', done => { 98 | createMaterialPalette.mockImplementation(() => 99 | Promise.reject(new Error('test')), 100 | ); 101 | 102 | function onError(error) { 103 | expect(error.message).toEqual('test'); 104 | done(); 105 | } 106 | 107 | render( 108 | 113 | Test 114 | , 115 | ); 116 | }); 117 | 118 | it('should throw error if `onError` was not passed and palette creation fails', () => { 119 | createMaterialPalette.mockImplementation(() => ({ 120 | then(success, failure) { 121 | try { 122 | failure(new Error('test')); 123 | } catch (error) { 124 | expect(error.message).toBe( 125 | 'Uncaught MaterialPaletteProvider exception: test', 126 | ); 127 | } 128 | }, 129 | })); 130 | 131 | render( 132 | 133 | Test 134 | , 135 | ); 136 | }); 137 | 138 | it('should render children if `forceRender` is true when creating palette', done => { 139 | createMaterialPalette.mockImplementation( 140 | () => 141 | new Promise(resolve => { 142 | setTimeout(() => { 143 | resolve({ vibrant: {} }); 144 | }, 50); 145 | }), 146 | ); 147 | 148 | let firstNotification = true; 149 | function onRender(context) { 150 | setTimeout(() => { 151 | context[KEY](data => { 152 | if (firstNotification) { 153 | firstNotification = false; 154 | expect(data).toBeNull(); 155 | } else { 156 | expect(data.palette.vibrant).toEqual({}); 157 | done(); 158 | } 159 | }); 160 | }, 10); 161 | } 162 | 163 | const wrapper = render( 164 | 165 | 166 | , 167 | ); 168 | 169 | expect(wrapper.text()).toEqual('TestComponent'); 170 | }); 171 | 172 | it('should render component specified in `waitForPalette` when creating palette', () => { 173 | createMaterialPalette.mockImplementation(() => new Promise(() => {})); 174 | const wrapper = shallow( 175 | Loading} 179 | > 180 | Test 181 | , 182 | ); 183 | expect(wrapper.shallow().props().children).toEqual('Loading'); 184 | }); 185 | }); 186 | -------------------------------------------------------------------------------- /example/ios/TestPalette.xcodeproj/xcshareddata/xcschemes/TestPalette-tvOS.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 29 | 35 | 36 | 37 | 43 | 49 | 50 | 51 | 52 | 53 | 58 | 59 | 61 | 67 | 68 | 69 | 70 | 71 | 77 | 78 | 79 | 80 | 81 | 82 | 92 | 94 | 100 | 101 | 102 | 103 | 104 | 105 | 111 | 113 | 119 | 120 | 121 | 122 | 124 | 125 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /example/android/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # For Cygwin, ensure paths are in UNIX format before anything is touched. 46 | if $cygwin ; then 47 | [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"` 48 | fi 49 | 50 | # Attempt to set APP_HOME 51 | # Resolve links: $0 may be a link 52 | PRG="$0" 53 | # Need this for relative symlinks. 54 | while [ -h "$PRG" ] ; do 55 | ls=`ls -ld "$PRG"` 56 | link=`expr "$ls" : '.*-> \(.*\)$'` 57 | if expr "$link" : '/.*' > /dev/null; then 58 | PRG="$link" 59 | else 60 | PRG=`dirname "$PRG"`"/$link" 61 | fi 62 | done 63 | SAVED="`pwd`" 64 | cd "`dirname \"$PRG\"`/" >&- 65 | APP_HOME="`pwd -P`" 66 | cd "$SAVED" >&- 67 | 68 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 69 | 70 | # Determine the Java command to use to start the JVM. 71 | if [ -n "$JAVA_HOME" ] ; then 72 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 73 | # IBM's JDK on AIX uses strange locations for the executables 74 | JAVACMD="$JAVA_HOME/jre/sh/java" 75 | else 76 | JAVACMD="$JAVA_HOME/bin/java" 77 | fi 78 | if [ ! -x "$JAVACMD" ] ; then 79 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 80 | 81 | Please set the JAVA_HOME variable in your environment to match the 82 | location of your Java installation." 83 | fi 84 | else 85 | JAVACMD="java" 86 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 87 | 88 | Please set the JAVA_HOME variable in your environment to match the 89 | location of your Java installation." 90 | fi 91 | 92 | # Increase the maximum file descriptors if we can. 93 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 94 | MAX_FD_LIMIT=`ulimit -H -n` 95 | if [ $? -eq 0 ] ; then 96 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 97 | MAX_FD="$MAX_FD_LIMIT" 98 | fi 99 | ulimit -n $MAX_FD 100 | if [ $? -ne 0 ] ; then 101 | warn "Could not set maximum file descriptor limit: $MAX_FD" 102 | fi 103 | else 104 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 105 | fi 106 | fi 107 | 108 | # For Darwin, add options to specify how the application appears in the dock 109 | if $darwin; then 110 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 111 | fi 112 | 113 | # For Cygwin, switch paths to Windows format before running java 114 | if $cygwin ; then 115 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 116 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 117 | 118 | # We build the pattern for arguments to be converted via cygpath 119 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 120 | SEP="" 121 | for dir in $ROOTDIRSRAW ; do 122 | ROOTDIRS="$ROOTDIRS$SEP$dir" 123 | SEP="|" 124 | done 125 | OURCYGPATTERN="(^($ROOTDIRS))" 126 | # Add a user-defined pattern to the cygpath arguments 127 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 128 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 129 | fi 130 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 131 | i=0 132 | for arg in "$@" ; do 133 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 134 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 135 | 136 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 137 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 138 | else 139 | eval `echo args$i`="\"$arg\"" 140 | fi 141 | i=$((i+1)) 142 | done 143 | case $i in 144 | (0) set -- ;; 145 | (1) set -- "$args0" ;; 146 | (2) set -- "$args0" "$args1" ;; 147 | (3) set -- "$args0" "$args1" "$args2" ;; 148 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 149 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 150 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 151 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 152 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 153 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 154 | esac 155 | fi 156 | 157 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 158 | function splitJvmOpts() { 159 | JVM_OPTS=("$@") 160 | } 161 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 162 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 163 | 164 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 165 | -------------------------------------------------------------------------------- /example/android/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: "com.android.application" 2 | 3 | import com.android.build.OutputFile 4 | 5 | /** 6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets 7 | * and bundleReleaseJsAndAssets). 8 | * These basically call `react-native bundle` with the correct arguments during the Android build 9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the 10 | * bundle directly from the development server. Below you can see all the possible configurations 11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the 12 | * `apply from: "../../node_modules/react-native/react.gradle"` line. 13 | * 14 | * project.ext.react = [ 15 | * // the name of the generated asset file containing your JS bundle 16 | * bundleAssetName: "index.android.bundle", 17 | * 18 | * // the entry file for bundle generation 19 | * entryFile: "index.android.js", 20 | * 21 | * // whether to bundle JS and assets in debug mode 22 | * bundleInDebug: false, 23 | * 24 | * // whether to bundle JS and assets in release mode 25 | * bundleInRelease: true, 26 | * 27 | * // whether to bundle JS and assets in another build variant (if configured). 28 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants 29 | * // The configuration property can be in the following formats 30 | * // 'bundleIn${productFlavor}${buildType}' 31 | * // 'bundleIn${buildType}' 32 | * // bundleInFreeDebug: true, 33 | * // bundleInPaidRelease: true, 34 | * // bundleInBeta: true, 35 | * 36 | * // the root of your project, i.e. where "package.json" lives 37 | * root: "../../", 38 | * 39 | * // where to put the JS bundle asset in debug mode 40 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug", 41 | * 42 | * // where to put the JS bundle asset in release mode 43 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release", 44 | * 45 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 46 | * // require('./image.png')), in debug mode 47 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug", 48 | * 49 | * // where to put drawable resources / React Native assets, e.g. the ones you use via 50 | * // require('./image.png')), in release mode 51 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release", 52 | * 53 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means 54 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to 55 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle 56 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/ 57 | * // for example, you might want to remove it from here. 58 | * inputExcludes: ["android/**", "ios/**"], 59 | * 60 | * // override which node gets called and with what additional arguments 61 | * nodeExecutableAndArgs: ["node"] 62 | * 63 | * // supply additional arguments to the packager 64 | * extraPackagerArgs: [] 65 | * ] 66 | */ 67 | 68 | project.ext.react = [ 69 | cliPath: "node_modules/haul-cli/bin/cli.js" 70 | ] 71 | 72 | apply from: "../../node_modules/react-native/react.gradle" 73 | 74 | /** 75 | * Set this to true to create two separate APKs instead of one: 76 | * - An APK that only works on ARM devices 77 | * - An APK that only works on x86 devices 78 | * The advantage is the size of the APK is reduced by about 4MB. 79 | * Upload all the APKs to the Play Store and people will download 80 | * the correct one based on the CPU architecture of their device. 81 | */ 82 | def enableSeparateBuildPerCPUArchitecture = false 83 | 84 | /** 85 | * Run Proguard to shrink the Java bytecode in release builds. 86 | */ 87 | def enableProguardInReleaseBuilds = false 88 | 89 | android { 90 | compileSdkVersion 23 91 | buildToolsVersion "23.0.1" 92 | 93 | defaultConfig { 94 | applicationId "com.testpalette" 95 | minSdkVersion 16 96 | targetSdkVersion 22 97 | versionCode 1 98 | versionName "1.0" 99 | ndk { 100 | abiFilters "armeabi-v7a", "x86" 101 | } 102 | } 103 | splits { 104 | abi { 105 | reset() 106 | enable enableSeparateBuildPerCPUArchitecture 107 | universalApk false // If true, also generate a universal APK 108 | include "armeabi-v7a", "x86" 109 | } 110 | } 111 | buildTypes { 112 | release { 113 | minifyEnabled enableProguardInReleaseBuilds 114 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" 115 | } 116 | } 117 | // applicationVariants are e.g. debug, release 118 | applicationVariants.all { variant -> 119 | variant.outputs.each { output -> 120 | // For each separate APK per architecture, set a unique version code as described here: 121 | // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits 122 | def versionCodes = ["armeabi-v7a":1, "x86":2] 123 | def abi = output.getFilter(OutputFile.ABI) 124 | if (abi != null) { // null for the universal-debug, universal-release variants 125 | output.versionCodeOverride = 126 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode 127 | } 128 | } 129 | } 130 | } 131 | 132 | dependencies { 133 | compile project(':react-native-vector-icons') 134 | compile project(':react-native-material-palette') 135 | compile fileTree(dir: "libs", include: ["*.jar"]) 136 | compile "com.android.support:appcompat-v7:25.0.1" 137 | compile "com.facebook.react:react-native:+" // From node_modules 138 | } 139 | 140 | // Run this once to be able to run the application with BUCK 141 | // puts all compile dependencies into folder libs for BUCK to use 142 | task copyDownloadableDepsToLibs(type: Copy) { 143 | from configurations.compile 144 | into 'libs' 145 | } 146 | -------------------------------------------------------------------------------- /src/__tests__/withPalette.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { StyleSheet } from 'react-native'; 4 | import withPalette from '../withPalette'; 5 | import { KEY } from '../PaletteProvider'; 6 | 7 | function getTestComponent() { 8 | let firstRender = true; 9 | return class Test extends React.Component { 10 | render() { 11 | if (firstRender) { 12 | this.props.onFirstRender(this.props.palette, this.props.style); 13 | firstRender = false; 14 | } else { 15 | this.props.onSecondRender(this.props.palette, this.props.style); 16 | } 17 | 18 | return null; 19 | } 20 | }; 21 | } 22 | 23 | function createContext(subscribeFn) { 24 | return { 25 | [KEY]: subscribeFn, 26 | }; 27 | } 28 | 29 | const paletteMock = { 30 | vibrant: { 31 | population: 1, 32 | color: '#ffffff', 33 | bodyTextColor: '#000000', 34 | titleTextColor: '#000000', 35 | }, 36 | }; 37 | 38 | describe('withPalette', () => { 39 | it('should unsubscribe on unmount', () => { 40 | const unsubscribe = jest.fn(); 41 | const PaletteTest = withPalette()(getTestComponent()); 42 | const wrapper = shallow( 43 | {}} onSecondRender={() => {}} />, 44 | { 45 | context: createContext(() => unsubscribe), 46 | }, 47 | ); 48 | 49 | wrapper.shallow(); 50 | wrapper.unmount(); 51 | expect(unsubscribe).toHaveBeenCalledTimes(1); 52 | }); 53 | 54 | it('should try to unsubscribe on unmount', () => { 55 | const unsubscribe = null; 56 | const PaletteTest = withPalette()(getTestComponent()); 57 | const wrapper = shallow( 58 | {}} onSecondRender={() => {}} />, 59 | { 60 | context: createContext(() => unsubscribe), 61 | }, 62 | ); 63 | expect(() => { 64 | wrapper.shallow(); 65 | wrapper.unmount(); 66 | }).not.toThrowError(); 67 | }); 68 | 69 | it('should pass a palette prop', () => { 70 | let subscriber = jest.fn(); 71 | function onFirstRender(palette, style) { 72 | expect(palette).toEqual({}); 73 | expect(style).toEqual([undefined, {}]); 74 | } 75 | function onSecondRender(palette, style) { 76 | expect(palette).toEqual(paletteMock); 77 | expect(style).toEqual([undefined, {}]); 78 | } 79 | 80 | const PaletteTest = withPalette()(getTestComponent()); 81 | const wrapper = shallow( 82 | , 86 | { 87 | context: createContext(fn => { 88 | subscriber = fn; 89 | }), 90 | }, 91 | ); 92 | 93 | wrapper.shallow(); 94 | subscriber({ palette: paletteMock, globalDefaults: null }); 95 | wrapper.update(); 96 | }); 97 | 98 | it('should not update state if data is empty', () => { 99 | let subscriber = jest.fn(); 100 | 101 | const PaletteTest = withPalette()(getTestComponent()); 102 | const wrapper = shallow( 103 | {}} onSecondRender={() => {}} />, 104 | { 105 | context: createContext(fn => { 106 | subscriber = fn; 107 | }), 108 | }, 109 | ); 110 | 111 | wrapper.shallow(); 112 | expect(wrapper.state()).toEqual({ palette: null, globalDefaults: null }); 113 | subscriber(null); 114 | wrapper.update(); 115 | expect(wrapper.state()).toEqual({ palette: null, globalDefaults: null }); 116 | }); 117 | 118 | it('should create styles from palette using `mapPaletteToStyle`', () => { 119 | let subscriber = jest.fn(); 120 | function onFirstRender(palette, style) { 121 | expect(palette).toEqual({}); 122 | expect(style).toEqual([{ fontSize: '14px' }, {}]); 123 | } 124 | function onSecondRender(palette, style) { 125 | expect(palette).toEqual(paletteMock); 126 | expect(style).toEqual([{ fontSize: '14px' }, { color: '#ffffff' }]); 127 | } 128 | 129 | const PaletteTest = withPalette(palette => ({ 130 | color: palette.vibrant && palette.vibrant.color, 131 | }))(getTestComponent()); 132 | const wrapper = shallow( 133 | , 138 | { 139 | context: createContext(fn => { 140 | subscriber = fn; 141 | }), 142 | }, 143 | ); 144 | 145 | wrapper.shallow(); 146 | subscriber({ palette: paletteMock, globalDefaults: null }); 147 | wrapper.shallow(); 148 | }); 149 | 150 | it('should merge palette with local defaults and style prop', () => { 151 | const localDefaults = { 152 | lightVibrant: { 153 | color: '#a4a4a4', 154 | bodyTextColor: '#000000', 155 | titleTextColor: '#000000', 156 | }, 157 | }; 158 | let subscriber = jest.fn(); 159 | function onFirstRender(palette, style) { 160 | expect(palette).toEqual({ 161 | lightVibrant: { ...localDefaults.lightVibrant, population: 0 }, 162 | }); 163 | expect(StyleSheet.flatten(style)).toEqual({ fontSize: '14px' }); 164 | } 165 | function onSecondRender(palette, style) { 166 | expect(palette).toEqual({ 167 | ...paletteMock, 168 | lightVibrant: { population: 0, ...localDefaults.lightVibrant }, 169 | }); 170 | expect(StyleSheet.flatten(style)).toEqual({ 171 | fontSize: '14px', 172 | color: localDefaults.lightVibrant.color, 173 | }); 174 | } 175 | 176 | const PaletteTest = withPalette( 177 | palette => ({ 178 | color: palette.lightVibrant && palette.lightVibrant.color, 179 | backgroundColor: palette.muted && palette.muted.color, 180 | }), 181 | localDefaults, 182 | )(getTestComponent()); 183 | const wrapper = shallow( 184 | , 189 | { 190 | context: createContext(fn => { 191 | subscriber = fn; 192 | }), 193 | }, 194 | ); 195 | 196 | wrapper.shallow(); 197 | subscriber({ 198 | palette: paletteMock, 199 | }); 200 | wrapper.shallow(); 201 | }); 202 | 203 | it('should throw error if the Provider subscribe function was not found in context', () => { 204 | const PaletteTest = withPalette()(getTestComponent()); 205 | expect(() => { 206 | shallow( 207 | {}} onSecondRender={() => {}} />, 208 | ); 209 | }).toThrowError(); 210 | }); 211 | }); 212 | -------------------------------------------------------------------------------- /src/__tests__/createMaterialPalette.test.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/first */ 2 | jest.mock('react-native', () => ({ 3 | NativeModules: { 4 | MaterialPalette: { 5 | createMaterialPalette: jest.fn(), 6 | }, 7 | }, 8 | })); 9 | jest.mock('react-native/Libraries/Image/resolveAssetSource', () => jest.fn()); 10 | jest.mock('../utils/validateCreatePalette', () => jest.fn()); 11 | 12 | import { NativeModules } from 'react-native'; 13 | import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource'; 14 | import createPalette from '../createMaterialPalette'; 15 | import validateCreatePalette from '../utils/validateCreatePalette'; 16 | import { 17 | defaultLightSwatch, 18 | defaultOptions, 19 | defaultSwatches, 20 | } from '../constants/defaults'; 21 | 22 | describe('createMaterialPalette', () => { 23 | beforeEach(() => { 24 | NativeModules.MaterialPalette.createMaterialPalette.mockReset(); 25 | resolveAssetSource.mockReset(); 26 | }); 27 | 28 | it('should create palette with default options if no options are provided', () => { 29 | NativeModules.MaterialPalette.createMaterialPalette.mockImplementation(() => 30 | Promise.resolve({ 31 | vibrant: defaultLightSwatch, 32 | }), 33 | ); 34 | resolveAssetSource.mockImplementation(() => `file://asset.jpg`); 35 | 36 | return createPalette(0).then(() => { 37 | expect( 38 | NativeModules.MaterialPalette.createMaterialPalette, 39 | ).toHaveBeenCalledWith(`file://asset.jpg`, { 40 | type: ['vibrant'], 41 | region: defaultOptions.region, 42 | maximumColorCount: defaultOptions.maximumColorCount, 43 | }); 44 | }); 45 | }); 46 | 47 | it('should call all the proper methods and provide null for the profiles not available', () => { 48 | NativeModules.MaterialPalette.createMaterialPalette.mockImplementation(() => 49 | Promise.resolve({ 50 | lightVibrant: defaultLightSwatch, 51 | darkMuted: { 52 | color: 'green', 53 | population: 20, 54 | bodyTextColor: 'red', 55 | titleTextColor: 'red', 56 | }, 57 | }), 58 | ); 59 | resolveAssetSource.mockImplementation(() => `file://asset.jpg`); 60 | 61 | return createPalette(0, { 62 | type: ['lightVibrant', 'darkMuted'], 63 | }).then(palette => { 64 | expect(validateCreatePalette).toHaveBeenCalledWith(0, { 65 | type: ['lightVibrant', 'darkMuted'], 66 | }); 67 | expect(resolveAssetSource).toHaveBeenCalledWith(0); 68 | expect( 69 | NativeModules.MaterialPalette.createMaterialPalette, 70 | ).toHaveBeenCalledWith(`file://asset.jpg`, { 71 | type: ['lightVibrant', 'darkMuted'], 72 | region: defaultOptions.region, 73 | maximumColorCount: defaultOptions.maximumColorCount, 74 | }); 75 | expect(palette.lightVibrant).toEqual(defaultSwatches.lightVibrant); 76 | expect(palette.darkMuted).toEqual({ 77 | color: 'green', 78 | population: 20, 79 | bodyTextColor: 'red', 80 | titleTextColor: 'red', 81 | }); 82 | }); 83 | }); 84 | 85 | describe('Merge with defaults', () => { 86 | it('should merge palette with globals when custom defaults are not provided, for the types specified', async () => { 87 | NativeModules.MaterialPalette.createMaterialPalette.mockImplementation( 88 | () => 89 | Promise.resolve({ 90 | vibrant: { 91 | color: 'green', 92 | bodyTextColor: 'red', 93 | titleTextColor: 'red', 94 | population: 20, 95 | }, 96 | muted: null, 97 | }), 98 | ); 99 | 100 | expect( 101 | await createPalette(0, { types: ['vibrant', 'muted'] }, undefined), 102 | ).toEqual({ 103 | vibrant: { 104 | color: 'green', 105 | bodyTextColor: 'red', 106 | titleTextColor: 'red', 107 | population: 20, 108 | }, 109 | muted: defaultSwatches.muted, 110 | }); 111 | }); 112 | 113 | it('should merge palette with globals when custom defaults contain a wrong profile, for the types specified', async () => { 114 | NativeModules.MaterialPalette.createMaterialPalette.mockImplementation( 115 | () => 116 | Promise.resolve({ 117 | vibrant: defaultSwatches.vibrant, 118 | }), 119 | ); 120 | 121 | expect( 122 | await createPalette( 123 | 0, 124 | { type: ['vibrant', 'muted'] }, 125 | { darkMuted: null }, 126 | ), 127 | ).toEqual({ 128 | vibrant: defaultSwatches.vibrant, 129 | darkMuted: defaultSwatches.darkMuted, 130 | }); 131 | }); 132 | 133 | it('should merge palette with both globals and custom defaults, for the types specified', async () => { 134 | NativeModules.MaterialPalette.createMaterialPalette.mockImplementation( 135 | () => 136 | Promise.resolve({ 137 | muted: { 138 | color: 'green', 139 | bodyTextColor: 'red', 140 | titleTextColor: 'red', 141 | population: 20, 142 | }, 143 | darkMuted: { 144 | color: 'yellow', 145 | bodyTextColor: 'blue', 146 | titleTextColor: 'blue', 147 | population: 40, 148 | }, 149 | lightVibrant: null, 150 | darkVibrant: null, 151 | }), 152 | ); 153 | 154 | expect( 155 | await createPalette( 156 | 0, 157 | { type: ['muted', 'darkMuted', 'lightVibrant', 'darkVibrant'] }, 158 | { 159 | darkMuted: { 160 | color: 'orange', 161 | bodyTextColor: 'purple', 162 | titleTextColor: 'purple', 163 | }, 164 | lightVibrant: { 165 | color: 'orange', 166 | bodyTextColor: 'purple', 167 | titleTextColor: 'purple', 168 | }, 169 | }, 170 | ), 171 | ).toEqual({ 172 | muted: { 173 | color: 'green', 174 | bodyTextColor: 'red', 175 | titleTextColor: 'red', 176 | population: 20, 177 | }, 178 | darkMuted: { 179 | color: 'yellow', 180 | bodyTextColor: 'blue', 181 | titleTextColor: 'blue', 182 | population: 40, 183 | }, 184 | lightVibrant: { 185 | color: 'orange', 186 | bodyTextColor: 'purple', 187 | titleTextColor: 'purple', 188 | population: 0, 189 | }, 190 | darkVibrant: defaultSwatches.darkVibrant, 191 | }); 192 | }); 193 | }); 194 | }); 195 | -------------------------------------------------------------------------------- /android/src/main/java/io/callstack/react_native_material_palette/MaterialPaletteModule.kt: -------------------------------------------------------------------------------- 1 | package io.callstack.react_native_material_palette 2 | 3 | import android.graphics.Bitmap 4 | import android.graphics.BitmapFactory 5 | import android.net.Uri 6 | import android.provider.MediaStore 7 | import android.support.v7.graphics.Palette 8 | import android.support.v7.graphics.Target 9 | import com.facebook.common.executors.CallerThreadExecutor 10 | import com.facebook.common.internal.Closeables 11 | import com.facebook.common.references.CloseableReference 12 | import com.facebook.datasource.BaseDataSubscriber 13 | import com.facebook.datasource.DataSource 14 | import com.facebook.drawee.backends.pipeline.Fresco 15 | import com.facebook.imagepipeline.common.ImageDecodeOptions 16 | import com.facebook.imagepipeline.memory.PooledByteBuffer 17 | import com.facebook.imagepipeline.memory.PooledByteBufferInputStream 18 | import com.facebook.imagepipeline.request.ImageRequest.RequestLevel 19 | import com.facebook.imagepipeline.request.ImageRequestBuilder 20 | import com.facebook.react.bridge.* 21 | import java.io.IOException 22 | 23 | class MaterialPaletteModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) { 24 | 25 | private val REACT_NAME = "MaterialPalette" 26 | private val ERR_INVALID_URI = "ERR_INVALID_URI" 27 | private val ERR_DOWNLOAD = "ERR_DOWNLOAD" 28 | 29 | override fun getName(): String { 30 | return REACT_NAME 31 | } 32 | 33 | private lateinit var palette: Palette 34 | 35 | fun throwExceptionWrongColor() { 36 | throw RuntimeException("The color provided is not valid. It must be one of types 'muted', " + 37 | "'vibrant', 'darkMuted', 'darkVibrant', 'lightMuted' or 'lightVibrant") 38 | } 39 | 40 | fun getHexColor(rgbInt: Int): String = String.format("#%06X", 0xFFFFFF and rgbInt) 41 | 42 | fun targetMap(target: String): Target? { 43 | return when(target) { 44 | "muted" -> Target.MUTED 45 | "vibrant" -> Target.VIBRANT 46 | "darkMuted" -> Target.DARK_MUTED 47 | "darkVibrant" -> Target.DARK_VIBRANT 48 | "lightMuted" -> Target.LIGHT_MUTED 49 | "lightVibrant" -> Target.LIGHT_VIBRANT 50 | else -> { 51 | null 52 | } 53 | } 54 | } 55 | 56 | fun getSwatchProperties(swatch: Palette.Swatch?): WritableMap { 57 | val swatchMap = Arguments.createMap() 58 | val population = swatch?.population ?: 0 59 | val bodyTextColor = swatch?.bodyTextColor ?: 0 60 | val titleTextColor = swatch?.titleTextColor ?: 0 61 | val rgbColor = swatch?.rgb ?: 0 62 | 63 | swatchMap.putInt("population", population) 64 | swatchMap.putString("color", getHexColor(rgbColor)) 65 | swatchMap.putString("bodyTextColor", getHexColor(bodyTextColor)) 66 | swatchMap.putString("titleTextColor", getHexColor(titleTextColor)) 67 | 68 | return swatchMap 69 | } 70 | 71 | fun getSwatch(color: String): WritableMap { 72 | var targetSwatch: Palette.Swatch? = Palette.Swatch(0, 0) 73 | when(color) { 74 | "muted" -> targetSwatch = palette.mutedSwatch 75 | "vibrant" -> targetSwatch = palette.vibrantSwatch 76 | "darkMuted" -> targetSwatch = palette.darkMutedSwatch 77 | "darkVibrant" -> targetSwatch = palette.darkVibrantSwatch 78 | "lightMuted" -> targetSwatch = palette.lightMutedSwatch 79 | "lightVibrant" -> targetSwatch = palette.lightVibrantSwatch 80 | else -> { 81 | throwExceptionWrongColor() 82 | } 83 | } 84 | return getSwatchProperties(targetSwatch) 85 | } 86 | 87 | fun getPalettesFromImage(image: Bitmap, options: ReadableMap, callback: (result: WritableMap) -> Unit) { 88 | val region = options.getMap("region") 89 | val top = region.getInt("top") 90 | val right = region.getInt("right") 91 | val bottom = region.getInt("bottom") 92 | val left = region.getInt("left") 93 | val maxColorCount = options.getInt("maximumColorCount") 94 | val types = options.getArray("type") 95 | 96 | var builder: Palette.Builder = Palette.from(image).maximumColorCount(maxColorCount) 97 | 98 | if (left != 0 || top != 0 || right != 0 || bottom != 0) { 99 | builder = builder.setRegion(left, top, right, bottom) 100 | } 101 | 102 | for (t in Array(types.size(), { i -> targetMap(types.getString(i))})) { 103 | if (t != null) { 104 | builder = builder.addTarget(t) 105 | } else { 106 | throwExceptionWrongColor() 107 | } 108 | } 109 | 110 | builder.generate({ p: Palette -> 111 | palette = p 112 | val returnMap = Arguments.createMap() 113 | 114 | val targets: Array = Array(types.size(), { i -> types.getString(i)}) 115 | for (t in targets) { 116 | returnMap.putMap(t, getSwatch(t)) 117 | } 118 | 119 | callback(returnMap) 120 | }) 121 | } 122 | 123 | @ReactMethod 124 | fun createMaterialPalette(source: ReadableMap, options: ReadableMap, promise: Promise) { 125 | val uri: Uri 126 | 127 | try { 128 | uri = Uri.parse(source.getString("uri")) 129 | } catch(error: IOException) { 130 | promise.reject(ERR_INVALID_URI, "The URI provided is not valid") 131 | return 132 | } 133 | 134 | if (uri.scheme == "http" || uri.scheme == "https") { 135 | val decodeOptions = ImageDecodeOptions.newBuilder() 136 | .build() 137 | val imageRequest = ImageRequestBuilder 138 | .newBuilderWithSource(uri) 139 | .setImageDecodeOptions(decodeOptions) 140 | .setLowestPermittedRequestLevel(RequestLevel.FULL_FETCH) 141 | .build() 142 | 143 | val imagePipeline = Fresco.getImagePipeline() 144 | val dataSource = imagePipeline.fetchEncodedImage(imageRequest, reactApplicationContext) 145 | 146 | val dataSubscriber = object: BaseDataSubscriber>() { 147 | override fun onNewResultImpl(dataSource: DataSource>) { 148 | if (!dataSource.isFinished) { 149 | return 150 | } 151 | 152 | val result = dataSource.result 153 | 154 | if (result == null) { 155 | promise.reject(ERR_DOWNLOAD, "Failed to download image") 156 | return 157 | } 158 | 159 | val inputStream = PooledByteBufferInputStream(result.get()) 160 | 161 | try { 162 | val bitmap = BitmapFactory.decodeStream(inputStream) 163 | getPalettesFromImage(bitmap, options, { 164 | result -> 165 | promise.resolve(result) 166 | }) 167 | } catch (e: Exception) { 168 | promise.reject(e) 169 | } finally { 170 | Closeables.closeQuietly(inputStream) 171 | } 172 | } 173 | 174 | override fun onFailureImpl(dataSource: DataSource>) { 175 | promise.reject(dataSource.failureCause) 176 | } 177 | } 178 | 179 | dataSource.subscribe(dataSubscriber, CallerThreadExecutor.getInstance()) 180 | } else { 181 | try { 182 | val bitmap = MediaStore.Images.Media.getBitmap(reactApplicationContext.contentResolver, uri) 183 | 184 | getPalettesFromImage(bitmap, options, { 185 | result -> 186 | promise.resolve(result) 187 | }) 188 | } catch (e: Exception) { 189 | promise.reject(e) 190 | } 191 | } 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /flow-typed/npm/babel-core_vx.x.x.js: -------------------------------------------------------------------------------- 1 | // flow-typed signature: ce2a7beb654f70fd719a757151ec4a14 2 | // flow-typed version: <>/babel-core_v^6.24.0/flow_v0.42.0 3 | 4 | /** 5 | * This is an autogenerated libdef stub for: 6 | * 7 | * 'babel-core' 8 | * 9 | * Fill this stub out by replacing all the `any` types. 10 | * 11 | * Once filled out, we encourage you to share your work with the 12 | * community by sending a pull request to: 13 | * https://github.com/flowtype/flow-typed 14 | */ 15 | 16 | declare module 'babel-core' { 17 | declare module.exports: any; 18 | } 19 | 20 | /** 21 | * We include stubs for each file inside this npm package in case you need to 22 | * require those files directly. Feel free to delete any files that aren't 23 | * needed. 24 | */ 25 | declare module 'babel-core/lib/api/browser' { 26 | declare module.exports: any; 27 | } 28 | 29 | declare module 'babel-core/lib/api/node' { 30 | declare module.exports: any; 31 | } 32 | 33 | declare module 'babel-core/lib/helpers/get-possible-plugin-names' { 34 | declare module.exports: any; 35 | } 36 | 37 | declare module 'babel-core/lib/helpers/get-possible-preset-names' { 38 | declare module.exports: any; 39 | } 40 | 41 | declare module 'babel-core/lib/helpers/merge' { 42 | declare module.exports: any; 43 | } 44 | 45 | declare module 'babel-core/lib/helpers/normalize-ast' { 46 | declare module.exports: any; 47 | } 48 | 49 | declare module 'babel-core/lib/helpers/resolve-from-possible-names' { 50 | declare module.exports: any; 51 | } 52 | 53 | declare module 'babel-core/lib/helpers/resolve-plugin' { 54 | declare module.exports: any; 55 | } 56 | 57 | declare module 'babel-core/lib/helpers/resolve-preset' { 58 | declare module.exports: any; 59 | } 60 | 61 | declare module 'babel-core/lib/helpers/resolve' { 62 | declare module.exports: any; 63 | } 64 | 65 | declare module 'babel-core/lib/store' { 66 | declare module.exports: any; 67 | } 68 | 69 | declare module 'babel-core/lib/tools/build-external-helpers' { 70 | declare module.exports: any; 71 | } 72 | 73 | declare module 'babel-core/lib/transformation/file/index' { 74 | declare module.exports: any; 75 | } 76 | 77 | declare module 'babel-core/lib/transformation/file/logger' { 78 | declare module.exports: any; 79 | } 80 | 81 | declare module 'babel-core/lib/transformation/file/metadata' { 82 | declare module.exports: any; 83 | } 84 | 85 | declare module 'babel-core/lib/transformation/file/options/build-config-chain' { 86 | declare module.exports: any; 87 | } 88 | 89 | declare module 'babel-core/lib/transformation/file/options/config' { 90 | declare module.exports: any; 91 | } 92 | 93 | declare module 'babel-core/lib/transformation/file/options/index' { 94 | declare module.exports: any; 95 | } 96 | 97 | declare module 'babel-core/lib/transformation/file/options/option-manager' { 98 | declare module.exports: any; 99 | } 100 | 101 | declare module 'babel-core/lib/transformation/file/options/parsers' { 102 | declare module.exports: any; 103 | } 104 | 105 | declare module 'babel-core/lib/transformation/file/options/removed' { 106 | declare module.exports: any; 107 | } 108 | 109 | declare module 'babel-core/lib/transformation/internal-plugins/block-hoist' { 110 | declare module.exports: any; 111 | } 112 | 113 | declare module 'babel-core/lib/transformation/internal-plugins/shadow-functions' { 114 | declare module.exports: any; 115 | } 116 | 117 | declare module 'babel-core/lib/transformation/pipeline' { 118 | declare module.exports: any; 119 | } 120 | 121 | declare module 'babel-core/lib/transformation/plugin-pass' { 122 | declare module.exports: any; 123 | } 124 | 125 | declare module 'babel-core/lib/transformation/plugin' { 126 | declare module.exports: any; 127 | } 128 | 129 | declare module 'babel-core/lib/util' { 130 | declare module.exports: any; 131 | } 132 | 133 | declare module 'babel-core/register' { 134 | declare module.exports: any; 135 | } 136 | 137 | // Filename aliases 138 | declare module 'babel-core/index' { 139 | declare module.exports: $Exports<'babel-core'>; 140 | } 141 | declare module 'babel-core/index.js' { 142 | declare module.exports: $Exports<'babel-core'>; 143 | } 144 | declare module 'babel-core/lib/api/browser.js' { 145 | declare module.exports: $Exports<'babel-core/lib/api/browser'>; 146 | } 147 | declare module 'babel-core/lib/api/node.js' { 148 | declare module.exports: $Exports<'babel-core/lib/api/node'>; 149 | } 150 | declare module 'babel-core/lib/helpers/get-possible-plugin-names.js' { 151 | declare module.exports: $Exports<'babel-core/lib/helpers/get-possible-plugin-names'>; 152 | } 153 | declare module 'babel-core/lib/helpers/get-possible-preset-names.js' { 154 | declare module.exports: $Exports<'babel-core/lib/helpers/get-possible-preset-names'>; 155 | } 156 | declare module 'babel-core/lib/helpers/merge.js' { 157 | declare module.exports: $Exports<'babel-core/lib/helpers/merge'>; 158 | } 159 | declare module 'babel-core/lib/helpers/normalize-ast.js' { 160 | declare module.exports: $Exports<'babel-core/lib/helpers/normalize-ast'>; 161 | } 162 | declare module 'babel-core/lib/helpers/resolve-from-possible-names.js' { 163 | declare module.exports: $Exports<'babel-core/lib/helpers/resolve-from-possible-names'>; 164 | } 165 | declare module 'babel-core/lib/helpers/resolve-plugin.js' { 166 | declare module.exports: $Exports<'babel-core/lib/helpers/resolve-plugin'>; 167 | } 168 | declare module 'babel-core/lib/helpers/resolve-preset.js' { 169 | declare module.exports: $Exports<'babel-core/lib/helpers/resolve-preset'>; 170 | } 171 | declare module 'babel-core/lib/helpers/resolve.js' { 172 | declare module.exports: $Exports<'babel-core/lib/helpers/resolve'>; 173 | } 174 | declare module 'babel-core/lib/store.js' { 175 | declare module.exports: $Exports<'babel-core/lib/store'>; 176 | } 177 | declare module 'babel-core/lib/tools/build-external-helpers.js' { 178 | declare module.exports: $Exports<'babel-core/lib/tools/build-external-helpers'>; 179 | } 180 | declare module 'babel-core/lib/transformation/file/index.js' { 181 | declare module.exports: $Exports<'babel-core/lib/transformation/file/index'>; 182 | } 183 | declare module 'babel-core/lib/transformation/file/logger.js' { 184 | declare module.exports: $Exports<'babel-core/lib/transformation/file/logger'>; 185 | } 186 | declare module 'babel-core/lib/transformation/file/metadata.js' { 187 | declare module.exports: $Exports<'babel-core/lib/transformation/file/metadata'>; 188 | } 189 | declare module 'babel-core/lib/transformation/file/options/build-config-chain.js' { 190 | declare module.exports: $Exports<'babel-core/lib/transformation/file/options/build-config-chain'>; 191 | } 192 | declare module 'babel-core/lib/transformation/file/options/config.js' { 193 | declare module.exports: $Exports<'babel-core/lib/transformation/file/options/config'>; 194 | } 195 | declare module 'babel-core/lib/transformation/file/options/index.js' { 196 | declare module.exports: $Exports<'babel-core/lib/transformation/file/options/index'>; 197 | } 198 | declare module 'babel-core/lib/transformation/file/options/option-manager.js' { 199 | declare module.exports: $Exports<'babel-core/lib/transformation/file/options/option-manager'>; 200 | } 201 | declare module 'babel-core/lib/transformation/file/options/parsers.js' { 202 | declare module.exports: $Exports<'babel-core/lib/transformation/file/options/parsers'>; 203 | } 204 | declare module 'babel-core/lib/transformation/file/options/removed.js' { 205 | declare module.exports: $Exports<'babel-core/lib/transformation/file/options/removed'>; 206 | } 207 | declare module 'babel-core/lib/transformation/internal-plugins/block-hoist.js' { 208 | declare module.exports: $Exports<'babel-core/lib/transformation/internal-plugins/block-hoist'>; 209 | } 210 | declare module 'babel-core/lib/transformation/internal-plugins/shadow-functions.js' { 211 | declare module.exports: $Exports<'babel-core/lib/transformation/internal-plugins/shadow-functions'>; 212 | } 213 | declare module 'babel-core/lib/transformation/pipeline.js' { 214 | declare module.exports: $Exports<'babel-core/lib/transformation/pipeline'>; 215 | } 216 | declare module 'babel-core/lib/transformation/plugin-pass.js' { 217 | declare module.exports: $Exports<'babel-core/lib/transformation/plugin-pass'>; 218 | } 219 | declare module 'babel-core/lib/transformation/plugin.js' { 220 | declare module.exports: $Exports<'babel-core/lib/transformation/plugin'>; 221 | } 222 | declare module 'babel-core/lib/util.js' { 223 | declare module.exports: $Exports<'babel-core/lib/util'>; 224 | } 225 | declare module 'babel-core/register.js' { 226 | declare module.exports: $Exports<'babel-core/register'>; 227 | } 228 | -------------------------------------------------------------------------------- /docs/API.md: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | ## `createMaterialPalette()` 4 | 5 | ```js 6 | createMaterialPalette( 7 | image: Image, 8 | options?: Options, 9 | defaults?: PaletteDefaults, 10 | ): Promise 11 | 12 | // Number is the opaque type returned by require('./image.jpg') 13 | type Image = number | { uri: string } 14 | 15 | type Options = { 16 | region?: { top: number, left: number, bottom: number, right: number }, 17 | maximumColorCount?: number = 16, 18 | type?: ColorProfile | Array = 'vibrant', 19 | } 20 | 21 | type PaletteDefaults = { 22 | [key: ColorProfile]: DefaultSwatch, 23 | }; 24 | 25 | type PaletteInstance = { 26 | [key: ColorProfile]: ?Swatch, 27 | }; 28 | 29 | type Swatch = { 30 | population: number, // number of pixels 31 | color: string, // color for swatch, 32 | bodyTextColor: string, // appropriate color to use for any 'body' text 33 | titleTextColor: string, // appropriate color to use for any 'title' text 34 | } 35 | 36 | type ColorProfile = 37 | | 'muted' 38 | | 'vibrant' 39 | | 'darkMuted' 40 | | 'darkVibrant' 41 | | 'lightMuted' 42 | | 'lightVibrant'; 43 | 44 | type DefaultSwatch = { 45 | color: string, 46 | bodyTextColor: string, 47 | titleTextColor: string, 48 | }; 49 | 50 | ``` 51 | 52 | ### Description 53 | `createMaterialPalette` is a function that returns a Promise that when resolved, will provide a palette instance with color information about the image provided. 54 | 55 | ### Arguments 56 | * `image: Image` (__required__) - Local image to create palette from (`require('path/to/image')`) or object with remote URI adress from which the image can be downloaded (`{ uri: 'http://some-domain.ext/image.png' }`). 57 | 58 | * `options?: Options` (optional) - Options for palette creation. 59 | * `region` - Indicates what area of the bitmap the builder uses when creating the palette. 60 | * `maximumColorCount` - Sets the maximum number of colors in your palette. The default value is 16, and the optimal value depends on the source image. For landscapes, optimal values range from 8-16 while pictures with faces usually have values that fall between 24-32. 61 | * `type` - Color profiles we aim to target. Defaults to `vibrant` 62 | 63 | 64 | * `defaults?: PaletteDefaults` (optional) - Defaults which will be used, if the specific color profile is not found. 65 | 66 | ### Examples 67 | 68 | #### Creating a palette from a network resource, with 'vibrant' color profile, maximumColorCount = 16 and the whole region of the image (default behaviour) 69 | ```js 70 | import { createMaterialPalette } from "react-native-material-palette"; 71 | 72 | const palette = await createMaterialPalette({ uri: 'http://dummySite/images/yummy.jpg' }); 73 | ``` 74 | 75 | #### Creating a palette from an internal image asset, with 'muted' and 'lightVibrant' color profiles, maximumColorCount = 32 and a specific region of the image 76 | ```js 77 | import { createMaterialPalette } from "react-native-material-palette"; 78 | 79 | const palette = await createMaterialPalette(require('./assets/image.jpg'), { 80 | region: { top: 0, left: 0, bottom: 50, right: 50}, 81 | maximumColorCount: 32, 82 | type: ['muted', 'lightVibrant'], 83 | }); 84 | ``` 85 | 86 | #### Creating a palette from an internal image asset and custom defaults 87 | ```js 88 | import { createMaterialPalette } from "react-native-material-palette"; 89 | 90 | const palette = await createMaterialPalette( 91 | require('./assets/image.jpg'), 92 | { 93 | type: ['lightVibrant', 'darkMuted'], 94 | }, 95 | { 96 | darkMuted: { 97 | color: '#000000', 98 | bodyTextColor: '#B2B2B2', 99 | titleTextColor: '#F4F4F4', 100 | }, 101 | }, 102 | ); 103 | ``` 104 | 105 | ## `MaterialPaletteProvider` 106 | 107 | ### Example of usage: 108 | ```javascript 109 | import React from 'react'; 110 | import { View } from 'react-native'; 111 | import { MaterialPaletteProvider } from 'react-native-material-palette'; 112 | 113 | import PaletteAwareComponent from './PaletteAwareComponent'; 114 | 115 | class App extends React.Component { 116 | render() { 117 | return ( 118 | 124 | 125 | 126 | 127 | 128 | ); 129 | } 130 | } 131 | ``` 132 | 133 | ### Description 134 | `MaterialPaletteProvider` is a component, which handles palette creation and provides the access to the palette instance for _connected_ components (via `withMaterialPalette`) using context. Ideally, `MaterialPaletteProvider` should be placed at the top of components tree, so that all nested components can _connect_ to it. By default it will render `null` when the palette is being created unless either `forceRender` or `LoaderComponent` is specified. 135 | 136 | The concept is very similar to `Provider` component from `react-redux`. 137 | 138 | ### Props 139 | * `image: Image` (__required__) - same as `image` in `createMaterialPalette` function. 140 | 141 | * `options?: Options` (optional) - same as `options` in `createMaterialPalette` function. 142 | 143 | * `defaults?: PaletteDefaults` (optional) - Global defaults which will be propagated to each _connected_ component, alongside with palette instance, which will be used, if the specific color profile is not found. 144 | 145 | * `forceRender?: boolean` (optional) - Forces to render the children regardless whether the palette is being created. __Does not take effect if `LoaderComponent` is specified!__ 146 | 147 | * `LoaderComponent: React$Component<*, *, *> | ((...args: *) => React$Element<*>)` (optional) - If specified, will render the passed component while waiting for palette to be created: 148 | * `` - will render `SpinnerComponent`, 149 | * ` Loading)}>` - will render `Text` component with _Loading_. 150 | 151 | * `onError?: (error: Error) => void` (optional) - Error handler, called if the palette failed to create. 152 | 153 | * `onFinish?: (palette: PaletteInstance) => void` - (optional) - Finish handler, called when the palette is created, but before it gets propagated to _connected_ components - use it, if you want to mutate the palette instance. If some profiles are not available for the provided image, the defaults will apply, taking precedence the ones you passed to the component as `this.props.defaults`. 154 | 155 | * `children: React$Element<*>`, - (__required__) - Children elements - the rest of your app's component tree. 156 | 157 | -------------- 158 | 159 | ## `withMaterialPalette` 160 | 161 | ### Example of usage: 162 | ```javascript 163 | import React from 'react'; 164 | import { Text } from 'react-native'; 165 | import { withMaterialPalette } from 'react-native-material-palette'; 166 | 167 | export default withMaterialPalette( 168 | palette => ({ 169 | backgroundColor: palette.vibrant.color, 170 | color: palette.vibrant.bodyTextColor, 171 | }) 172 | )(Text); 173 | ``` 174 | 175 | ### Description 176 | `withMaterialPalette` is a function that returns a Higher Order Component (HOC), which allows to seamlessly _connect_ to the `MaterialPaletteProvider` and get the palette instance via context. 177 | 178 | Under the hood, it is a function factory (it returns a new function), similarily to `connect` from `react-redux`, to allow to be used as a decorator: 179 | ```javascript 180 | @withMaterialPalette( 181 | palette => ({ 182 | backgroundColor: palette.vibrant.color, 183 | color: palette.vibrant.bodyTextColor, 184 | }) 185 | ) 186 | export default class MyComponent extends React.Component { 187 | // ... 188 | }; 189 | ``` 190 | 191 | `withMaterialPalette` passes palette instance as a `palette` prop to the _connected_ component, so that you can directly use it and apply a custom logic. However, for the most common use case, which is applying colors to properties in `style`, it accepts `mapPaletteToStyles` function as a first argument. 192 | 193 | `mapPaletteToStyles` takes single argument - palette instance and must return a valid `style` object. It will be later passed (and optionaly merged with other `style` prop) to the _connected_ component. 194 | 195 | ### Syntax 196 | ```javascript 197 | function withMaterialPalette( 198 | mapPaletteToStyle: ?(palette: PaletteInstance) => { 199 | [key: string]: mixed, 200 | }, 201 | localDefaults?: PaletteDefaults 202 | ) => (WrappedComponent: ReactClass<*>) => React$Component<*, *, *>; 203 | ``` 204 | 205 | ### Arguments 206 | * `mapPaletteToStyle?: (palette: PaletteInstance) => { [key: string]: mixed }` - (optional) - Function to create `style` object with colors from palette applied to properties, which will be passed to the _connected_ component as a `style` prop. The created object will be merged with other `style` prop, if passed to the _connected_ component: 207 | ```javascript 208 | const PaletteView = withMaterialPalette( 209 | palette => ({ backgroundColor: palette.vibrant.color }) 210 | )(View); 211 | 212 | // later ... 213 | 214 | 215 | // PaletteView will contain both style objects: 216 | // [{ flex: 1 }, { backgroundColor: '#3792dd' }] 217 | ``` 218 | 219 | * `localDefaults?: PaletteDefaults` - (optional) - Defaults to apply, if the sepcific color profile was not found, which are local to the component, meaning they overwrites global defaults from `MaterialPaletteProvider` and are not shared: 220 | ```javascript 221 | const PaletteView = withMaterialPalette( 222 | palette => ({ backgroundColor: palette.vibrant.color }), 223 | { 224 | vibrant: { 225 | color: '#18b247', 226 | bodyTextColor: '#ffffff', 227 | titleTextColor: '#ffffff', 228 | }, 229 | } 230 | )(View); 231 | 232 | // later ... 233 | 234 | 241 | 242 | {/* 243 | PaletteView will have the color applied from local defaults: 244 | [{ backgroundColor: '#18b247' }] 245 | */} 246 | 247 | ``` 248 | 249 | ### Examples 250 | ```javascript 251 | // Using multiple color profiles 252 | const PaletteView = withMaterialPalette( 253 | ({ vibrant, muted }) => ({ 254 | backgroundColor: vibrant.color, 255 | borderColor: muted.color, 256 | }) 257 | )(View); 258 | 259 | // Pass color to the Button component 260 | const PaletteButton = withMaterialPalette()(props => { 261 | const { palette, ...rest } = props; 262 | return