Migrate examples to 2.0.0

Examples/AdvancedEffects/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react-core": "file:../../../gl-react-core",
     "glsl-transitions": "^2015.11.8",
     "react-native": "^0.14.2"
   }

Examples/AdvancedEffects/src/Banner.js

 const React = require("react-native");
-
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 const shaders = GL.Shaders.create({
   banner: {
     frag: `
@@ -27,13 +27,9 @@ void main( void ) {
 class Banner extends React.Component {
   render () {
     const { width, height, time } = this.props;
-    return <GL.View
-      shader={shaders.banner}
-      width={width}
-      height={height}
-      uniforms={{ time: time }}
-      opaque={false}
-    />;
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node shader={shaders.banner} uniforms={{ time: time }} />
+    </Surface>;
   }
 }
 

Examples/AdvancedEffects/src/Intro.js

@@ -3,8 +3,8 @@ const {
   View,
   Text,
 } = React;
-
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   drunkEffect: {
@@ -40,38 +40,37 @@ void main() {
 class Intro extends React.Component {
   render () {
     const { time, fps, width, height } = this.props;
-    return <GL.View
-      shader={shaders.drunkEffect}
-      width={width}
-      height={height}
-      opaque={false}
-      uniforms={{
-        time: time,
-        freq: 20 - 14 * Math.sin(time / 7),
-        amp: 0.05 - 0.03 * Math.cos(time / 4),
-        colorSeparation: 0.02,
-        moving: 1
-      }}>
-      <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 />"}
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node
+        shader={shaders.drunkEffect}
+        uniforms={{
+          time: time,
+          freq: 20 - 14 * Math.sin(time / 7),
+          amp: 0.05 - 0.03 * Math.cos(time / 4),
+          colorSeparation: 0.02,
+          moving: 1
+        }}>
+        <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>
-        </View>
-      </GL.Uniform>
-    </GL.View>;
+        </GL.Uniform>
+      </GL.Node>
+    </Surface>;
   }
 }
 

Examples/AdvancedEffects/src/Slideshow.js

 const React = require("react-native");
 const { View, Text, StyleSheet } = React;
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 const TransitionGenerator = require("./TransitionGenerator");
 const Transition = require("./Transition");
 
@@ -33,15 +34,15 @@ class Slideshow extends React.Component {
     const transitionUniforms = this._uniforms;
 
     return <View style={styles.root}>
-      <Transition
-        width={width}
-        height={height}
-        progress={transitionProgress}
-        from={transitionFrom}
-        to={transitionTo}
-        shader={transitionShader}
-        uniforms={transitionUniforms}
-      />
+      <Surface  width={width} height={height}>
+        <Transition
+          progress={transitionProgress}
+          from={transitionFrom}
+          to={transitionTo}
+          shader={transitionShader}
+          uniforms={transitionUniforms}
+        />
+      </Surface>
     <View style={styles.legend}>
         <Text style={styles.textName}>{transitionName}</Text>
         <Text style={styles.textInfo}>(GLSL.io)</Text>

Examples/AdvancedEffects/src/Transition.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 module.exports = GL.createComponent(
   ({ width, height, shader, progress, from, to, uniforms }) => {
     const scale = React.PixelRatio.get();
-    return <GL.View
+    return <GL.Node
       preload
       shader={shader}
       width={width}

Examples/AdvancedEffects/src/Vignette.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   imageVignette: {
@@ -55,24 +56,26 @@ class Vignette extends React.Component {
   render () {
     const { width, height, time, source } = this.props;
     const { finger } = this.state;
-    return <GL.View
-      preload
-      onStartShouldSetResponder={() => true}
-      onMoveShouldSetResponder={() => true}
-      onResponderMove={this.onResponderMove}
-      shader={shaders.imageVignette}
+    return <Surface
       width={width}
       height={height}
       opaque={false}
-      uniforms={{
-        time: time,
-        freq: 10 + 2 * Math.sin(0.7*time),
-        texture: source,
-        amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
-        moving: 0,
-        finger: finger
-      }}
-    />;
+      preload
+      onStartShouldSetResponder={() => true}
+      onMoveShouldSetResponder={() => true}
+      onResponderMove={this.onResponderMove}>
+      <GL.Node
+        shader={shaders.imageVignette}
+        uniforms={{
+          time: time,
+          freq: 10 + 2 * Math.sin(0.7*time),
+          texture: source,
+          amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
+          moving: 0,
+          finger: finger
+        }}
+      />
+    </Surface>;
   }
 }
 

Examples/AdvancedEffects/src/index.js

+require("gl-react-core/react-native");
 const React = require("react-native");
 const {
   StyleSheet,
@@ -61,6 +62,7 @@ class AdvancedEffects extends React.Component {
           width={viewportW}
           height={introH}
         />
+
         <Vignette
           time={time}
           width={imgW}

Examples/Simple/package.json

@@ -7,6 +7,7 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
+    "gl-react-core": "file:../../../gl-react-core",
     "react-native": "^0.14.2",
     "react-native-material-kit": "^0.2.2"
   }

Examples/Simple/src/AnimatedHelloGL.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -38,12 +39,12 @@ class HelloGL extends React.Component {
   render () {
     const { width, height } = this.props;
     const { value } = this.state;
-    return <GL.View
-      shader={shaders.helloGL}
-      width={width}
-      height={height}
-      uniforms={{ value }}
-    />;
+    return <Surface width={width} height={height}>
+      <GL.Node
+        shader={shaders.helloGL}
+        uniforms={{ value }}
+      />
+    </Surface>;
   }
 }
 

Examples/Simple/src/Blur.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 const Blur1D = require("./Blur1D");
 
 module.exports = GL.createComponent(({ width, height, factor, children }) =>

Examples/Simple/src/Blur1D.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   blur1D: {
@@ -35,7 +35,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, direction, children }) =>
-    <GL.View
+    <GL.Node
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -44,7 +44,7 @@ module.exports = GL.createComponent(
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>
+    </GL.Node>
 , {
   displayName: "Blur1D"
 });

Examples/Simple/src/HelloGL.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -14,11 +14,7 @@ void main () { // This function is called FOR EACH PIXEL
   }
 });
 
-module.exports = GL.createComponent(({ width, height }) =>
-  <GL.View
-    shader={shaders.helloGL}
-    width={width}
-    height={height}
-  />,
+module.exports = GL.createComponent(() =>
+  <GL.Node shader={shaders.helloGL} />,
   { displayName: "HelloGL" }
 );

Examples/Simple/src/HueRotate.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   hueRotate: {
@@ -26,10 +26,10 @@ void main() {
 
 module.exports = GL.createComponent(
   ({ hue, children, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.hueRotate}
     uniforms={{ hue }}>
     <GL.Uniform name="tex">{children}</GL.Uniform>
-  </GL.View>
+  </GL.Node>
 , { displayName: "HueRotate" });

Examples/Simple/src/OneFingerResponse.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
+const {Surface} = require("gl-react-native");
 
 const shaders = GL.Shaders.create({
   oneFingerResponse: {
@@ -55,7 +56,7 @@ class OneFingerResponse extends React.Component {
   render () {
     const { width, height } = this.props;
     const { pressed, position } = this.state;
-    return <GL.View
+    return <Surface
       onStartShouldSetResponderCapture={() => true}
       onMoveShouldSetResponderCapture={() => true}
       onResponderTerminationRequest={() => false}
@@ -64,10 +65,12 @@ class OneFingerResponse extends React.Component {
       onResponderRelease={this.onTouchEnd}
       onResponderTerminate={this.onTouchEnd}
       width={width}
-      height={height}
-      shader={shaders.oneFingerResponse}
-      uniforms={{ pressed, position }}
-    />;
+      height={height}>
+      <GL.Node
+        shader={shaders.oneFingerResponse}
+        uniforms={{ pressed, position }}
+      />
+    </Surface>;
   }
 }
 

Examples/Simple/src/PieProgress.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   pieProgress: {
@@ -41,11 +41,8 @@ module.exports = GL.createComponent(
     colorOutside,
     radius
   }) =>
-  <GL.View
-    width={width}
-    height={height}
+  <GL.Node
     shader={shaders.pieProgress}
-    opaque={false}
     uniforms={{
       dim: [ width, height ],
       progress,

Examples/Simple/src/Saturation.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   saturation: {
@@ -21,7 +21,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ factor, image, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.saturation}
     uniforms={{ factor, image }}

Examples/Simple/src/index.js

+require("gl-react-core/react-native");
+
 const React = require("react-native");
 const {
   StyleSheet,
@@ -8,6 +10,8 @@ const {
   Component,
 } = React;
 
+const { Surface } = require("gl-react-native");
+
 const {
   mdl: {
     Progress,
@@ -109,7 +113,9 @@ class Simple extends Component {
 
       <Demos onChange={current => this.setState({ current })} value={current}>
         <Demo title="1. Hello GL">
-          <HelloGL width={256} height={171} ref="helloGL" />
+          <Surface width={256} height={171} ref="helloGL">
+            <HelloGL />
+          </Surface>
           <View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row" }}>
             <Button onPress={this.onCapture1}>captureFrame()</Button>
             {captured && <Image source={{ uri:captured }} style={{ marginLeft: 20, width: 51, height: 34 }} />}
@@ -117,12 +123,12 @@ class Simple extends Component {
         </Demo>
 
         <Demo title="2. Saturate an Image">
-          <Saturation
-              width={256}
-              height={171}
+          <Surface width={256} height={171}>
+            <Saturation
               factor={saturationFactor}
               image={{ uri: "http://i.imgur.com/iPKTONG.jpg" }}
             />
+          </Surface>
           <Slider
             max={8}
             onChange={saturationFactor => this.setState({ saturationFactor })}
@@ -130,15 +136,13 @@ class Simple extends Component {
         </Demo>
 
         <Demo id={3} current={current} title="3. Hue Rotate on Text+Image">
-          <HueRotate
-            autoRedraw
-            width={256}
-            height={180}
-            hue={hue}>
-            <Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
-            <Text style={styles.demoText1}>Throw me to the wolves</Text>
-            <Text style={styles.demoText2}>{text}</Text>
-          </HueRotate>
+          <Surface autoRedraw width={256} height={180}>
+            <HueRotate hue={hue}>
+              <Image style={{ width: 256, height: 244 }} source={{ uri: "http://i.imgur.com/qVxHrkY.jpg" }}/>
+              <Text style={styles.demoText1}>Throw me to the wolves</Text>
+              <Text style={styles.demoText2}>{text}</Text>
+            </HueRotate>
+          </Surface>
           <Slider
             max={2 * Math.PI}
             onChange={hue => this.setState({ hue })}
@@ -161,11 +165,9 @@ class Simple extends Component {
             }}
             source={{ uri: "http://i.imgur.com/qM9BHCy.jpg" }}/>
             <View style={{ position: "absolute", top: 0, left: 0 }}>
-              <PieProgress
-                width={256}
-                height={180}
-                progress={progress}
-              />
+              <Surface width={256} height={180} opaque={false}>
+                <PieProgress progress={progress} width={256} height={180} />
+              </Surface>
             </View>
           </View>
           <Slider
@@ -189,47 +191,50 @@ class Simple extends Component {
         </Demo>
 
         <Demo id={7} current={current} title="7. Blur (2-pass)">
-          <Blur preload width={256} height={180} factor={factor + 1}>
-            http://i.imgur.com/3On9QEu.jpg
-          </Blur>
+          <Surface preload width={256} height={180}>
+            <Blur width={256} height={180} factor={factor + 1}>
+              http://i.imgur.com/3On9QEu.jpg
+            </Blur>
+          </Surface>
           <Slider
             max={2}
             onChange={factor => this.setState({ factor })} />
         </Demo>
 
         <Demo id={8} current={current} title="8. Blur+Hue over UI">
-          <HueRotate
-            hue={-switch1 + 2 * switch2 + 4 * switch3}
+          <Surface
             width={256}
             height={160}
             autoRedraw
             eventsThrough
             visibleContent>
-            <Blur
-              width={256}
-              height={160}
-              factor={factor}>
+            <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
               <Blur
                 width={256}
                 height={160}
-                factor={factor/2}>
-                <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#F9F9F9" }}>
-                  <Slider
-                    style={{ height: 80 }}
-                    max={2}
-                    onChange={factor => this.setState({ factor })}
-                  />
-                <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
-                  <Switch style={{flex:1}} checked={switch1} onCheckedChange={({checked:switch1}) => this.setState({ switch1 })} />
-                  <Switch style={{flex:1}} checked={switch2} onCheckedChange={({checked:switch2}) => this.setState({ switch2 })} />
-                  <Switch style={{flex:1}} checked={switch3} onCheckedChange={({checked:switch3}) => this.setState({ switch3 })} />
-                </View>
-                <Progress progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
+                factor={factor}>
+                <Blur
+                  width={256}
+                  height={160}
+                  factor={factor/2}>
+                  <View style={{ width: 256, height: 160, padding: 10, backgroundColor: "#F9F9F9" }}>
+                    <Slider
+                      style={{ height: 80 }}
+                      max={2}
+                      onChange={factor => this.setState({ factor })}
+                    />
+                  <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
+                    <Switch style={{flex:1}} checked={switch1} onCheckedChange={({checked:switch1}) => this.setState({ switch1 })} />
+                    <Switch style={{flex:1}} checked={switch2} onCheckedChange={({checked:switch2}) => this.setState({ switch2 })} />
+                    <Switch style={{flex:1}} checked={switch3} onCheckedChange={({checked:switch3}) => this.setState({ switch3 })} />
+                  </View>
+                  <Progress progress={factor} style={{height: 10, marginTop: 8, flex:1}} />
 
-                </View>
+                  </View>
+                </Blur>
               </Blur>
-            </Blur>
-          </HueRotate>
+            </HueRotate>
+          </Surface>
         </Demo>
 
         <Demo id={9} current={current} title="9. Texture from array">

Examples/Tests/package.json

@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "gl-react-native": "file:../..",
-    "react-native": "^0.15.0"
+    "gl-react-core": "file:../../../gl-react-core",
+    "react-native": "^0.14.2"
   },
   "devDependencies": {
     "react-native-cli": "^0.1.7"

Examples/Tests/src/Add.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   add: {
@@ -23,7 +23,7 @@ module.exports = GL.createComponent(
   ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Add");
     const [t1, t2] = children;
-    return <GL.View
+    return <GL.Node
       shader={shaders.add}
       width={width}
       height={height}

Examples/Tests/src/Blur.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 const {
   PropTypes
 } = React;

Examples/Tests/src/Blur1D.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const {
   PropTypes
@@ -34,7 +34,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, direction, children }) =>
-    <GL.View
+    <GL.Node
       shader={shaders.blur1D}
       width={width}
       height={height}
@@ -43,7 +43,7 @@ module.exports = GL.createComponent(
         resolution: [ width, height ]
       }}>
       <GL.Uniform name="t">{children}</GL.Uniform>
-    </GL.View>
+    </GL.Node>
 , {
   displayName: "Blur1D"
 });

Examples/Tests/src/Copy.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   Copy: {
@@ -23,7 +23,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ width, height, children: t, last, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     shader={shaders.Copy}
     width={width}

Examples/Tests/src/Display2.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   display2: {
@@ -27,7 +27,7 @@ module.exports = GL.createComponent(
     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
+    return <GL.Node
       {...rest}
       shader={shaders.display2}
       width={width}

Examples/Tests/src/HelloGL.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   helloGL: {
@@ -16,7 +16,7 @@ void main () { // This function is called FOR EACH PIXEL
 
 module.exports = GL.createComponent(
   ({ width, height }) =>
-  <GL.View
+  <GL.Node
     shader={shaders.helloGL}
     width={width}
     height={height}

Examples/Tests/src/Layer.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   layer: {
@@ -23,7 +23,7 @@ module.exports = GL.createComponent(
   ({ children, ...rest }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Layer");
     const [t1, t2] = children;
-    return <GL.View
+    return <GL.Node
       {...rest}
       shader={shaders.layer}
       uniforms={{ t1, t2 }}

Examples/Tests/src/Multiply.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   multiply: {
@@ -23,7 +23,7 @@ module.exports = GL.createComponent(
   ({ width, height, children }) => {
     if (!children || children.length !== 2) throw new Error("You must provide 2 children to Multiply");
     const [t1, t2] = children;
-    return <GL.View
+    return <GL.Node
       shader={shaders.multiply}
       width={width}
       height={height}

Examples/Tests/src/TransparentNonPremultiplied.js

 const React = require("react-native");
-const GL = require("gl-react-native");
+const GL = require("gl-react-core");
 
 const shaders = GL.Shaders.create({
   TransparentNonPremultiplied: {
@@ -18,7 +18,7 @@ void main () {
 
 module.exports = GL.createComponent(
   ({ children: t, ...rest }) =>
-  <GL.View
+  <GL.Node
     {...rest}
     opaque={false}
     shader={shaders.TransparentNonPremultiplied}

Examples/Tests/src/index.js

+require("gl-react-core/react-native");
 const React = require("react-native");
 const {
-  AppRegistry,
   Text,
   View,
   ScrollView,
   Image,
 } = React;
-
+const { Surface } = require("gl-react-native");
 const Blur = require("./Blur");
 const Add = require("./Add");
 const Multiply = require("./Multiply");
@@ -54,7 +54,7 @@ class Tests extends React.Component {
         </Text>)}
       </View>;
 
-    const img = "http://i.imgur.com/zJIxPEo.jpg?t="+Date.now();
+    const img = "http://i.imgur.com/zJIxPEo.jpg";
 
     const blurredImage =
       <Blur factor={4} passes={6} width={200} height={200}>
@@ -68,22 +68,23 @@ class Tests extends React.Component {
       </Layer>;
 
     return <ScrollView style={{ backgroundColor: "#000" }}>
-      <Display2 width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
-        <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}
+      <Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+        <Display2>
+          <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>
-      </Display2>
-
+      </Surface>
 
       <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
 
@@ -94,47 +95,40 @@ class Tests extends React.Component {
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            http://i.imgur.com/mp79p5T.png
-          </Copy>
-        </NativeLayer>
-
-        <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            <Copy>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               http://i.imgur.com/mp79p5T.png
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            <Copy>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 http://i.imgur.com/mp79p5T.png
               </Copy>
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false} last>
-            <Copy>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
               <Copy>
                 <Copy>
                   http://i.imgur.com/mp79p5T.png
                 </Copy>
               </Copy>
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Copy width={debugSize} height={debugSize} opaque={false}>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
             <Copy last>
               <Copy>
                 <Copy>
@@ -144,28 +138,35 @@ class Tests extends React.Component {
                 </Copy>
               </Copy>
             </Copy>
-          </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <NativeLayer>
-            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
-              <HelloGL />
-            </TransparentNonPremultiplied>
-          </NativeLayer>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
+              <Copy>
+                <Copy>
+                  <Copy>
+                    <Copy>
+                      http://i.imgur.com/mp79p5T.png
+                    </Copy>
+                  </Copy>
+                </Copy>
+              </Copy>
+            </Copy>
+          </Surface>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
+            <Surface width={debugSize} height={debugSize}>
               <TransparentNonPremultiplied>
                 <HelloGL />
               </TransparentNonPremultiplied>
-            </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
@@ -173,42 +174,62 @@ class Tests extends React.Component {
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
           <NativeLayer>
             <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-            <TransparentNonPremultiplied width={debugSize} height={debugSize} premultipliedAlpha>
-              <Copy>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                 <TransparentNonPremultiplied>
-                  <Copy>
-                    http://i.imgur.com/S22HNaU.png
-                  </Copy>
+                  <HelloGL />
                 </TransparentNonPremultiplied>
-              </Copy>
-            </TransparentNonPremultiplied>
+              </TransparentNonPremultiplied>
+            </Surface>
           </NativeLayer>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Layer width={debugSize} height={debugSize} opaque={false} premultipliedAlpha debug>
-            http://i.imgur.com/mp79p5T.png
-            <TransparentNonPremultiplied>
-              <HelloGL />
-            </TransparentNonPremultiplied>
-          </Layer>
+          <NativeLayer>
+            <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
+                <Copy>
+                  <TransparentNonPremultiplied>
+                    <Copy>
+                      http://i.imgur.com/S22HNaU.png
+                    </Copy>
+                  </TransparentNonPremultiplied>
+                </Copy>
+              </TransparentNonPremultiplied>
+            </Surface>
+          </NativeLayer>
         </NativeLayer>
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Layer width={debugSize} height={debugSize} opaque={false}>
-            http://i.imgur.com/mp79p5T.png
-            <TransparentNonPremultiplied>
-              <Copy>
-                <TransparentNonPremultiplied>
-                  <Copy>
-                    http://i.imgur.com/S22HNaU.png
-                  </Copy>
-                </TransparentNonPremultiplied>
-              </Copy>
-            </TransparentNonPremultiplied>
-          </Layer>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
+              http://i.imgur.com/mp79p5T.png
+              <TransparentNonPremultiplied>
+                <HelloGL />
+              </TransparentNonPremultiplied>
+            </Layer>
+          </Surface>
+        </NativeLayer>
+
+        <NativeLayer width={debugSize} height={debugSize}>
+          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
+              http://i.imgur.com/mp79p5T.png
+              <TransparentNonPremultiplied>
+                <Copy>
+                  <TransparentNonPremultiplied>
+                    <Copy>
+                      http://i.imgur.com/S22HNaU.png
+                    </Copy>
+                  </TransparentNonPremultiplied>
+                </Copy>
+              </TransparentNonPremultiplied>
+            </Layer>
+          </Surface>
         </NativeLayer>
 
       </View>