Basic example android index

Cleaned up android index, using new “local” bg image

Author: breadadams

examples/Basic/bgimage.jpeg

@@ -1,48 +1,27 @@
 /**
- * Sample React Native App
- * https://github.com/facebook/react-native
+ * Basic [Android] Example for react-native-blur
+ * https://github.com/react-native-community/react-native-blur
  */
 'use strict';
-
-var ReactNative = require('react-native');
-var React = require('react');
-var {
+import React, {Component} from 'react';
+import {
   AppRegistry,
   Image,
   findNodeHandle,
   StyleSheet,
   Text,
-  View,
-} = ReactNative;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    backgroundColor: 'transparent',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-    color: '#FFFFFF',
-  },
-  blurView: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0
-  },
-});
+  View
+} from 'react-native';
 
-var BlurView = require('react-native-blur').BlurView;
+import {BlurView} from 'react-native-blur';
 
-var background = 'http://iphonewallpapers-hd.com/thumbs/firework_iphone_wallpaper_5-t2.jpg';
+class Basic extends Component {
 
-class Basic extends React.Component {
-  state = {
-    viewRef: 0
+  constructor() {
+    super()
+    this.state = {
+      viewRef: 0,
+    }
   }
 
   imageLoaded() {
@@ -52,22 +31,45 @@ class Basic extends React.Component {
   render() {
     return (
       <Image
-        source={{uri: background}}
+        source={require('./bgimage.jpeg')}
         style={styles.container}
         ref={'backgroundImage'}
-        onLoadEnd={this.imageLoaded.bind(this)}
-      >
+        onLoadEnd={this.imageLoaded.bind(this)}>
         <BlurView
           blurRadius={10}
           downsampleFactor={5}
-          overlayColor={'rgba(255, 255, 255, 0.1)'}
+          overlayColor={'rgba(255, 255, 255, .25)'}
           style={styles.blurView}
-          viewRef={this.state.viewRef}
-        />
-        <Text style={styles.welcome}>Blur component</Text>
+          viewRef={this.state.viewRef}/>
+        <Text style={styles.welcome}>{`Blur component`}</Text>
       </Image>
     );
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    backgroundColor: 'transparent',
+    resizeMode: 'cover',
+    width: null,
+    height: null,
+  },
+  welcome: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    margin: 10,
+    color: '#FFFFFF',
+  },
+  blurView: {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0
+  },
+});
+
 AppRegistry.registerComponent('Basic', () => Basic);