Merge pull request #7 from ProjectSeptemberInc/1.0.0

1.0.0

Examples/AdvancedEffects/src/Intro.js

@@ -52,23 +52,25 @@ class Intro extends React.Component {
         colorSeparation: 0.02,
         moving: 1
       }}>
-      <GL.Target uniform="texture" style={{ justifyContent: "center" }}>
-        <Text style={{ color: "#00BDF3", fontSize: 32, letterSpacing: -1.0 }}>
-          GL REACT NATIVE
-        </Text>
-        <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
-          <View style={{ backgroundColor: "#00FF66", marginRight: 8, width: 14, height: 14, borderRadius: 7, opacity: time%1 < 0.6 ? 1 : 0 }} />
-          <Text style={{ flex: 1, color: "#00FF66", fontSize: 14 }}>
-            {time.toFixed(2)}s
-          </Text>
-          <Text style={{ flex: 1, color: "#fff", fontSize: 14 }}>
-            {(fps).toFixed(0)} fps
-          </Text>
-          <Text style={{ flex: 1, color: "#999", fontSize: 14 }}>
-            {"<Text />"}
+      <GL.Uniform name="texture">
+        <View style={{ flex: 1, justifyContent: "center" }}>
+          <Text style={{ color: "#00BDF3", fontSize: 32, letterSpacing: -1.0 }}>
+            GL REACT NATIVE
           </Text>
+          <View style={{ flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
+            <View style={{ backgroundColor: "#00FF66", marginRight: 8, width: 14, height: 14, borderRadius: 7, opacity: time%1 < 0.6 ? 1 : 0 }} />
+            <Text style={{ flex: 1, color: "#00FF66", fontSize: 14 }}>
+              {time.toFixed(2)}s
+            </Text>
+            <Text style={{ flex: 1, color: "#fff", fontSize: 14 }}>
+              {(fps).toFixed(0)} fps
+            </Text>
+            <Text style={{ flex: 1, color: "#999", fontSize: 14 }}>
+              {"<Text />"}
+            </Text>
+          </View>
         </View>
-      </GL.Target>
+      </GL.Uniform>
     </GL.View>;
   }
 }

Examples/AdvancedEffects/src/Transition.js

@@ -6,6 +6,7 @@ class Transition extends React.Component {
     const { width, height, shader, progress, from, to, uniforms } = this.props;
     const scale = React.PixelRatio.get();
     return <GL.View
+      preload
       shader={shader}
       width={width}
       height={height}

Examples/AdvancedEffects/src/Vignette.js

@@ -56,6 +56,7 @@ class Vignette extends React.Component {
     const { width, height, time, source } = this.props;
     const { finger } = this.state;
     return <GL.View
+      preload
       onStartShouldSetResponder={() => true}
       onMoveShouldSetResponder={() => true}
       onResponderMove={this.onResponderMove}

Examples/Simple/Blur1D.js

@@ -35,17 +35,17 @@ void main () {
 
 class Blur1D extends GL.Component {
   render () {
-    const { width, height, direction, children } = this.props;
+    const { width, height, direction, children: t } = this.props;
     return <GL.View
       shader={shaders.blur1D}
       width={width}
       height={height}
       uniforms={{
         direction,
-        resolution: [ width, height ]
-      }}>
-      <GL.Target uniform="t">{children}</GL.Target>
-    </GL.View>;
+        resolution: [ width, height ],
+        t
+      }}
+    />;
   }
 }
 

Examples/Simple/HueRotate.js

@@ -26,14 +26,13 @@ void main() {
 
 class HueRotate extends React.Component {
   render () {
-    const { width, height, hue, children } = this.props;
+    const { width, height, hue, children: tex } = this.props;
     return <GL.View
       shader={shaders.hueRotate}
       width={width}
       height={height}
-      uniforms={{ hue }}>
-      <GL.Target uniform="tex">{children}</GL.Target>
-    </GL.View>;
+      uniforms={{ hue, tex }}
+    />;
   }
 }
 

Examples/Tests/.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/Tests/.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/Tests/.npmignore

+# 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
+
+# node.js
+#
+node_modules/
+npm-debug.log

Examples/Tests/Add.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  add: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+
+void main () {
+  vec4 c1 = texture2D(t1, uv);
+  vec4 c2 = texture2D(t2, uv);
+  gl_FragColor = c1 + c2;
+}
+`
+  }
+});
+
+class Add extends GL.Component {
+  render () {
+    const { width, height, children } = this.props;
+    if (!children || children.length !== 2) throw new Error("You must provide 2 children to Add");
+    const [t1, t2] = children;
+    return <GL.View
+      shader={shaders.add}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2 }}
+    />;
+  }
+}
+
+module.exports = Add;

Examples/Tests/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 } = this.props;
+    const rec = p => p <= 0 ? children :
+      <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
+        {rec(p-1)}
+      </Blur1D>;
+
+    return rec(passes || 0);
+  }
+}
+
+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/Tests/Blur1D.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const {
+  PropTypes
+} = React;
+
+const shaders = GL.Shaders.create({
+  blur1D: {
+    frag: `
+precision highp float;
+varying vec2 uv;
+uniform sampler2D t;
+uniform vec2 resolution;
+uniform vec2 direction;
+// Credits: https://github.com/Jam3/glsl-fast-gaussian-blur
+vec4 blur9 (sampler2D image, vec2 uv, vec2 resolution, vec2 direction) {
+  vec4 color = vec4(0.0);
+  vec2 off1 = vec2(1.3846153846) * direction;
+  vec2 off2 = vec2(3.2307692308) * direction;
+  color += texture2D(image, uv) * 0.2270270270;
+  color += texture2D(image, uv + (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv - (off1 / resolution)) * 0.3162162162;
+  color += texture2D(image, uv + (off2 / resolution)) * 0.0702702703;
+  color += texture2D(image, uv - (off2 / resolution)) * 0.0702702703;
+  return color;
+}
+void main () {
+  gl_FragColor = blur9(t, uv, resolution, direction);
+}
+    `
+  }
+});
+
+class Blur1D extends GL.Component {
+  render () {
+    const { width, height, direction, children } = this.props;
+    return <GL.View
+      shader={shaders.blur1D}
+      width={width}
+      height={height}
+      uniforms={{
+        direction,
+        resolution: [ width, height ]
+      }}>
+      <GL.Uniform name="t">{children}</GL.Uniform>
+    </GL.View>;
+  }
+}
+
+Blur1D.propTypes = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  direction: PropTypes.array.isRequired,
+  children: PropTypes.any.isRequired
+};
+
+module.exports = Blur1D;

Examples/Tests/Display2.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  display2: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+uniform bool vertical;
+
+void main () {
+  float v = vertical ? 1.0 : 0.0;
+  vec2 p = uv * mix(vec2(2.0, 1.0), vec2(1.0, 2.0), v);
+  vec4 c1 = step(mix(p.x, p.y, v), 1.0) * texture2D(t1, p);
+  vec4 c2 = step(1.0, mix(p.x, p.y, v)) * texture2D(t2, p - vec2(1.0-v, v));
+  gl_FragColor = c1 + c2;
+}
+`
+  }
+});
+
+class Display2 extends GL.Component {
+  render () {
+    const { width, height, children, vertical, ...rest } = this.props;
+    if (!children || children.length !== 2) throw new Error("You must provide 2 children to Display2");
+    let [t1, t2] = children;
+    if (vertical) [t1,t2]=[t2,t1]; // just because webgl y's is reversed
+    return <GL.View
+      {...rest}
+      shader={shaders.display2}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2, vertical }}
+      debug={true}
+    />;
+  }
+}
+
+Display2.defaultProps = {
+  vertical: false
+};
+
+module.exports = Display2;

Examples/Tests/HelloGL.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  helloGL: {
+    frag: `
+precision highp float;
+varying vec2 uv; // This variable vary in all pixel position (normalized from vec2(0.0,0.0) to vec2(1.0,1.0))
+
+void main () { // This function is called FOR EACH PIXEL
+  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0); // red vary over X, green vary over Y, blue is 50%, alpha is 100%.
+}
+    `
+  }
+});
+
+class HelloGL extends GL.Component {
+  render () {
+    const { width, height } = this.props;
+    return <GL.View
+      shader={shaders.helloGL}
+      width={width}
+      height={height}
+    />;
+  }
+}
+
+module.exports = HelloGL;

Examples/Tests/Layer.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  layer: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+
+void main () {
+  vec4 c1 = texture2D(t1, uv);
+  vec4 c2 = texture2D(t2, uv);
+  gl_FragColor = mix(c1, c2, c2.a);
+}
+`
+  }
+});
+
+class Layer extends GL.Component {
+  render () {
+    const { width, height, children } = this.props;
+    if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
+    const [t1, t2] = children;
+    return <GL.View
+      shader={shaders.layer}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2 }}
+    />;
+  }
+}
+
+module.exports = Layer;

Examples/Tests/Multiply.js

+const React = require("react-native");
+const GL = require("gl-react-native");
+
+const shaders = GL.Shaders.create({
+  multiply: {
+    frag: `
+precision highp float;
+
+varying vec2 uv;
+uniform sampler2D t1;
+uniform sampler2D t2;
+
+void main () {
+  vec4 c1 = texture2D(t1, uv);
+  vec4 c2 = texture2D(t2, uv);
+  gl_FragColor = c1 * c2;
+}
+`
+  }
+});
+
+class Multiply extends GL.Component {
+  render () {
+    const { width, height, children } = this.props;
+    if (!children || children.length !== 2) throw new Error("You must provide 2 children to Multiply");
+    const [t1, t2] = children;
+    return <GL.View
+      shader={shaders.multiply}
+      width={width}
+      height={height}
+      uniforms={{ t1, t2 }}
+    />;
+  }
+}
+
+module.exports = Multiply;

Examples/Tests/iOS/Tests.xcodeproj/xcshareddata/xcschemes/Tests.xcscheme

+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "0630"
+   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 = "Tests.app"
+               BlueprintName = "Tests"
+               ReferencedContainer = "container:Tests.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "NO"
+            buildForArchiving = "NO"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "TestsTests.xctest"
+               BlueprintName = "TestsTests"
+               ReferencedContainer = "container:Tests.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 = "TestsTests.xctest"
+               BlueprintName = "TestsTests"
+               ReferencedContainer = "container:Tests.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "Tests.app"
+            BlueprintName = "Tests"
+            ReferencedContainer = "container:Tests.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 = "Tests.app"
+            BlueprintName = "Tests"
+            ReferencedContainer = "container:Tests.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 = "Tests.app"
+            BlueprintName = "Tests"
+            ReferencedContainer = "container:Tests.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

Examples/Tests/iOS/Tests/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/Tests/iOS/Tests/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://localhost: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:@"Tests"
+                                                   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/Tests/iOS/Tests/Base.lproj/LaunchScreen.xib

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="6751" systemVersion="14C1510" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6736"/>
+        <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="Tests" 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/Tests/iOS/Tests/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/Tests/iOS/Tests/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/Tests/iOS/Tests/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/Tests/iOS/Tests/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/Tests/iOS/TestsTests/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/Tests/iOS/TestsTests/TestsTests.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 "RCTAssert.h"
+#import "RCTRedBox.h"
+#import "RCTRootView.h"
+
+#define TIMEOUT_SECONDS 240
+#define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
+
+@interface TestsTests : XCTestCase
+
+@end
+
+@implementation TestsTests
+
+
+- (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;
+  NSString *redboxError = nil;
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    redboxError = [[RCTRedBox sharedInstance] currentErrorMessage];
+
+    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
+      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+        return YES;
+      }
+      return NO;
+    }];
+  }
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+
+@end

Examples/Tests/index.ios.js

+const React = require("react-native");
+const {
+  AppRegistry,
+  Text,
+  View,
+} = React;
+
+const Blur = require("./Blur");
+const Add = require("./Add");
+const Multiply = require("./Multiply");
+const Layer = require("./Layer");
+const HelloGL = require("./HelloGL");
+const Display2 = require("./Display2");
+const { width: viewportW, height: viewportH } = require("Dimensions").get("window");
+
+class Tests extends React.Component {
+
+  constructor (props) {
+    super(props);
+    this.onLoad = this.onLoad.bind(this);
+    this.onProgress = this.onProgress.bind(this);
+  }
+  onLoad () {
+    console.log("LOADED");
+  }
+  onProgress ({nativeEvent: { progress, loaded, total }}) {
+    console.log("PROGRESS", progress, loaded, total);
+  }
+  render () {
+    const helloGL =
+      <HelloGL width={64} height={64} />;
+
+    const txt =
+      <View style={{ width: 800, height: 800, position: "relative", backgroundColor: "transparent" }}>
+        {[0,1,2,3].map(i => <Text style={{
+          position: "absolute",
+          top: 40+200*i,
+          left: 0,
+          width: 800,
+          height: 200,
+          textAlign: "center",
+          color: ["#f00", "#0f0", "#00f", "#fff"][i],
+          fontSize: 80
+        }}>
+          Hello World {i}
+        </Text>)}
+      </View>;
+
+    const img = "http://i.imgur.com/zJIxPEo.jpg?t="+Date.now();
+
+    const blurredImage =
+      <Blur factor={4} passes={6} width={200} height={200}>
+        {img}
+      </Blur>;
+
+    const blurredImageOverText =
+      <Layer>
+        {blurredImage}
+        {txt}
+      </Layer>;
+
+    return <View style={{ backgroundColor: "#000" }}>
+      <Display2 width={viewportW} height={viewportH} vertical preload onLoad={this.onLoad} onProgress={this.onProgress}>
+        <Display2 width={viewportW} height={viewportH/2}>
+          <Add width={viewportW/2} height={viewportH/2}>
+            {txt}
+            {helloGL}
+          </Add>
+          <Display2 width={viewportW/2} height={viewportH/2} vertical>
+            <Blur factor={1} passes={4} width={viewportW/2} height={viewportH/4}>
+              <Multiply>
+                {blurredImageOverText}
+                {helloGL}
+              </Multiply>
+            </Blur>
+            {blurredImage}
+          </Display2>
+        </Display2>
+        {txt}
+      </Display2>
+    </View>;
+  }
+}
+
+AppRegistry.registerComponent("Tests", () => Tests);

Examples/Tests/package.json

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

RNGL/GLCanvas.h

@@ -5,10 +5,13 @@
 
 @property (nonatomic) GLData *data;
 @property (nonatomic) BOOL opaque;
-@property (nonatomic) NSNumber *nbTargets;
+@property (nonatomic) NSNumber *nbContentTextures;
 @property (nonatomic) NSNumber *renderId;
+@property (nonatomic) NSArray *imagesToPreload;
+@property (nonatomic, assign) BOOL onProgress;
+@property (nonatomic, assign) BOOL onLoad;
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge
-                   withContext:(EAGLContext*)context;
+                   withContext:(EAGLContext *)context;
 
 @end

RNGL/GLCanvasManager.m

@@ -18,10 +18,13 @@ RCT_EXPORT_MODULE();
   return self;
 }
 
-RCT_EXPORT_VIEW_PROPERTY(nbTargets, NSNumber);
+RCT_EXPORT_VIEW_PROPERTY(nbContentTextures, NSNumber);
 RCT_EXPORT_VIEW_PROPERTY(opaque, BOOL);
 RCT_EXPORT_VIEW_PROPERTY(data, GLData);
 RCT_EXPORT_VIEW_PROPERTY(renderId, NSNumber);
+RCT_EXPORT_VIEW_PROPERTY(imagesToPreload, NSArray);
+RCT_EXPORT_VIEW_PROPERTY(onLoad, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(onProgress, BOOL);
 
 - (UIView *)view
 {

RNGL/GLData.h

 #import <Foundation/Foundation.h>
 
+// Data format of gl-react-core
+
 @interface GLData: NSObject
 
 @property (nonatomic) NSNumber *shader;
 @property (nonatomic) NSDictionary *uniforms;
 @property (nonatomic) NSNumber *width;
 @property (nonatomic) NSNumber *height;
+@property (nonatomic) NSNumber *fboId;
+@property (nonatomic) NSArray *contextChildren;
 @property (nonatomic) NSArray *children;
 
 -(instancetype)initWithShader: (NSNumber *)shader
                  withUniforms: (NSDictionary *)uniforms
                     withWidth: (NSNumber *)width
                    withHeight: (NSNumber *)height
+                    withFboId: (NSNumber *)fboId
+          withContextChildren: (NSArray *)contextChildren
                  withChildren: (NSArray *)children;
 
 @end

RNGL/GLData.m

@@ -6,6 +6,8 @@
                  withUniforms: (NSDictionary *)uniforms
                     withWidth: (NSNumber *)width
                    withHeight: (NSNumber *)height
+                    withFboId: (NSNumber *)fboId
+          withContextChildren: (NSArray *)contextChildren
                  withChildren: (NSArray *)children
 {
   if ((self = [super init])) {
@@ -13,6 +15,8 @@
     self.uniforms = uniforms;
     self.width = width;
     self.height = height;
+    self.fboId = fboId;
+    self.contextChildren = contextChildren;
     self.children = children;
   }
   return self;

RNGL/GLImage.m

@@ -80,7 +80,9 @@ RCT_NOT_IMPLEMENTED(-init)
     
     if (![_src hasPrefix:@"http://"] && ![_src hasPrefix:@"https://"]) {
       self.image = [UIImage imageNamed:_src];
-      if(_onload) _onload();
+      dispatch_async(dispatch_get_main_queue(), ^{
+        if (_onload) _onload();
+      });
     } else {
       _loading = [_bridge.imageLoader loadImageWithTag:_src
                                        size:CGSizeZero

RNGL/GLRenderData.h

 #import "GLShader.h"
 
+// GLRenderData is the validated/gl'resolved version of GLData
+
 @interface GLRenderData : NSObject
 
 @property (nonatomic) GLShader *shader;
@@ -7,7 +9,8 @@
 @property (nonatomic) NSDictionary *textures;
 @property (nonatomic) NSNumber *width;
 @property (nonatomic) NSNumber *height;
-@property (nonatomic) int frameIndex;
+@property (nonatomic) int fboId;
+@property (nonatomic) NSArray *contextChildren;
 @property (nonatomic) NSArray *children;
 
 -(instancetype) initWithShader: (GLShader *)shader
@@ -15,7 +18,8 @@
                   withTextures: (NSDictionary *)textures
                      withWidth: (NSNumber *)width
                     withHeight: (NSNumber *)height
-                withFrameIndex: (int)frameIndex
+                     withFboId: (int)fboId
+           withContextChildren: (NSArray *)contextChildren
                   withChildren: (NSArray *)children;
 
 @end

RNGL/GLRenderData.m

@@ -8,7 +8,8 @@
                   withTextures: (NSDictionary *)textures
                      withWidth: (NSNumber *)width
                     withHeight: (NSNumber *)height
-                withFrameIndex: (int)frameIndex
+                     withFboId: (int)fboId
+           withContextChildren: (NSArray *)contextChildren
                   withChildren: (NSArray *)children
 {
   
@@ -18,7 +19,8 @@
     self.textures = textures;
     self.width = width;
     self.height = height;
-    self.frameIndex = frameIndex;
+    self.fboId = fboId;
+    self.contextChildren = contextChildren;
     self.children = children;
   }
   return self;

RNGL/RCTConvert+GLData.m

@@ -10,18 +10,28 @@
   NSDictionary *uniforms = [self NSDictionary:json[@"uniforms"]];
   NSNumber *width = [self NSNumber:json[@"width"]];
   NSNumber *height = [self NSNumber:json[@"height"]];
+  NSNumber *fboId = [self NSNumber:json[@"fboId"]];
+  NSArray *contextChildrenJSON = [self NSArray: json[@"contextChildren"]];
   NSArray *childrenJSON = [self NSArray: json[@"children"]];
-  NSMutableArray *children = [NSMutableArray array];
   
+  NSMutableArray *children = [NSMutableArray array];
   for (NSObject *childJSON in childrenJSON) {
     GLData *child = [self GLData:childJSON];
     [children addObject:child];
   }
   
+  NSMutableArray *contextChildren = [NSMutableArray array];
+  for (NSObject *childJSON in contextChildrenJSON) {
+    GLData *child = [self GLData:childJSON];
+    [contextChildren addObject:child];
+  }
+
   return [[GLData alloc] initWithShader: shader
                            withUniforms: uniforms
                               withWidth: width
                              withHeight: height
+                              withFboId: fboId
+                    withContextChildren: contextChildren
                            withChildren: children];
 }
 

package.json

 {
   "name": "gl-react-native",
-  "version": "0.1.7",
+  "version": "1.0.0-rc1",
   "description": "OpenGL bindings for react-native to implement complex effects over images and components, in the descriptive VDOM paradigm",
   "main": "src/index.js",
   "repository": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "invariant": "2.1.0",
     "react-native": ">=0.9.0 <0.11.0",
-    "gl-react-core": "^0.1.1"
+    "gl-react-core": "1.0.0-rc1"
   },
   "devDependencies": {
     "eslint": "^1.3.1",

src/Target.js → src/Uniform.js

-const {createTarget} = require("gl-react-core");
+const {createUniform} = require("gl-react-core");
 const React = require("react-native");
-module.exports = createTarget(React);
+module.exports = createUniform(React);

src/View.js

 const {createView} = require("gl-react-core");
 const React = require("react-native");
 const Shaders = require("./Shaders");
-const Target = require("./Target");
+const Uniform = require("./Uniform");
 const Component = require("./Component");
 
 const {
@@ -11,7 +11,7 @@ const {
 
 const GLCanvas = requireNativeComponent("GLCanvas", null);
 
-const renderVtarget = function (style, width, height, id, children) {
+const renderVcontent = function (width, height, id, children) {
   const childrenStyle = {
     position: "absolute",
     top: 0,
@@ -20,39 +20,32 @@ const renderVtarget = function (style, width, height, id, children) {
     height: height,
     overflow: "hidden"
   };
-  return <View style={[ childrenStyle, style ]}>{children}</View>;
+  return <View key={id} style={childrenStyle}>{children}</View>;
 };
 
-const renderVGL = function (props, width, height, data, nbTargets, renderId) {
+const renderVGL = function (props) {
+  const { width, height, ...restProps } = props;
   return <GLCanvas
-    ref="native"
-    {...props}
-    style={[ props.style, { width, height } ]}
-    data={data}
-    nbTargets={nbTargets}
-    renderId={renderId}
+    key="native"
+    {...restProps}
+    style={{ width, height }}
   />;
 };
 
-const renderVcontainer = function (style, width, height, targets, renderer) {
-  if (targets) {
-    const parentStyle = [ style, {
-      position: "relative",
-      width: width,
-      height: height,
-      overflow: "hidden"
-    }];
-    return <View style={parentStyle}>
-      {targets}
-      {renderer}
-    </View>;
-  }
-  else {
-    return renderer;
-  }
+const renderVcontainer = function (width, height, contents, renderer) {
+  const parentStyle = {
+    position: "relative",
+    width: width,
+    height: height,
+    overflow: "hidden"
+  };
+  return <View style={parentStyle}>
+    {contents}
+    {renderer}
+  </View>;
 };
 
-const GLView = createView(React, Shaders, Target, Component, renderVcontainer, renderVtarget, renderVGL);
+const GLView = createView(React, Shaders, Uniform, Component, renderVcontainer, renderVcontent, renderVGL);
 
 GLView.prototype.setNativeProps = function (props) {
   this.refs.native.setNativeProps(props);

src/index.js

 const Shaders = require("./Shaders");
 const View = require("./View");
-const Target = require("./Target");
+const Uniform = require("./Uniform");
 const Component = require("./Component");
 
 module.exports = {
   Shaders,
   View,
-  Target,
+  Uniform,
   Component
 };