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<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()
+        )
+    }
 
 }
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..668d03a
--- /dev/null
+++ b/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
+    }
+}
diff --git a/example/index.android.js b/example/index.android.js
index 37e6f12..6c1c61c 100644
--- a/example/index.android.js
+++ b/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);
diff --git a/example/package.json b/example/package.json
index 0c10c9b..2300160 100644
--- a/example/package.json
+++ b/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",
diff --git a/example/src/AsyncExample.js b/example/src/AsyncExample.js
new file mode 100644
index 0000000..749960f
--- /dev/null
+++ b/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',
+  },
+});
diff --git a/example/src/ComponentsExample.js b/example/src/ComponentsExample.js
new file mode 100644
index 0000000..d89a073
--- /dev/null
+++ b/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,
+  },
+});
diff --git a/example/yarn.lock b/example/yarn.lock
index 76c566b..c6cbdd9 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -1238,6 +1238,10 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   dependencies:
     inherits "^2.0.1"
 
+clamp@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
+
 clap@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.3.tgz#b3bd36e93dd4cbfb395a3c26896352445265c05b"
@@ -1946,7 +1950,7 @@ fbjs-scripts@^0.7.0:
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@^0.8.9, fbjs@~0.8.9:
+fbjs@^0.8.12, fbjs@^0.8.9, fbjs@~0.8.9:
   version "0.8.12"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
   dependencies:
@@ -2369,6 +2373,10 @@ hoek@2.x.x:
   version "2.16.3"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
 
+hoist-non-react-statics@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -3235,7 +3243,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -3777,6 +3785,12 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -3885,6 +3899,13 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
+prop-types@^15.5.10, prop-types@^15.5.8:
+  version "15.5.10"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
+  dependencies:
+    fbjs "^0.8.9"
+    loose-envify "^1.3.1"
+
 proxy-addr@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
@@ -3995,8 +4016,27 @@ react-devtools-core@^2.0.8:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
-react-native-material-palette@..:
-  version "0.0.0"
+react-native-dismiss-keyboard@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz#32886242b3f2317e121f3aeb9b0a585e2b879b49"
+
+react-native-drawer-layout-polyfill@^1.3.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz#192c84d7a5a6b8a6d2be2c7daa5e4164518d0cc7"
+  dependencies:
+    react-native-drawer-layout "1.3.2"
+
+react-native-drawer-layout@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz#b9740d7663a1dc4f88a61b9c6d93d2d948ea426e"
+  dependencies:
+    react-native-dismiss-keyboard "1.0.0"
+
+react-native-tab-view@^0.0.65:
+  version "0.0.65"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.65.tgz#b685ea3081ff7c96486cd997361026c407302c59"
+  dependencies:
+    prop-types "^15.5.8"
 
 react-native@0.43.4:
   version "0.43.4"
@@ -4083,6 +4123,18 @@ react-native@0.43.4:
     xpipe "^1.0.5"
     yargs "^6.4.0"
 
+react-navigation@^1.0.0-beta.11:
+  version "1.0.0-beta.11"
+  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.0.0-beta.11.tgz#4271edb23cdbcc6eb88602f7fde0a77f0ef7a160"
+  dependencies:
+    clamp "^1.0.1"
+    fbjs "^0.8.12"
+    hoist-non-react-statics "^1.2.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.5.10"
+    react-native-drawer-layout-polyfill "^1.3.0"
+    react-native-tab-view "^0.0.65"
+
 react-proxy@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"
diff --git a/src/Background.js b/src/Background.js
index a0b3a3c..3877021 100644
--- a/src/Background.js
+++ b/src/Background.js
@@ -1,11 +1,24 @@
 /* @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<void, Options, void> {
+const MPBackground = requireNativeComponent(
+  'PaletteBackground',
+  MaterialPaletteBackground,
+);
+
+// eslint-disable-next-line react/prefer-stateless-function
+export default class MaterialPaletteBackground extends Component {
+  static propTypes = {
+    testColor: PropTypes.number,
+    ...View.propTypes, // include the default view properties
+  };
   render() {
-    // TODO implement
-    return null;
+    // const { source, ...rest } = this.props;
+    // const src = resolveAssetSource(source);
+    return <MPBackground {...this.props} />;
   }
 }