From 49dea67f96bf845583800882291e9817f6a2f6a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Renaudeau?= <renaudeau.gaetan@gmail.com>
Date: Mon, 31 Jul 2017 22:24:11 +0200
Subject: [PATCH] update some examples

---
 example/src/AdvancedEffects/Banner.js     |  21 +-
 example/src/AdvancedEffects/Transition.js |  36 +-
 example/src/AdvancedEffects/Vignette.js   |  59 ++--
 example/src/Simple/index.js               | 412 +++++++++++++---------
 example/src/Tests/index.js                | 273 ++++++++------
 5 files changed, 468 insertions(+), 333 deletions(-)

diff --git a/example/src/AdvancedEffects/Banner.js b/example/src/AdvancedEffects/Banner.js
index 5af5f93..41e21cc 100644
--- a/example/src/AdvancedEffects/Banner.js
+++ b/example/src/AdvancedEffects/Banner.js
@@ -1,6 +1,6 @@
 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"
-      onLoad={() => console.log("Banner onLoad")}
-      onProgress={e => console.log("Banner onProgress", e.nativeEvent)}>
-      <GL.Node shader={shaders.banner} uniforms={{ time }} />
-    </Surface>;
+    return (
+      <Surface
+        width={width}
+        height={height}
+        backgroundColor="transparent"
+        setZOrderOnTop
+        onLoad={() => console.log("Banner onLoad")}
+        onProgress={e => console.log("Banner onProgress", e.nativeEvent)}
+      >
+        <GL.Node shader={shaders.banner} uniforms={{ time }} />
+      </Surface>
+    );
   }
 }
 
diff --git a/example/src/AdvancedEffects/Transition.js b/example/src/AdvancedEffects/Transition.js
index 1e1bb32..20c00a2 100644
--- a/example/src/AdvancedEffects/Transition.js
+++ b/example/src/AdvancedEffects/Transition.js
@@ -1,23 +1,27 @@
-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
-      preload
-      shader={shader}
-      width={width}
-      height={height}
-      backgroundColor="transparent"
-      uniforms={{
-        progress,
-        from,
-        to,
-        ...uniforms,
-        resolution: [ width * scale, height * scale ]
-      }}
-    />;
+    return (
+      <GL.Node
+        preload
+        shader={shader}
+        width={width}
+        height={height}
+        backgroundColor="transparent"
+        setZOrderOnTop
+        uniforms={{
+          progress,
+          from,
+          to,
+          ...uniforms,
+          resolution: [width * scale, height * scale]
+        }}
+      />
+    );
   },
-  { displayName: "Transition" });
+  { displayName: "Transition" }
+);
diff --git a/example/src/AdvancedEffects/Vignette.js b/example/src/AdvancedEffects/Vignette.js
index 4ec5d85..c5d3b27 100644
--- a/example/src/AdvancedEffects/Vignette.js
+++ b/example/src/AdvancedEffects/Vignette.js
@@ -1,6 +1,6 @@
 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
-      width={width}
-      height={height}
-      backgroundColor="transparent"
-      preload
-      onStartShouldSetResponder={() => true}
-      onMoveShouldSetResponder={() => true}
-      onLoad={() => console.log("Vignette onLoad")}
-      onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
-      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>;
+    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}
+      >
+        <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>
+    );
   }
 }
 
diff --git a/example/src/Simple/index.js b/example/src/Simple/index.js
index 9eccdbe..a201b72 100644
--- a/example/src/Simple/index.js
+++ b/example/src/Simple/index.js
@@ -1,4 +1,4 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
 import {
   StyleSheet,
   Text,
@@ -7,7 +7,7 @@ import {
   TextInput,
   TouchableOpacity,
   Slider,
-  Switch,
+  Switch
 } from "react-native";
 
 import { Surface } from "gl-react-native";
@@ -19,47 +19,54 @@ import HueRotate from "./HueRotate";
 import PieProgress from "./PieProgress";
 import OneFingerResponse from "./OneFingerResponse";
 import AnimatedHelloGL from "./AnimatedHelloGL";
-import {Blur} from "gl-react-blur";
+import { Blur } from "gl-react-blur";
 import Button from "./Button";
 
 class Demo extends Component {
-  render () {
+  render() {
     const { title, children } = this.props;
-    return <View>
-      <Text style={styles.demoTitle}>{title}</Text>
-      <View style={styles.demo}>
-        {children}
+    return (
+      <View>
+        <Text style={styles.demoTitle}>
+          {title}
+        </Text>
+        <View style={styles.demo}>
+          {children}
+        </View>
       </View>
-    </View>;
+    );
   }
 }
 
 class Demos extends Component {
-  render () {
+  render() {
     const { children, onChange, value } = this.props;
-    return <View>
-      <View style={styles.nav}>
-        {React.Children.map(children, (demo, i) =>
-          <Text
-            style={{ flex: 1, padding: 10 }}
-            textStyle={{
-              textAlign: "center",
-              color: i!==value ? "#123" : "#69c",
-              fontWeight: "bold"
-            }}
-            onPress={() => onChange(i)}>
-            {""+(i+1)}
-          </Text>)}
+    return (
+      <View>
+        <View style={styles.nav}>
+          {React.Children.map(children, (demo, i) =>
+            <Text
+              style={{ flex: 1, padding: 10 }}
+              textStyle={{
+                textAlign: "center",
+                color: i !== value ? "#123" : "#69c",
+                fontWeight: "bold"
+              }}
+              onPress={() => onChange(i)}
+            >
+              {"" + (i + 1)}
+            </Text>
+          )}
+        </View>
+        <View style={styles.demos}>
+          {children[value]}
+        </View>
       </View>
-      <View style={styles.demos}>
-        {children[value]}
-      </View>
-  </View>;
+    );
   }
 }
 
 class Simple extends Component {
-
   state = {
     current: 0,
     saturationFactor: 1,
@@ -74,22 +81,22 @@ class Simple extends Component {
     captureConfig: null
   };
 
-
   onCapture1 = () => {
     const captureConfig = {
-      quality: Math.round((Math.random() * 100))/100,
-      type: Math.random() < 0.5 ? "jpg": "png",
+      quality: Math.round(Math.random() * 100) / 100,
+      type: Math.random() < 0.5 ? "jpg" : "png",
       format: Math.random() < 0.5 ? "base64" : "file"
     };
     if (captureConfig.format === "file") {
-      captureConfig.filePath = RNFS.DocumentDirectoryPath+"/hellogl_capture.png";
+      captureConfig.filePath =
+        RNFS.DocumentDirectoryPath + "/hellogl_capture.png";
     }
     this.refs.helloGL
-    .captureFrame(captureConfig)
-    .then(captured => this.setState({ captured, captureConfig }));
+      .captureFrame(captureConfig)
+      .then(captured => this.setState({ captured, captureConfig }));
   };
 
-  render () {
+  render() {
     const {
       current,
       saturationFactor,
@@ -104,158 +111,211 @@ class Simple extends Component {
       captureConfig
     } = this.state;
 
-    return <View style={styles.container}>
-
-      <Demos onChange={current => this.setState({ current })} value={current}>
-        <Demo id={1} title="1. Hello GL">
-          <Surface width={256} height={171} ref="helloGL">
-            <HelloGL />
-          </Surface>
-          <View style={{ marginTop: 20, flexDirection: "row" }}>
-            <Button onPress={this.onCapture1}>
-              captureFrame()
-            </Button>
-            {captured &&
-              <Image source={{ uri: captured }}
-                style={{ marginLeft: 20, width: 51, height: 34 }}
-              /> }
-          </View>
-          {captureConfig &&
-            <View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row", justifyContent: "space-between" }}>
-              <Text style={{ fontSize: 10 }}>
-                format={captureConfig.format}
-              </Text>
-              <Text style={{ fontSize: 10 }}>
-                type={captureConfig.type}
-              </Text>
-              <Text style={{ fontSize: 10 }}>
-                quality={captureConfig.quality+""}
-              </Text>
+    return (
+      <View style={styles.container}>
+        <Demos onChange={current => this.setState({ current })} value={current}>
+          <Demo id={1} title="1. Hello GL">
+            <Surface width={256} height={171} ref="helloGL">
+              <HelloGL />
+            </Surface>
+            <View style={{ marginTop: 20, flexDirection: "row" }}>
+              <Button onPress={this.onCapture1}>captureFrame()</Button>
+              {captured &&
+                <Image
+                  source={{ uri: captured }}
+                  style={{ marginLeft: 20, width: 51, height: 34 }}
+                />}
             </View>
-          }
-          {captured &&
-            <Text numberOfLines={1} style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}>
-              {captured.slice(0, 100)}
-            </Text> }
-        </Demo>
+            {captureConfig &&
+              <View
+                style={{
+                  paddingTop: 20,
+                  alignItems: "center",
+                  flexDirection: "row",
+                  justifyContent: "space-between"
+                }}
+              >
+                <Text style={{ fontSize: 10 }}>
+                  format={captureConfig.format}
+                </Text>
+                <Text style={{ fontSize: 10 }}>
+                  type={captureConfig.type}
+                </Text>
+                <Text style={{ fontSize: 10 }}>
+                  quality={captureConfig.quality + ""}
+                </Text>
+              </View>}
+            {captured &&
+              <Text
+                numberOfLines={1}
+                style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}
+              >
+                {captured.slice(0, 100)}
+              </Text>}
+          </Demo>
 
-        <Demo id={2} title="2. Saturate an Image">
-          <Surface width={256} height={171}>
-            <Saturation
-              factor={saturationFactor}
-              image={{ uri: "https://i.imgur.com/iPKTONG.jpg" }}
+          <Demo id={2} title="2. Saturate an Image">
+            <Surface width={256} height={171}>
+              <Saturation
+                factor={saturationFactor}
+                image={{ uri: "https://i.imgur.com/iPKTONG.jpg" }}
+              />
+            </Surface>
+            <Slider
+              maximumValue={8}
+              onValueChange={saturationFactor =>
+                this.setState({ saturationFactor })}
             />
-          </Surface>
-          <Slider
-            maximumValue={8}
-            onValueChange ={saturationFactor => this.setState({ saturationFactor })}
-          />
-        </Demo>
+          </Demo>
 
-        <Demo id={3} current={current} title="3. Hue Rotate on Text+Image">
-          <Surface autoRedraw width={256} height={180}>
-            <HueRotate hue={hue}>
-              <View key="hue" style={{ width: 256, height: 180 }}>
-                <Image style={{ width: 256, height: 244 }} source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}/>
-                <Text style={styles.demoText1}>Throw me to the wolves</Text>
-                <Text style={styles.demoText2}>{text}</Text>
-              </View>
-            </HueRotate>
-          </Surface>
-          <Slider
-            maximumValue={2 * Math.PI}
-            onValueChange={hue => this.setState({ hue })}
-          />
-          <TextInput
-            style={{ height: 40, borderColor: "#aaa", borderWidth: 1 }}
-            onChangeText={text => this.setState({ text })}
-            value={text}
-          />
-        </Demo>
+          <Demo id={3} current={current} title="3. Hue Rotate on Text+Image">
+            <Surface autoRedraw width={256} height={180}>
+              <HueRotate hue={hue}>
+                <View key="hue" style={{ width: 256, height: 180 }}>
+                  <Image
+                    style={{ width: 256, height: 244 }}
+                    source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}
+                  />
+                  <Text style={styles.demoText1}>Throw me to the wolves</Text>
+                  <Text style={styles.demoText2}>
+                    {text}
+                  </Text>
+                </View>
+              </HueRotate>
+            </Surface>
+            <Slider
+              maximumValue={2 * Math.PI}
+              onValueChange={hue => this.setState({ hue })}
+            />
+            <TextInput
+              style={{ height: 40, borderColor: "#aaa", borderWidth: 1 }}
+              onChangeText={text => this.setState({ text })}
+              value={text}
+            />
+          </Demo>
 
-        <Demo id={4} current={current} title="4. Progress Indicator">
-          <View style={{ position: "relative", width: 256, height: 180 }}>
-            <TouchableOpacity>
-              <Image source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }}
+          <Demo id={4} current={current} title="4. Progress Indicator">
+            <View style={{ position: "relative", width: 256, height: 180 }}>
+              <TouchableOpacity>
+                <Image
+                  source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }}
+                  style={{
+                    width: 256,
+                    height: 180,
+                    position: "absolute",
+                    top: 0,
+                    left: 0
+                  }}
+                />
+              </TouchableOpacity>
+              <View
+                pointerEvents="box-none"
                 style={{
-                  width: 256,
-                  height: 180,
                   position: "absolute",
                   top: 0,
-                  left: 0
+                  left: 0,
+                  backgroundColor: "transparent"
                 }}
-              />
-            </TouchableOpacity>
-            <View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
-              <Surface width={256} height={180} backgroundColor="transparent" eventsThrough>
-                <PieProgress progress={progress} />
-              </Surface>
+              >
+                <Surface
+                  width={256}
+                  height={180}
+                  backgroundColor="transparent"
+                  setZOrderOnTop
+                  eventsThrough
+                >
+                  <PieProgress progress={progress} />
+                </Surface>
+              </View>
             </View>
-          </View>
-          <Slider
-            maximumValue={1}
-            onValueChange={progress => this.setState({ progress })}
-          />
-        </Demo>
-
-        <Demo id={5} current={current} title="5. Touch Responsive">
-          <OneFingerResponse
-            width={256}
-            height={180}
-          />
-        </Demo>
+            <Slider
+              maximumValue={1}
+              onValueChange={progress => this.setState({ progress })}
+            />
+          </Demo>
 
-        <Demo id={6} current={current} title="6. Animation">
-          <AnimatedHelloGL
-            width={256}
-            height={180}
-          />
-        </Demo>
+          <Demo id={5} current={current} title="5. Touch Responsive">
+            <OneFingerResponse width={256} height={180} />
+          </Demo>
 
-        <Demo id={7} current={current} title="7. Blur">
-          <Surface preload width={256} height={180}>
-            <Blur factor={factor * 2} passes={4}>
-              https://i.imgur.com/3On9QEu.jpg
-            </Blur>
-          </Surface>
-          <Slider
-            maximumValue={2}
-            onValueChange={factor => this.setState({ factor })} />
-        </Demo>
+          <Demo id={6} current={current} title="6. Animation">
+            <AnimatedHelloGL width={256} height={180} />
+          </Demo>
 
-        <Demo id={8} current={current} title="8. Blur+Hue over UI">
-          <Surface
-            width={256}
-            height={160}
-            autoRedraw
-            eventsThrough
-            visibleContent>
-            <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
-              <Blur factor={factor}>
-                <View key="blur" style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}>
-                  <Slider
-                    style={{ height: 80 }}
-                    maximumValue={1}
-                    onValueChange={factor => this.setState({ factor })}
-                  />
-                <View style={{ height: 60, flexDirection: "row", alignItems: "center" }}>
-                  <Switch style={{flex:1}} value={switch1} onValueChange={(switch1) => this.setState({ switch1 })} />
-                  <Switch style={{flex:1}} value={switch2} onValueChange={(switch2) => this.setState({ switch2 })} />
-                  <Switch style={{flex:1}} value={switch3} onValueChange={(switch3) => this.setState({ switch3 })} />
-                </View>
-                </View>
+          <Demo id={7} current={current} title="7. Blur">
+            <Surface preload width={256} height={180}>
+              <Blur factor={factor * 2} passes={4}>
+                https://i.imgur.com/3On9QEu.jpg
               </Blur>
-            </HueRotate>
-          </Surface>
-          <Text>Note: This is highly experimental and not yet performant enough.</Text>
-        </Demo>
+            </Surface>
+            <Slider
+              maximumValue={2}
+              onValueChange={factor => this.setState({ factor })}
+            />
+          </Demo>
 
-        <Demo id={9} current={current} title="9. Texture from array">
-          <Text>Not Supported Yet</Text>
-        </Demo>
+          <Demo id={8} current={current} title="8. Blur+Hue over UI">
+            <Surface
+              width={256}
+              height={160}
+              autoRedraw
+              eventsThrough
+              visibleContent
+            >
+              <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
+                <Blur factor={factor}>
+                  <View
+                    key="blur"
+                    style={{
+                      width: 256,
+                      height: 160,
+                      padding: 10,
+                      backgroundColor: "#f9f9f9"
+                    }}
+                  >
+                    <Slider
+                      style={{ height: 80 }}
+                      maximumValue={1}
+                      onValueChange={factor => this.setState({ factor })}
+                    />
+                    <View
+                      style={{
+                        height: 60,
+                        flexDirection: "row",
+                        alignItems: "center"
+                      }}
+                    >
+                      <Switch
+                        style={{ flex: 1 }}
+                        value={switch1}
+                        onValueChange={switch1 => this.setState({ switch1 })}
+                      />
+                      <Switch
+                        style={{ flex: 1 }}
+                        value={switch2}
+                        onValueChange={switch2 => this.setState({ switch2 })}
+                      />
+                      <Switch
+                        style={{ flex: 1 }}
+                        value={switch3}
+                        onValueChange={switch3 => this.setState({ switch3 })}
+                      />
+                    </View>
+                  </View>
+                </Blur>
+              </HueRotate>
+            </Surface>
+            <Text>
+              Note: This is highly experimental and not yet performant enough.
+            </Text>
+          </Demo>
 
-      </Demos>
-    </View>;
+          <Demo id={9} current={current} title="9. Texture from array">
+            <Text>Not Supported Yet</Text>
+          </Demo>
+        </Demos>
+      </View>
+    );
   }
 }
 
@@ -263,7 +323,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: "#F9F9F9",
-    paddingTop: 50,
+    paddingTop: 50
   },
   nav: {
     flexDirection: "row",
@@ -274,7 +334,7 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     marginLeft: 40,
     width: 276,
-    marginBottom: 40,
+    marginBottom: 40
   },
   demoTitle: {
     marginBottom: 16,
@@ -282,11 +342,11 @@ const styles = StyleSheet.create({
     alignSelf: "flex-start",
     color: "#999",
     fontWeight: "300",
-    fontSize: 20,
+    fontSize: 20
   },
   demo: {
     marginBottom: 64,
-    marginLeft: 20,
+    marginLeft: 20
   },
   demoText1: {
     position: "absolute",
@@ -311,7 +371,7 @@ const styles = StyleSheet.create({
     fontWeight: "300",
     fontSize: 32,
     letterSpacing: -1
-  },
+  }
 });
 
 module.exports = Simple;
diff --git a/example/src/Tests/index.js b/example/src/Tests/index.js
index a418f23..8f78c37 100644
--- a/example/src/Tests/index.js
+++ b/example/src/Tests/index.js
@@ -1,7 +1,7 @@
 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,142 +16,203 @@ 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={{
-          position: "absolute",
-          top: 20+100*i,
-          left: 0,
+    const txt = (
+      <View
+        key="txt"
+        style={{
           width: 400,
-          height: 100,
-          textAlign: "center",
-          color: ["#f00", "#0f0", "#00f", "#fff"][i],
-          fontSize: 40
-        }}>
-          Hello World {i}
-        </Text>)}
-      </View>;
+          height: 400,
+          position: "relative",
+          backgroundColor: "transparent"
+        }}
+      >
+        {[0, 1, 2, 3].map(i =>
+          <Text
+            key={i}
+            style={{
+              position: "absolute",
+              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>
+    );
 
     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}>
-        <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}
+      </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}>
+              {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" }}>
-
-        <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} />
-        </NativeLayer>
+        </Surface>
 
-        <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">
-            <Copy last>
-              <Copy>
+        <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}
+            />
+          </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"
+              setZOrderOnTop
+            >
+              <Copy last>
                 <Copy>
                   <Copy>
-                    https://i.imgur.com/mp79p5T.png
+                    <Copy>https://i.imgur.com/mp79p5T.png</Copy>
                   </Copy>
                 </Copy>
               </Copy>
-            </Copy>
-          </Surface>
-        </NativeLayer>
+            </Surface>
+          </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"
+              setZOrderOnTop
+            >
+              <Layer>
+                https://i.imgur.com/mp79p5T.png
+                <TransparentNonPremultiplied>
+                  <HelloGL />
+                </TransparentNonPremultiplied>
+              </Layer>
+            </Surface>
+          </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"
+              setZOrderOnTop
+            >
+              <Layer>
+                https://i.imgur.com/mp79p5T.png
+                <TransparentNonPremultiplied>
+                  <Copy>
+                    <TransparentNonPremultiplied>
+                      <Copy>https://i.imgur.com/S22HNaU.png</Copy>
+                    </TransparentNonPremultiplied>
+                  </Copy>
+                </TransparentNonPremultiplied>
+              </Layer>
+            </Surface>
+          </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">
-            <Layer>
-              https://i.imgur.com/mp79p5T.png
-              <TransparentNonPremultiplied>
-                <HelloGL />
-              </TransparentNonPremultiplied>
-            </Layer>
+          <Surface width={debugSize} height={debugSize}>
+            <HelloGL width={2} height={2} pixelRatio={1} />
           </Surface>
-        </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">
-            <Layer>
-              https://i.imgur.com/mp79p5T.png
-              <TransparentNonPremultiplied>
-                <Copy>
-                  <TransparentNonPremultiplied>
-                    <Copy>
-                      https://i.imgur.com/S22HNaU.png
-                    </Copy>
-                  </TransparentNonPremultiplied>
-                </Copy>
-              </TransparentNonPremultiplied>
-            </Layer>
+          <Surface
+            style={{ borderRadius: 50 }}
+            width={debugSize}
+            height={debugSize}
+          >
+            <HelloGL />
           </Surface>
-        </NativeLayer>
-
-        <Surface width={debugSize} height={debugSize}>
-          <HelloGL width={2} height={2} pixelRatio={1} />
-        </Surface>
 
-        <Surface style={{ borderRadius: 50 }} width={debugSize} height={debugSize}>
-          <HelloGL />
-        </Surface>
-
-        <Surface style={{ margin: 4 }} width={300} height={300}>
-          <Blur passes={6} factor={2}>
-            https://i.imgur.com/rkiglmm.jpg
-          </Blur>
-        </Surface>
-
-      </View>
-
-    </ScrollView>;
+          <Surface style={{ margin: 4 }} width={300} height={300}>
+            <Blur passes={6} factor={2}>
+              https://i.imgur.com/rkiglmm.jpg
+            </Blur>
+          </Surface>
+        </View>
+      </ScrollView>
+    );
   }
 }
 
-- 
2.26.2