Background native component - WIP

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<NativeModule>
             = mutableListOf(MaterialPaletteModule(reactContext))
 
-    override fun createViewManagers(reactContext: ReactApplicationContext?):
-            MutableList<ViewManager<View, ReactShadowNode>> = Collections.emptyList()
+    override fun createViewManagers(
+            reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return Arrays.asList<ViewManager<*, *>>(
+                PaletteBackgroundManager()
+        )
+    }
 
 }

android/src/main/java/io/callstack/react_native_material_palette/PaletteBackgroundManager.kt

@@ -0,0 +1,55 @@
+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 android.util.Log
+import com.facebook.react.bridge.ReadableMap
+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 : ReactViewManager() {
+
+    private val REACT_CLASS = "PaletteBackground"
+    private lateinit var ctx: ThemedReactContext
+    private lateinit var palette: Palette
+
+    override fun createViewInstance(context: ThemedReactContext): ReactViewGroup {
+        ctx = 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 = "testColor")
+    fun setTestColor(view: ReactViewGroup, testColor: Int) {
+        view.backgroundColor = testColor
+    }
+}

example/index.android.js

@@ -4,73 +4,45 @@
  * @flow
  */
 
-import React, { Component } from 'react';
-import { AppRegistry, StyleSheet, Text, View, Image } from 'react-native';
+import React from 'react';
+import { AppRegistry, View, Button, StyleSheet } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+import AsyncExample from './src/AsyncExample';
+import ComponentsExample from './src/ComponentsExample';
 
-import MaterialPalette from 'react-native-material-palette';
-
-export default class TestPalette extends Component {
-  state = {
-    isLoading: true,
-    palette: null,
+class HomeScreen extends React.Component {
+  static navigationOptions = {
+    title: 'RN Material Palette',
   };
 
-  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;
+    const { navigate } = this.props.navigation;
     return (
-      <View style={styles.container}>
-        {isLoading
-          ? <Text>
-              Generating palette asynchronously...
-            </Text>
-          : <View>
-              <Image
-                source={require('./assets/wroclaw.jpg')}
-                style={styles.image}
-              />
-              {Object.keys(palette).map(profile => (
-                <View
-                  style={{
-                    backgroundColor: palette[profile].color,
-                    height: 50,
-                  }}
-                  key={profile}
-                >
-                  <Text style={{ color: palette[profile].bodyTextColor }}>
-                    {profile.toUpperCase()}
-                  </Text>
-                </View>
-              ))}
-            </View>}
+      <View>
+        <View style={styles.button}>
+          <Button onPress={() => navigate('Async')} title="Async API" />
+        </View>
+        <View style={styles.button}>
+          <Button
+            onPress={() => navigate('Components')}
+            title="UI Components"
+          />
+        </View>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  image: {
-    height: 200,
-    width: null,
-    resizeMode: 'cover',
+  button: {
+    margin: 10,
   },
 });
 
-AppRegistry.registerComponent('TestPalette', () => TestPalette);
+const ExampleApp = StackNavigator({
+  Home: { screen: HomeScreen },
+  Async: { screen: AsyncExample },
+  Components: { screen: ComponentsExample },
+});
+
+AppRegistry.registerComponent('TestPalette', () => ExampleApp);

example/package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "react": "16.0.0-alpha.6",
     "react-native": "0.43.4",
-    "react-native-material-palette": ".."
+    "react-navigation": "^1.0.0-beta.11"
   },
   "devDependencies": {
     "babel-jest": "20.0.3",

example/src/AsyncExample.js

@@ -0,0 +1,68 @@
+import React, { Component } from 'react';
+import { StyleSheet, Text, View, Image } from 'react-native';
+
+import MaterialPalette from 'react-native-material-palette';
+
+export default class AsyncExample 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 (
+      <View style={styles.container}>
+        {isLoading
+          ? <Text>
+              Generating palette asynchronously...
+            </Text>
+          : <View>
+              <Image
+                source={require('../assets/wroclaw.jpg')}
+                style={styles.image}
+              />
+              {Object.keys(palette).map(profile => (
+                <View
+                  style={{
+                    backgroundColor: palette[profile].color,
+                    height: 50,
+                  }}
+                  key={profile}
+                >
+                  <Text style={{ color: palette[profile].bodyTextColor }}>
+                    {profile.toUpperCase()}
+                  </Text>
+                </View>
+              ))}
+            </View>}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  image: {
+    height: 200,
+    width: null,
+    resizeMode: 'cover',
+  },
+});

example/src/ComponentsExample.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { StyleSheet, View } from 'react-native';
+import MaterialPalette from 'react-native-material-palette';
+
+export default class ComponentsExample extends Component {
+  render() {
+    return (
+      <View style={styles.container}>
+        <MaterialPalette.Background
+          style={{ height: 150, width: 200 }}
+          testColor={9975652}
+        />
+        <View style={{ height: 150, width: 200, backgroundColor: 'green' }} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});