From 4205319fcea727e7b6844d045c52c121b947a737 Mon Sep 17 00:00:00 2001 From: Raul Gomez Acuna Date: Mon, 26 Jun 2017 17:34:54 +0200 Subject: [PATCH 1/2] Background native component --- .../MaterialPalettePackage.kt | 11 +-- .../PaletteBackgroundManager.kt | 49 ++++++++++++++ example/index.android.js | 67 ++++--------------- example/package.json | 3 +- src/Background.js | 28 ++++++-- 5 files changed, 93 insertions(+), 65 deletions(-) create mode 100644 android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt diff --git a/android/src/main/java/io/callstack/react_native_material_palette/MaterialPalettePackage.kt b/android/src/main/java/io/callstack/react_native_material_palette/MaterialPalettePackage.kt index 222d35a..ae65950 100644 --- a/android/src/main/java/io/callstack/react_native_material_palette/MaterialPalettePackage.kt +++ b/android/src/main/java/io/callstack/react_native_material_palette/MaterialPalettePackage.kt @@ -1,13 +1,12 @@ package io.callstack.react_native_material_palette -import android.view.View import com.facebook.react.ReactPackage import com.facebook.react.bridge.JavaScriptModule import com.facebook.react.bridge.NativeModule import com.facebook.react.bridge.ReactApplicationContext -import com.facebook.react.uimanager.ReactShadowNode import com.facebook.react.uimanager.ViewManager import java.util.* +import java.util.Arrays class MaterialPalettePackage : ReactPackage { @@ -16,7 +15,11 @@ class MaterialPalettePackage : ReactPackage { override fun createNativeModules(reactContext: ReactApplicationContext): MutableList = mutableListOf(MaterialPaletteModule(reactContext)) - override fun createViewManagers(reactContext: ReactApplicationContext?): - MutableList> = Collections.emptyList() + override fun createViewManagers( + reactContext: ReactApplicationContext): List> { + return Arrays.asList>( + PaletteBackgroundManager() + ) + } } diff --git a/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt b/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt new file mode 100644 index 0000000..dfe7dd0 --- /dev/null +++ b/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt @@ -0,0 +1,49 @@ +package io.callstack.react_native_material_palette + +import android.graphics.Bitmap +import android.graphics.BitmapFactory +import android.net.Uri +import android.provider.MediaStore +import android.support.v7.graphics.Palette +import com.facebook.react.bridge.ReadableMap +import com.facebook.react.uimanager.SimpleViewManager +import com.facebook.react.uimanager.ThemedReactContext +import com.facebook.react.views.view.ReactViewGroup +import com.facebook.react.uimanager.annotations.ReactProp +import java.io.IOException +import java.net.URL + +class PaletteBackgroundManager : SimpleViewManager() { + + private val REACT_CLASS = "PaletteBackground" + private lateinit var ctx: ThemedReactContext + private lateinit var palette: Palette + + override fun createViewInstance(context: ThemedReactContext): ReactViewGroup { + ctx = context + return ReactViewGroup(context) + } + + override fun getName(): String { + return REACT_CLASS + } + + @ReactProp(name = "source") + fun setSource(view: ReactViewGroup, source: ReadableMap) { + val bitmap: Bitmap + val uri = source.getString("uri") + try { + if (uri.contains("http")) { + val url = URL(uri) + // TODO handle network error in case of invalid image + bitmap = BitmapFactory.decodeStream(url.openConnection().getInputStream()) + } else { + bitmap = MediaStore.Images.Media.getBitmap(ctx.contentResolver, Uri.parse(uri)) + } + palette = Palette.from(bitmap).generate() + view.backgroundColor = palette.getVibrantColor(16777215) + } catch(error: IOException) { + throw IOException("The URI provided is not an image or the path is incorrect") + } + } +} diff --git a/example/index.android.js b/example/index.android.js index 37e6f12..0b532b8 100644 --- a/example/index.android.js +++ b/example/index.android.js @@ -4,67 +4,26 @@ * @flow */ -import React, { Component } from 'react'; -import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native'; - +import React from 'react'; +import { AppRegistry, StyleSheet, View } from 'react-native'; import MaterialPalette from 'react-native-material-palette'; -export default class TestPalette extends Component { - state = { - isLoading: true, - palette: null, - }; - - async componentDidMount() { - const palette = await MaterialPalette.create( - require('./assets/wroclaw.jpg'), // eslint-disable-line global-require - { - types: ['lightMuted', 'darkVibrant', 'vibrant'], - }, - ); - this.setState({ - palette, - isLoading: false, - }); - } - - render() { - const { palette, isLoading } = this.state; - return ( - - {isLoading - ? - Generating palette asynchronously... - - : - - {Object.keys(palette).map(profile => ( - - - {profile.toUpperCase()} - - - ))} - } - - ); - } +function TestPalette() { + return ( + + + + + ); } const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - backgroundColor: '#F5FCFF', + backgroundColor: 'red', }, image: { height: 200, diff --git a/example/package.json b/example/package.json index 0c10c9b..f97bafd 100644 --- a/example/package.json +++ b/example/package.json @@ -10,8 +10,7 @@ }, "dependencies": { "react": "16.0.0-alpha.6", - "react-native": "0.43.4", - "react-native-material-palette": ".." + "react-native": "0.43.4" }, "devDependencies": { "babel-jest": "20.0.3", diff --git a/src/Background.js b/src/Background.js index a0b3a3c..5613bf3 100644 --- a/src/Background.js +++ b/src/Background.js @@ -1,11 +1,29 @@ /* @flow */ -import { Component } from 'react'; -import type { Options } from './types'; +import React, { PropTypes, Component } from 'react'; +import { requireNativeComponent, View } from 'react-native'; +import resolveAssetSource + from 'react-native/Libraries/Image/resolveAssetSource'; -export default class Background extends Component { +const MPBackground = requireNativeComponent( + 'PaletteBackground', + MaterialPaletteBackground, +); + +// eslint-disable-next-line react/prefer-stateless-function +export default class MaterialPaletteBackground extends Component { + static propTypes = { + source: PropTypes.oneOfType([ + PropTypes.number, + PropTypes.shape({ + uri: PropTypes.string, + }), + ]), + ...View.propTypes, // include the default view properties + }; render() { - // TODO implement - return null; + const { source, ...rest } = this.props; + const src = resolveAssetSource(source); + return ; } } From 9cf2c043faa87d543df77b7a314a57097a17b220 Mon Sep 17 00:00:00 2001 From: Raul Gomez Acuna Date: Wed, 5 Jul 2017 12:59:16 +0200 Subject: [PATCH 2/2] feat(components): Test passing simple prop to native side --- .../PaletteBackgroundManager.kt | 46 +++++++------ example/index.android.js | 55 +++++++++------ example/package.json | 3 +- example/src/AsyncExample.js | 68 +++++++++++++++++++ example/src/ComponentsExample.js | 23 +++++++ example/yarn.lock | 60 ++++++++++++++-- src/Background.js | 13 ++-- 7 files changed, 213 insertions(+), 55 deletions(-) create mode 100644 example/src/AsyncExample.js create mode 100644 example/src/ComponentsExample.js diff --git a/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt b/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt index dfe7dd0..668d03a 100644 --- a/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt +++ b/android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt @@ -5,15 +5,16 @@ import android.graphics.BitmapFactory import android.net.Uri import android.provider.MediaStore import android.support.v7.graphics.Palette +import android.util.Log import com.facebook.react.bridge.ReadableMap -import com.facebook.react.uimanager.SimpleViewManager import com.facebook.react.uimanager.ThemedReactContext import com.facebook.react.views.view.ReactViewGroup import com.facebook.react.uimanager.annotations.ReactProp +import com.facebook.react.views.view.ReactViewManager import java.io.IOException import java.net.URL -class PaletteBackgroundManager : SimpleViewManager() { +class PaletteBackgroundManager : ReactViewManager() { private val REACT_CLASS = "PaletteBackground" private lateinit var ctx: ThemedReactContext @@ -21,29 +22,34 @@ class PaletteBackgroundManager : SimpleViewManager() { override fun createViewInstance(context: ThemedReactContext): ReactViewGroup { ctx = context - return ReactViewGroup(context) + return super.createViewInstance(context) } override fun getName(): String { return REACT_CLASS } - @ReactProp(name = "source") - fun setSource(view: ReactViewGroup, source: ReadableMap) { - val bitmap: Bitmap - val uri = source.getString("uri") - try { - if (uri.contains("http")) { - val url = URL(uri) - // TODO handle network error in case of invalid image - bitmap = BitmapFactory.decodeStream(url.openConnection().getInputStream()) - } else { - bitmap = MediaStore.Images.Media.getBitmap(ctx.contentResolver, Uri.parse(uri)) - } - palette = Palette.from(bitmap).generate() - view.backgroundColor = palette.getVibrantColor(16777215) - } catch(error: IOException) { - throw IOException("The URI provided is not an image or the path is incorrect") - } +// @ReactProp(name = "source") +// fun setSource(view: ReactViewGroup, source: ReadableMap) { +// val bitmap: Bitmap +// val uri = source.getString("uri") +// try { +// if (uri.contains("http")) { +// val url = URL(uri) +// // TODO handle network error in case of invalid image +// bitmap = BitmapFactory.decodeStream(url.openConnection().getInputStream()) +// } else { +// bitmap = MediaStore.Images.Media.getBitmap(ctx.contentResolver, Uri.parse(uri)) +// } +// palette = Palette.from(bitmap).generate() +// view.backgroundColor = palette.getVibrantColor(16777215) +// } catch(error: IOException) { +// throw IOException("The URI provided is not an image or the path is incorrect") +// } +// } + + @ReactProp(name = "testColor") + fun setTestColor(view: ReactViewGroup, testColor: Int) { + view.backgroundColor = testColor } } diff --git a/example/index.android.js b/example/index.android.js index 0b532b8..6c1c61c 100644 --- a/example/index.android.js +++ b/example/index.android.js @@ -5,31 +5,44 @@ */ import React from 'react'; -import { AppRegistry, StyleSheet, View } from 'react-native'; -import MaterialPalette from 'react-native-material-palette'; +import { AppRegistry, View, Button, StyleSheet } from 'react-native'; +import { StackNavigator } from 'react-navigation'; +import AsyncExample from './src/AsyncExample'; +import ComponentsExample from './src/ComponentsExample'; -function TestPalette() { - return ( - - - - - ); +class HomeScreen extends React.Component { + static navigationOptions = { + title: 'RN Material Palette', + }; + + render() { + const { navigate } = this.props.navigation; + return ( + + +