iOS example updates

examples/Basic/index.ios.js

@@ -1,42 +1,138 @@
-import React, {Component} from 'react';
+/**
+ * Basic [iOS] Example for react-native-blur
+ * https://github.com/react-native-community/react-native-blur
+ */
+import React, {Component} from 'react'
 import {
   AppRegistry,
   StyleSheet,
   Text,
   Image,
-} from 'react-native';
+  View,
-import {BlurView, VibrancyView} from 'react-native-blur';
+  SegmentedControlIOS,
+  Switch
+} from 'react-native'
+
+import {BlurView, VibrancyView} from 'react-native-blur'
+
+class Basic extends Component {
+
+  constructor() {
+    super()
+    this.state = {
+      hideBlurs: false,
+      blurBlurType: 'light',
+      blurActiveSegment: 1,
+      vibrancyBlurType: 'dark',
+      vibrancyActiveSegment: 2,
+    }
+  }
+
+  _onBlurChange(event) {
+    this.setState({blurActiveSegment: event.nativeEvent.selectedSegmentIndex})
+  }
+
+  _onBlurValueChange(value) {
+    this.setState({blurBlurType: value})
+  }
+
+  _onVibrancyChange(event) {
+    this.setState({vibrancyActiveSegment: event.nativeEvent.selectedSegmentIndex})
+  }
+
+  _onVibrancyValueChange(value) {
+    this.setState({vibrancyBlurType: value})
+  }
+
+  render() {
+    return (
+      <View
+        style={styles.container}>
+
+        <Image
+          source={require('./bgimage.jpeg')}
+          resizeMode='cover'
+          style={styles.img}/>
+
+        {(this.state.hideBlurs
+
+          ? null
+
+          : <View style={styles.container}>
+        
+              <BlurView
+                blurType={this.state.blurBlurType}
+                blurAmount={10}
+                style={[styles.container, styles.blurContainer]}>
+                <Text style={styles.welcome}>{`Blur component`}</Text>
+                <SegmentedControlIOS
+                  values={['xlight', 'light', 'dark']}
+                  selectedIndex={this.state.blurActiveSegment}
+                  onChange={(event) => {this._onBlurChange(event)}}
+                  onValueChange={(value) => {this._onBlurValueChange(value)}}
+                  tintColor={this.state.blurBlurType == 'xlight' ? 'black' : 'white'}/>
+              </BlurView>
+
+              <VibrancyView
+                blurType={this.state.vibrancyBlurType}
+                blurAmount={1}
+                style={[styles.container, styles.blurContainer]}>
+                <Text style={styles.welcome}>{`Vibrancy component`}</Text>
+                <SegmentedControlIOS
+                  values={['xlight', 'light', 'dark']}
+                  selectedIndex={this.state.vibrancyActiveSegment}
+                  onChange={(event) => {this._onVibrancyChange(event)}}
+                  onValueChange={(value) => {this._onVibrancyValueChange(value)}}
+                  tintColor={this.state.vibrancyBlurType == 'xlight' ? 'black' : 'white'}/>
+              </VibrancyView>
+
+            </View>
+        )}
+
+        <View
+          style={styles.blurToggle}>
+          <Switch
+            onValueChange={(value) => this.setState({hideBlurs: value})}
+            value={this.state.hideBlurs} />
+        </View>
+        
+      </View>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
+    alignItems: 'stretch',
     backgroundColor: 'transparent',
   },
+  blurContainer: {
+    paddingHorizontal: 20,
+  },
+  img: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    height: null,
+    width: null,
+  },
   welcome: {
     fontSize: 20,
+    fontWeight: 'bold',
     textAlign: 'center',
     margin: 10,
-    color: '#FFFFFF',
+    color: 'white',
   },
+  blurToggle: {
+    position: 'absolute',
+    top: 30,
+    right: 10,
+    alignItems: 'flex-end',
+  }
 });
 
-const background = 'http://iphonewallpapers-hd.com/thumbs/firework_iphone_wallpaper_5-t2.jpg';
-
-class Basic extends Component {
-  render() {
-    return (
-      <Image source={{uri: background}} style={styles.container}>
-        <BlurView blurType="light" style={styles.container}>
-         <Text style={styles.welcome}>Blur component</Text>
-        </BlurView>
-
-        <VibrancyView blurType="dark" style={styles.container}>
-          <Text style={styles.welcome}>Vibrancy component</Text>
-        </VibrancyView>
-      </Image>
-    );
-  }
-}
-
 AppRegistry.registerComponent('Basic', () => Basic);