update some examples

example/src/AdvancedEffects/Banner.js

 import React from "react";
 import GL from "gl-react";
-import {Surface} from "gl-react-native";
+import { Surface } from "gl-react-native";
 const shaders = GL.Shaders.create({
   banner: {
     frag: `
@@ -25,13 +25,20 @@ void main( void ) {
 });
 
 class Banner extends React.Component {
-  render () {
+  render() {
     const { width, height, time } = this.props;
-    return <Surface width={width} height={height} backgroundColor="transparent"
+    return (
+      <Surface
+        width={width}
+        height={height}
+        backgroundColor="transparent"
+        setZOrderOnTop
         onLoad={() => console.log("Banner onLoad")}
-      onProgress={e => console.log("Banner onProgress", e.nativeEvent)}>
+        onProgress={e => console.log("Banner onProgress", e.nativeEvent)}
+      >
         <GL.Node shader={shaders.banner} uniforms={{ time }} />
-    </Surface>;
+      </Surface>
+    );
   }
 }
 

example/src/AdvancedEffects/Transition.js

-import {PixelRatio} from "react-native";
+import { PixelRatio } from "react-native";
 import React from "react";
 import GL from "gl-react";
 
 module.exports = GL.createComponent(
   ({ width, height, shader, progress, from, to, uniforms }) => {
     const scale = PixelRatio.get();
-    return <GL.Node
+    return (
+      <GL.Node
         preload
         shader={shader}
         width={width}
         height={height}
         backgroundColor="transparent"
+        setZOrderOnTop
         uniforms={{
           progress,
           from,
           to,
           ...uniforms,
-        resolution: [ width * scale, height * scale ]
+          resolution: [width * scale, height * scale]
         }}
-    />;
+      />
+    );
   },
-  { displayName: "Transition" });
+  { displayName: "Transition" }
+);

example/src/AdvancedEffects/Vignette.js

 import React from "react";
 import GL from "gl-react";
-import {Surface} from "gl-react-native";
+import { Surface } from "gl-react-native";
 
 const shaders = GL.Shaders.create({
   imageVignette: {
@@ -38,46 +38,49 @@ void main() {
   }
 });
 
-
 class Vignette extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.onResponderMove = this.onResponderMove.bind(this);
     this.state = {
       finger: [0.5, 0.5]
     };
   }
-  onResponderMove (evt) {
+  onResponderMove(evt) {
     const { width, height } = this.props;
     const { locationX, locationY } = evt.nativeEvent;
-    this.setState({ finger: [locationX/width, 1-locationY/height] });
+    this.setState({ finger: [locationX / width, 1 - locationY / height] });
   }
 
-  render () {
+  render() {
     const { width, height, time, source } = this.props;
     const { finger } = this.state;
-    return <Surface
+    return (
+      <Surface
         width={width}
         height={height}
         backgroundColor="transparent"
+        setZOrderOnTop
         preload
         onStartShouldSetResponder={() => true}
         onMoveShouldSetResponder={() => true}
         onLoad={() => console.log("Vignette onLoad")}
         onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
-      onResponderMove={this.onResponderMove}>
+        onResponderMove={this.onResponderMove}
+      >
         <GL.Node
           shader={shaders.imageVignette}
           uniforms={{
             time: time,
-          freq: 10 + 2 * Math.sin(0.7*time),
+            freq: 10 + 2 * Math.sin(0.7 * time),
             texture: source,
-          amp: 0.05 + Math.max(0, 0.03*Math.cos(time)),
+            amp: 0.05 + Math.max(0, 0.03 * Math.cos(time)),
             moving: 0,
             finger: finger
           }}
         />
-    </Surface>;
+      </Surface>
+    );
   }
 }
 

example/src/Tests/index.js

 import React from "react";
-import {Text, View, ScrollView, Image} from "react-native";
-import {Surface} from "gl-react-native";
-import {Blur} from "gl-react-blur";
+import { Text, View, ScrollView, Image } from "react-native";
+import { Surface } from "gl-react-native";
+import { Blur } from "gl-react-blur";
 import Add from "./Add";
 import Multiply from "./Multiply";
 import Layer from "./Layer";
@@ -16,63 +16,88 @@ import Dimensions from "Dimensions";
 const { width: viewportW, height: viewportH } = Dimensions.get("window");
 
 class Tests extends React.Component {
-
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.onLoad = this.onLoad.bind(this);
     this.onProgress = this.onProgress.bind(this);
   }
-  onLoad () {
+  onLoad() {
     console.log("LOADED");
   }
-  onProgress ({nativeEvent: { progress, loaded, total }}) {
+  onProgress({ nativeEvent: { progress, loaded, total } }) {
     console.log("PROGRESS", progress, loaded, total);
   }
-  render () {
+  render() {
     const debugSize = viewportW / 4;
 
-    const helloGL =
-      <HelloGL width={64} height={64} />;
+    const helloGL = <HelloGL width={64} height={64} />;
 
-    const txt =
-      <View key="txt" style={{ width: 400, height: 400, position: "relative", backgroundColor: "transparent" }}>
-        {[0,1,2,3].map(i => <Text key={i} style={{
+    const txt = (
+      <View
+        key="txt"
+        style={{
+          width: 400,
+          height: 400,
+          position: "relative",
+          backgroundColor: "transparent"
+        }}
+      >
+        {[0, 1, 2, 3].map(i =>
+          <Text
+            key={i}
+            style={{
               position: "absolute",
-          top: 20+100*i,
+              top: 20 + 100 * i,
               left: 0,
               width: 400,
               height: 100,
               textAlign: "center",
               color: ["#f00", "#0f0", "#00f", "#fff"][i],
               fontSize: 40
-        }}>
+            }}
+          >
             Hello World {i}
-        </Text>)}
-      </View>;
+          </Text>
+        )}
+      </View>
+    );
 
     const img = "https://i.imgur.com/zJIxPEo.jpg";
 
-    const blurredImage =
+    const blurredImage = (
       <Blur factor={4} passes={6} width={200} height={200}>
         {img}
-      </Blur>;
+      </Blur>
+    );
 
-    const blurredImageOverText =
+    const blurredImageOverText = (
       <Layer>
         {blurredImage}
         {txt}
-      </Layer>;
-
-    return <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
-
-      <Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}>
+      </Layer>
+    );
+
+    return (
+      <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
+        <Surface
+          width={viewportW}
+          height={viewportW}
+          preload
+          onLoad={this.onLoad}
+          onProgress={this.onProgress}
+        >
           <Display2>
-          <Add width={viewportW/2} 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}>
+            <Display2 width={viewportW / 2} height={viewportH / 2} vertical>
+              <Blur
+                factor={1}
+                passes={4}
+                width={viewportW / 2}
+                height={viewportH / 4}
+              >
                 <Multiply>
                   {blurredImageOverText}
                   {helloGL}
@@ -84,21 +109,38 @@ class Tests extends React.Component {
         </Surface>
 
         <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
-
           <NativeLayer width={debugSize} height={debugSize}>
-          <Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Image key={1} source={{ uri: "https://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
+            <Image
+              key={0}
+              source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
+              width={debugSize}
+              height={debugSize}
+            />
+            <Image
+              key={1}
+              source={{ uri: "https://i.imgur.com/mp79p5T.png" }}
+              width={debugSize}
+              height={debugSize}
+            />
           </NativeLayer>
 
           <NativeLayer width={debugSize} height={debugSize}>
-          <Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Surface width={debugSize} height={debugSize} backgroundColor="transparent">
+            <Image
+              key={0}
+              source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
+              width={debugSize}
+              height={debugSize}
+            />
+            <Surface
+              width={debugSize}
+              height={debugSize}
+              backgroundColor="transparent"
+              setZOrderOnTop
+            >
               <Copy last>
                 <Copy>
                   <Copy>
-                  <Copy>
-                    https://i.imgur.com/mp79p5T.png
-                  </Copy>
+                    <Copy>https://i.imgur.com/mp79p5T.png</Copy>
                   </Copy>
                 </Copy>
               </Copy>
@@ -106,8 +148,17 @@ class Tests extends React.Component {
           </NativeLayer>
 
           <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Surface width={debugSize} height={debugSize} backgroundColor="transparent">
+            <Image
+              source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
+              width={debugSize}
+              height={debugSize}
+            />
+            <Surface
+              width={debugSize}
+              height={debugSize}
+              backgroundColor="transparent"
+              setZOrderOnTop
+            >
               <Layer>
                 https://i.imgur.com/mp79p5T.png
                 <TransparentNonPremultiplied>
@@ -118,16 +169,23 @@ class Tests extends React.Component {
           </NativeLayer>
 
           <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Surface width={debugSize} height={debugSize} backgroundColor="transparent">
+            <Image
+              source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
+              width={debugSize}
+              height={debugSize}
+            />
+            <Surface
+              width={debugSize}
+              height={debugSize}
+              backgroundColor="transparent"
+              setZOrderOnTop
+            >
               <Layer>
                 https://i.imgur.com/mp79p5T.png
                 <TransparentNonPremultiplied>
                   <Copy>
                     <TransparentNonPremultiplied>
-                    <Copy>
-                      https://i.imgur.com/S22HNaU.png
-                    </Copy>
+                      <Copy>https://i.imgur.com/S22HNaU.png</Copy>
                     </TransparentNonPremultiplied>
                   </Copy>
                 </TransparentNonPremultiplied>
@@ -139,7 +197,11 @@ class Tests extends React.Component {
             <HelloGL width={2} height={2} pixelRatio={1} />
           </Surface>
 
-        <Surface style={{ borderRadius: 50 }} width={debugSize} height={debugSize}>
+          <Surface
+            style={{ borderRadius: 50 }}
+            width={debugSize}
+            height={debugSize}
+          >
             <HelloGL />
           </Surface>
 
@@ -148,10 +210,9 @@ class Tests extends React.Component {
               https://i.imgur.com/rkiglmm.jpg
             </Blur>
           </Surface>
-
         </View>
-
-    </ScrollView>;
+      </ScrollView>
+    );
   }
 }