WIP integrating gl-react-core 0.2.x

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/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);
+  }
+}
+
+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");
+
+const Tests = React.createClass({
+  render: function() {
+    const helloGL =
+      <HelloGL width={64} height={64} />;
+
+    const txt =
+      <View style={{ width: 800, height: 800, position: "relative" }}>
+        {[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";
+
+    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>
+        <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,8 +5,9 @@
 
 @property (nonatomic) GLData *data;
 @property (nonatomic) BOOL opaque;
-@property (nonatomic) NSNumber *nbTargets;
+@property (nonatomic) NSNumber *nbContentTextures;
 @property (nonatomic) NSNumber *renderId;
+@property (nonatomic) NSArray *imagesToPreload;
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge
                    withContext:(EAGLContext*)context;

RNGL/GLCanvas.m

@@ -18,12 +18,12 @@
 
   GLRenderData *_renderData;
   
-  NSArray *_targetTextures;
+  NSArray *_contentTextures;
   NSDictionary *_images; // This caches the currently used images (imageSrc -> GLReactImage)
   
   BOOL _opaque; // opaque prop (if false, the GLCanvas will become transparent)
   
-  BOOL _deferredRendering; // This flag indicates a render has been deferred to the next frame (when using GL.Target)
+  BOOL _deferredRendering; // This flag indicates a render has been deferred to the next frame (when using contents)
   
   GLint defaultFBO;
 }
@@ -63,7 +63,7 @@ NSString* srcResource (id res)
 
 - (void)setRenderId:(NSNumber *)renderId
 {
-  if (_nbTargets > 0) {
+  if (_nbContentTextures > 0) {
     [self setNeedsDisplay];
   }
 }
@@ -87,23 +87,21 @@ NSString* srcResource (id res)
     NSDictionary *prevImages = _images;
     NSMutableDictionary *images = [[NSMutableDictionary alloc] init];
     
-    GLRenderData * (^traverseTree) (GLData *data, int frameIndex);
-    __block __weak GLRenderData * (^weak_traverseTree)(GLData *data, int frameIndex);
-    weak_traverseTree = traverseTree = ^GLRenderData *(GLData *data, int frameIndex) {
+    GLRenderData * (^traverseTree) (GLData *data);
+    __block __weak GLRenderData * (^weak_traverseTree)(GLData *data);
+    weak_traverseTree = traverseTree = ^GLRenderData *(GLData *data) {
       NSNumber *width = data.width;
       NSNumber *height = data.height;
+      int fboId = [data.fboId intValue];
+      
+      NSMutableArray *contextChildren = [[NSMutableArray alloc] init];
+      for (GLData *child in data.contextChildren) {
+        [contextChildren addObject:weak_traverseTree(child)];
+      }
       
-      // Traverse children and compute GLRenderData
       NSMutableArray *children = [[NSMutableArray alloc] init];
-      NSMutableDictionary *fbosMapping = [[NSMutableDictionary alloc] init];
-      int fboId = 0;
-      int i = 0;
       for (GLData *child in data.children) {
-        if (fboId == frameIndex) fboId ++;
-        fbosMapping[[NSNumber numberWithInt:i]] = [NSNumber numberWithInt:fboId];
-        [children addObject:weak_traverseTree(child, fboId)];
-        fboId ++;
-        i ++;
+        [children addObject:weak_traverseTree(child)];
       }
       
       GLShader *shader = [GLShadersRegistry getShader:data.shader];
@@ -119,15 +117,15 @@ NSString* srcResource (id res)
         if (value && (type == GL_SAMPLER_2D || type == GL_SAMPLER_CUBE)) {
           uniforms[uniformName] = [NSNumber numberWithInt:units++];
           NSString *type = [RCTConvert NSString:value[@"type"]];
-          if ([type isEqualToString:@"target"]) {
+          if ([type isEqualToString:@"content"]) {
             int id = [[RCTConvert NSNumber:value[@"id"]] intValue];
-            if (id >= [_targetTextures count]) {
-              [self resizeTargets:id+1];
+            if (id >= [_contentTextures count]) {
+              [self resizeUniformContentTextures:id+1];
             }
-            textures[uniformName] = _targetTextures[id];
+            textures[uniformName] = _contentTextures[id];
           }
           else if ([type isEqualToString:@"framebuffer"]) {
-            NSNumber *id = fbosMapping[[RCTConvert NSNumber:value[@"id"]]];
+            NSNumber *id = [RCTConvert NSNumber:value[@"id"]];
             GLFBO *fbo = [GLShadersRegistry getFBO:id];
             textures[uniformName] = fbo.color[0];
           }
@@ -174,47 +172,58 @@ NSString* srcResource (id res)
         }
       }
 
-      return [[GLRenderData alloc] initWithShader:shader withUniforms:uniforms withTextures:textures withWidth:width withHeight:height withFrameIndex:frameIndex withChildren:children];
+      return [[GLRenderData alloc]
+              initWithShader:shader
+              withUniforms:uniforms
+              withTextures:textures
+              withWidth:width
+              withHeight:height
+              withFboId:fboId
+              withContextChildren:contextChildren
+              withChildren:children];
     };
     
-    _renderData = traverseTree(_data, -1);
+    _renderData = traverseTree(_data);
     _images = images;
     
     [self setNeedsDisplay];
   }
 }
 
-- (void)setNbTargets:(NSNumber *)nbTargets
+- (void)setNbContentTextures:(NSNumber *)nbContentTextures
 {
-  [self resizeTargets:[nbTargets intValue]];
-  _nbTargets = nbTargets;
+  [self resizeUniformContentTextures:[nbContentTextures intValue]];
+  _nbContentTextures = nbContentTextures;
 }
 
-- (void)resizeTargets:(int)n
+- (void)resizeUniformContentTextures:(int)n
 {
   [EAGLContext setCurrentContext:self.context];
-  int length = (int) [_targetTextures count];
+  int length = (int) [_contentTextures count];
   if (length == n) return;
   if (n < length) {
-    _targetTextures = [_targetTextures subarrayWithRange:NSMakeRange(0, n)];
+    _contentTextures = [_contentTextures subarrayWithRange:NSMakeRange(0, n)];
   }
   else {
-    NSMutableArray *targetTextures = [[NSMutableArray alloc] initWithArray:_targetTextures];
-    for (int i = (int) [_targetTextures count]; i < n; i++) {
-      [targetTextures addObject:[[GLTexture alloc] init]];
+    NSMutableArray *contentTextures = [[NSMutableArray alloc] initWithArray:_contentTextures];
+    for (int i = (int) [_contentTextures count]; i < n; i++) {
+      [contentTextures addObject:[[GLTexture alloc] init]];
     }
-    _targetTextures = targetTextures;
+    _contentTextures = contentTextures;
   }
 }
 
 
-- (void)syncTargetTextures
+- (void)syncContentTextures
 {
   int i = 0;
-  for (GLTexture *texture in _targetTextures) {
+  for (GLTexture *texture in _contentTextures) {
     UIView* view = self.superview.subviews[i]; // We take siblings by index (closely related to the JS code)
     if (view) {
-      [texture setPixelsWithView:view];
+      if ([view.subviews count] == 1)
+        [texture setPixelsWithView:view.subviews[0]];
+      else
+        [texture setPixelsWithView:view];
     } else {
       [texture setPixelsEmpty];
     }
@@ -224,7 +233,7 @@ NSString* srcResource (id res)
 
 - (void)drawRect:(CGRect)rect
 {
-  BOOL needsDeferredRendering = _nbTargets > 0;
+  BOOL needsDeferredRendering = _nbContentTextures > 0;
   if (needsDeferredRendering && !_deferredRendering) {
     dispatch_async(dispatch_get_main_queue(), ^{
       _deferredRendering = true;
@@ -252,15 +261,18 @@ NSString* srcResource (id res)
       float w = [renderData.width floatValue] * scale;
       float h = [renderData.height floatValue] * scale;
       
+      for (GLRenderData *child in renderData.contextChildren)
+        weak_recDraw(child);
+      
       for (GLRenderData *child in renderData.children)
         weak_recDraw(child);
       
-      if (renderData.frameIndex == -1) {
+      if (renderData.fboId == -1) {
         glBindFramebuffer(GL_FRAMEBUFFER, defaultFBO);
         glViewport(0, 0, w, h);
       }
       else {
-        GLFBO *fbo = [GLShadersRegistry getFBO:[NSNumber numberWithInt:renderData.frameIndex]];
+        GLFBO *fbo = [GLShadersRegistry getFBO:[NSNumber numberWithInt:renderData.fboId]];
         [fbo setShapeWithWidth:w withHeight:h];
         [fbo bind];
       }
@@ -285,7 +297,7 @@ NSString* srcResource (id res)
     
     glGetIntegerv(GL_FRAMEBUFFER_BINDING, &defaultFBO);
     
-    [self syncTargetTextures];
+    [self syncContentTextures];
     
     recDraw(_renderData);
     

RNGL/GLCanvasManager.m

@@ -18,10 +18,11 @@ 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);
 
 - (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/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];
 }
 

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 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
 };