Migrate examples to 2.0.0

7c3157ba · Gaëtan Renaudeau · 21fbd017 · 7c3157ba · 7c3157ba · 7c3157ba
Commit 7c3157ba authored Dec 02, 2015 by Gaëtan Renaudeau
28 changed files
--- a/Examples/AdvancedEffects/package.json
+++ b/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"
  }

--- a/Examples/AdvancedEffects/src/Banner.js
+++ b/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>;
  }
 }


--- a/Examples/AdvancedEffects/src/Intro.js
+++ b/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,11 +40,9 @@ void main() {
 class Intro extends React.Component {
  render () {
    const { time, fps, width, height } = this.props;
-    return <GL.View
+    return <Surface width={width} height={height} opaque={false}>
+      <GL.Node
        shader={shaders.drunkEffect}
-      width={width}
-      height={height}
-      opaque={false}
        uniforms={{
          time: time,
          freq: 20 - 14 * Math.sin(time / 7),
@@ -71,7 +69,8 @@ class Intro extends React.Component {
            </View>
          </View>
        </GL.Uniform>
-    </GL.View>;
+      </GL.Node>
+    </Surface>;
  }
 }


--- a/Examples/AdvancedEffects/src/Slideshow.js
+++ b/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}>
+      <Surface  width={width} height={height}>
        <Transition
-        width={width}
-        height={height}
          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>

--- a/Examples/AdvancedEffects/src/Transition.js
+++ b/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}

--- a/Examples/AdvancedEffects/src/Vignette.js
+++ b/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,15 +56,16 @@ class Vignette extends React.Component {
  render () {
    const { width, height, time, source } = this.props;
    const { finger } = this.state;
-    return <GL.View
+    return <Surface
+      width={width}
+      height={height}
+      opaque={false}
      preload
      onStartShouldSetResponder={() => true}
      onMoveShouldSetResponder={() => true}
-      onResponderMove={this.onResponderMove}
+      onResponderMove={this.onResponderMove}>
+      <GL.Node
        shader={shaders.imageVignette}
-      width={width}
-      height={height}
-      opaque={false}
        uniforms={{
          time: time,
          freq: 10 + 2 * Math.sin(0.7*time),
@@ -72,7 +74,8 @@ class Vignette extends React.Component {
          moving: 0,
          finger: finger
        }}
-    />;
+      />
+    </Surface>;
  }
 }


--- a/Examples/AdvancedEffects/src/index.js
+++ b/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}

--- a/Examples/Simple/package.json
+++ b/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"
  }

--- a/Examples/Simple/src/AnimatedHelloGL.js
+++ b/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
+    return <Surface width={width} height={height}>
+      <GL.Node
        shader={shaders.helloGL}
-      width={width}
-      height={height}
        uniforms={{ value }}
-    />;
+      />
+    </Surface>;
  }
 }


--- a/Examples/Simple/src/Blur.js
+++ b/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 }) =>

--- a/Examples/Simple/src/Blur1D.js
+++ b/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"
 });
--- a/Examples/Simple/src/HelloGL.js
+++ b/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" }
 );
--- a/Examples/Simple/src/HueRotate.js
+++ b/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" });
--- a/Examples/Simple/src/OneFingerResponse.js
+++ b/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}
+      height={height}>
+      <GL.Node
        shader={shaders.oneFingerResponse}
        uniforms={{ pressed, position }}
-    />;
+      />
+    </Surface>;
  }
 }


--- a/Examples/Simple/src/PieProgress.js
+++ b/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,

--- a/Examples/Simple/src/Saturation.js
+++ b/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 }}

--- a/Examples/Simple/src/index.js
+++ b/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">
+          <Surface width={256} height={171}>
            <Saturation
-              width={256}
-              height={171}
              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}>
+          <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,22 +191,24 @@ class Simple extends Component {
        </Demo>

        <Demo id={7} current={current} title="7. Blur (2-pass)">
-          <Blur preload width={256} height={180} factor={factor + 1}>
+          <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>
+            <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
              <Blur
                width={256}
                height={160}
@@ -230,6 +234,7 @@ class Simple extends Component {
                </Blur>
              </Blur>
            </HueRotate>
+          </Surface>
        </Demo>

        <Demo id={9} current={current} title="9. Texture from array">

--- a/Examples/Tests/package.json
+++ b/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"

--- a/Examples/Tests/src/Add.js
+++ b/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}

--- a/Examples/Tests/src/Blur.js
+++ b/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;

--- a/Examples/Tests/src/Blur1D.js
+++ b/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"
 });
--- a/Examples/Tests/src/Copy.js
+++ b/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}

--- a/Examples/Tests/src/Display2.js
+++ b/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}

--- a/Examples/Tests/src/HelloGL.js
+++ b/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}

--- a/Examples/Tests/src/Layer.js
+++ b/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 }}

--- a/Examples/Tests/src/Multiply.js
+++ b/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}

--- a/Examples/Tests/src/TransparentNonPremultiplied.js
+++ b/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}

--- a/Examples/Tests/src/index.js
+++ b/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,7 +68,8 @@ class Tests extends React.Component {
      </Layer>;

    return <ScrollView style={{ backgroundColor: "#000" }}>
-      <Display2 width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+      <Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+        <Display2>
          <Add width={viewportW/2} height={viewportH/2}>
            {txt}
            {helloGL}
@@ -83,7 +84,7 @@ class Tests extends React.Component {
            {blurredImage}
          </Display2>
        </Display2>
-
+      </Surface>

      <View style={{ flexDirection: "row", flexWrap: "wrap" }}>

@@ -94,34 +95,41 @@ 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>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
              http://i.imgur.com/mp79p5T.png
            </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>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
              <Copy>
                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>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
              <Copy>
                <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>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Copy last>
              <Copy>
                <Copy>
                  <Copy>
@@ -130,13 +138,15 @@ class Tests extends React.Component {
                </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>
                  <Copy>
                    <Copy>
                      http://i.imgur.com/mp79p5T.png
@@ -145,15 +155,18 @@ class Tests extends React.Component {
                </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>
+            </Surface>
          </NativeLayer>
        </NativeLayer>

@@ -161,11 +174,13 @@ 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>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                <TransparentNonPremultiplied>
                  <HelloGL />
                </TransparentNonPremultiplied>
              </TransparentNonPremultiplied>
+            </Surface>
          </NativeLayer>
        </NativeLayer>

@@ -173,7 +188,8 @@ 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>
+            <Surface width={debugSize} height={debugSize}>
+              <TransparentNonPremultiplied>
                <Copy>
                  <TransparentNonPremultiplied>
                    <Copy>
@@ -182,22 +198,26 @@ class Tests extends React.Component {
                  </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} premultipliedAlpha debug>
+          <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} />
-          <Layer width={debugSize} height={debugSize} opaque={false}>
+          <Surface width={debugSize} height={debugSize} opaque={false}>
+            <Layer>
              http://i.imgur.com/mp79p5T.png
              <TransparentNonPremultiplied>
                <Copy>
@@ -209,6 +229,7 @@ class Tests extends React.Component {
                </Copy>
              </TransparentNonPremultiplied>
            </Layer>
+          </Surface>
        </NativeLayer>

      </View>