WIP attempt to implement VideoBlur example with react-native-video

Examples/VideoBlur/.flowconfig

+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ignore react-tools where there are overlaps, but don't ignore anything that
+# react-native relies on
+.*/node_modules/react-tools/src/React.js
+.*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
+.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
+.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
+
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/react-native/node_modules/jest-cli/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+munge_underscores=true
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(1[0-4]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(1[0-4]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.14.0

Examples/VideoBlur/.gitignore

+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# node.js
+#
+node_modules/
+npm-debug.log

Examples/VideoBlur/.watchmanconfig

+{}
\ No newline at end of file

Examples/VideoBlur/Blur.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+const {
+  PropTypes
+} = React;
+const Blur1D = require("./Blur1D");
+
+const NORM = Math.sqrt(2)/2;
+
+function directionForPass (p, factor, total) {
+  const f = factor * p / total;
+  switch (p%4) {
+  case 0: return [f,0];
+  case 1: return [0,f];
+  case 2: return [f*NORM,f*NORM];
+  case 3: return [f*NORM,-f*NORM];
+  }
+  return p%2 ? [f,0] : [0,f];
+}
+
+/** Usages:
+ - Small blur:
+ <Blur factor={0.5} passes={2} width={w} height={h}>{url}</Blur>
+ - Medium blur:
+ <Blur factor={2} passes={4} width={w} height={h}>{url}</Blur>
+ - Powerful blur:
+ <Blur factor={20} passes={6} width={w} height={h}>{url}</Blur>
+ */
+class Blur extends GL.Component {
+  render () {
+    const { width, height, factor, children, passes, ...rest } = this.props;
+
+    const rec = p => p <= 0 ? children :
+      <Blur1D {...rest} width={width} height={height} direction={directionForPass(p, factor, passes)}>
+        {rec(p-1)}
+      </Blur1D>;
+
+    return rec(passes);
+  }
+}
+
+Blur.defaultProps = {
+  passes: 2
+};
+
+Blur.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  factor: PropTypes.number.isRequired,
+  children: PropTypes.any.isRequired,
+  passes: PropTypes.number
+};
+
+module.exports = Blur;

Examples/VideoBlur/Blur1D.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  blur1D: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+uniform sampler2D t;
+uniform vec2 direction;
+uniform vec2 resolution;
+
+// from https://github.com/Jam3/glsl-fast-gaussian-blur
+vec4 blur13(sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.411764705882353) * direction;
+  vec2 off2 = vec2(3.2941176470588234) * direction;
+  vec2 off3 = vec2(5.176470588235294) * direction;
+  color += texture2D(image, uv) * 0.1964825501511404;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.2969069646728344;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.2969069646728344;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.09447039785044732;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.09447039785044732;
+  color += texture2D(image, uv + (off3 / resolution)) * 0.010381362401148057;
+  color += texture2D(image, uv - (off3 / resolution)) * 0.010381362401148057;
+  return color;
+}
+
+void main () {
+  gl_FragColor = blur13(t, uv, resolution, direction);
+}
+    `
+  }
+});
+
+class Blur1D extends GL.Component {
+  render () {
+    const { width, height, direction, children: t, ...rest } = this.props;
+    return <GL.View
+      {...rest}
+      shader={shaders.blur1D}
+      width={width}
+      height={height}
+      uniforms={{
+        direction,
+        resolution: [ width, height ],
+        t
+      }}
+    />;
+  }
+}
+
+module.exports = Blur1D;

Examples/VideoBlur/Field.js

+const React = require("react-native");
+const {
+  View,
+  Text,
+  SliderIOS
+} = React;
+const styles = {
+  field: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingTop: 10,
+    paddingBottom: 10
+  },
+  title: {
+    width: 140,
+    textAlign: "right",
+    paddingTop: 20,
+    paddingBottom: 20,
+    paddingLeft: 40,
+    paddingRight: 40,
+    fontSize: 16,
+    fontFamily: "Helvetica"
+  },
+  range: {
+    flex: 1,
+    height: 50
+  }
+};
+
+class Field extends React.Component {
+  render () {
+    const { min, max, onChange, name, width } = this.props;
+    return <View style={{...styles.field, width }}>
+      <Text style={styles.title}>{name}</Text>
+      <SliderIOS
+        style={styles.range}
+        minimumValue={min}
+        maximumValue={max}
+        onValueChange={onChange}
+      />
+  </View>;
+  }
+}
+module.exports = Field;

Examples/VideoBlur/HueRotate.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  hueRotate: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+uniform sampler2D tex;
+uniform float hue;
+
+const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
+const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046);
+
+void main() {
+  vec3 yColor = rgb2yiq * texture2D(tex, uv).rgb;
+  float originalHue = atan(yColor.b, yColor.g);
+  float finalHue = originalHue + hue;
+  float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g);
+  vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue));
+  gl_FragColor = vec4(yiq2rgb*yFinalColor, 1.0);
+}
+    `
+  }
+});
+
+class HueRotate extends GL.Component {
+  render () {
+    const { width, height, hue, children: tex, ...rest } = this.props;
+    return <GL.View
+      {...rest}
+      shader={shaders.hueRotate}
+      width={width}
+      height={height}
+      uniforms={{ hue, tex }}
+    />;
+  }
+}
+
+module.exports = HueRotate;

Examples/VideoBlur/index.ios.js

+const React = require("react-native");
+const {
+  AppRegistry,
+  StyleSheet,
+  View,
+} = React;
+const Video = require("react-native-video");
+const {
+  width: viewportW
+} = require("Dimensions").get("window");
+
+const HueRotate = require("./HueRotate");
+const Blur = require("./Blur");
+const Field = require("./Field");
+
+const width = viewportW;
+const height = Math.round(viewportW * 480/640);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#eee",
+  },
+  video: {
+    width,
+    height
+  }
+});
+
+class VideoBlur extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      blur: 0,
+      blurPasses: 2,
+      hue: 0
+    };
+  }
+  render () {
+    const { blur, hue, blurPasses } = this.state;
+    return (
+      <View style={styles.container}>
+        <Blur eventsThrough autoRedraw width={width} height={height} passes={blurPasses} factor={blur}>
+          <HueRotate hue={hue}>
+            <Video source={{ uri: "video" }} repeat style={styles.video} />
+          </HueRotate>
+        </Blur>
+        <Field min={0} max={2*Math.PI} value={hue} onChange={hue => this.setState({ hue })} name="Hue" width={width} />
+        <Field min={0} max={16} value={blur} onChange={blur => this.setState({ blur })} name="Blur" width={width} />
+        <Field min={2} max={8} step={1} value={blurPasses} onChange={blurPasses => this.setState({ blurPasses })} name="Blur Passes" width={width} />
+      </View>
+    );
+  }
+}
+
+AppRegistry.registerComponent("VideoBlur", () => VideoBlur);

Examples/VideoBlur/ios/VideoBlur.xcodeproj/xcshareddata/xcschemes/VideoBlur.xcscheme

+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "0620"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "VideoBlur.app"
+               BlueprintName = "VideoBlur"
+               ReferencedContainer = "container:VideoBlur.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "NO"
+            buildForArchiving = "NO"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "VideoBlurTests.xctest"
+               BlueprintName = "VideoBlurTests"
+               ReferencedContainer = "container:VideoBlur.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "VideoBlurTests.xctest"
+               BlueprintName = "VideoBlurTests"
+               ReferencedContainer = "container:VideoBlur.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "VideoBlur.app"
+            BlueprintName = "VideoBlur"
+            ReferencedContainer = "container:VideoBlur.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
+   </TestAction>
+   <LaunchAction
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "VideoBlur.app"
+            BlueprintName = "VideoBlur"
+            ReferencedContainer = "container:VideoBlur.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </LaunchAction>
+   <ProfileAction
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "VideoBlur.app"
+            BlueprintName = "VideoBlur"
+            ReferencedContainer = "container:VideoBlur.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

Examples/VideoBlur/ios/VideoBlur/AppDelegate.h

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end

Examples/VideoBlur/ios/VideoBlur/AppDelegate.m

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "AppDelegate.h"
+
+#import "RCTRootView.h"
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://192.168.0.26:8081/index.ios.bundle"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. To re-generate the static bundle
+   * from the root of your project directory, run
+   *
+   * $ react-native bundle --minify
+   *
+   * see http://facebook.github.io/react-native/docs/runningondevice.html
+   */
+
+//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                                      moduleName:@"VideoBlur"
+                                               initialProperties:nil
+                                                   launchOptions:launchOptions];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [[UIViewController alloc] init];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+@end

Examples/VideoBlur/ios/VideoBlur/Base.lproj/LaunchScreen.xib

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="iN0-l3-epB">
+            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+                    <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="VideoBlur" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                    <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <constraints>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
+                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
+                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
+                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
+                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
+            </constraints>
+            <nil key="simulatedStatusBarMetrics"/>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <point key="canvasLocation" x="548" y="455"/>
+        </view>
+    </objects>
+</document>

Examples/VideoBlur/ios/VideoBlur/Images.xcassets/AppIcon.appiconset/Contents.json

+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

Examples/VideoBlur/ios/VideoBlur/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+  <key>NSAppTransportSecurity</key>
+  <dict>
+    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/-->
+    <key>NSAllowsArbitraryLoads</key>
+    <true/>
+  </dict>
+</dict>
+</plist>

Examples/VideoBlur/ios/VideoBlur/main.m

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char * argv[]) {
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}

Examples/VideoBlur/ios/VideoBlurTests/Info.plist

+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

Examples/VideoBlur/ios/VideoBlurTests/VideoBlurTests.m

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import "RCTLog.h"
+#import "RCTRootView.h"
+
+#define TIMEOUT_SECONDS 240
+#define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
+
+@interface VideoBlurTests : XCTestCase
+
+@end
+
+@implementation VideoBlurTests
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen
+{
+  UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+
+  __block NSString *redboxError = nil;
+  RCTSetLogFunction(^(RCTLogLevel level, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+    if (level >= RCTLogLevelError) {
+      redboxError = message;
+    }
+  });
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
+      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+        return YES;
+      }
+      return NO;
+    }];
+  }
+
+  RCTSetLogFunction(RCTDefaultLogFunction);
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+
+@end

Examples/VideoBlur/ios/Videos.xcassets/Contents.json

+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
\ No newline at end of file

Examples/VideoBlur/ios/Videos.xcassets/video.dataset/Contents.json

+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "data" : [
+    {
+      "idiom" : "universal",
+      "filename" : "video.mp4"
+    }
+  ]
+}
\ No newline at end of file

Examples/VideoBlur/ios/main.jsbundle

+// Offline JS
+// To re-generate the offline bundle, run this from the root of your project:
+//
+// $ react-native bundle --minify
+//
+// See http://facebook.github.io/react-native/docs/runningondevice.html for more details.
+
+throw new Error('Offline JS file is empty. See iOS/main.jsbundle for instructions');

Examples/VideoBlur/package.json

+{
+  "name": "VideoBlur",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "node_modules/react-native/packager/packager.sh"
+  },
+  "dependencies": {
+    "gl-react-native": "file:../..",
+    "react-native": "^0.11.0",
+    "react-native-video": "^0.6.1"
+  }
+}