diff --git a/example/src/AdvancedEffects/Banner.js b/example/src/AdvancedEffects/Banner.js
index 5af5f9373886c47823c13abc300daf282744bdc5..41e21cc7c55fcd9cba70b714fb36333a412e8f4a 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 console.log("Banner onLoad")}
- onProgress={e => console.log("Banner onProgress", e.nativeEvent)}>
-
- ;
+ return (
+ console.log("Banner onLoad")}
+ onProgress={e => console.log("Banner onProgress", e.nativeEvent)}
+ >
+
+
+ );
}
}
diff --git a/example/src/AdvancedEffects/Transition.js b/example/src/AdvancedEffects/Transition.js
index 1e1bb329131bb089eaa6f37095408c4a93a8ec6f..20c00a2962541726f0f2e68ac669448f8acb26c7 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 ;
+ return (
+
+ );
},
- { displayName: "Transition" });
+ { displayName: "Transition" }
+);
diff --git a/example/src/AdvancedEffects/Vignette.js b/example/src/AdvancedEffects/Vignette.js
index 4ec5d8555275e7e2c589513fb47406f48591e861..c5d3b2759e6eade6bdaa8d1903308b94ae9987e6 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 true}
- onMoveShouldSetResponder={() => true}
- onLoad={() => console.log("Vignette onLoad")}
- onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
- onResponderMove={this.onResponderMove}>
-
- ;
+ return (
+ true}
+ onMoveShouldSetResponder={() => true}
+ onLoad={() => console.log("Vignette onLoad")}
+ onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
+ onResponderMove={this.onResponderMove}
+ >
+
+
+ );
}
}
diff --git a/example/src/Simple/index.js b/example/src/Simple/index.js
index 9eccdbed6518abfb224f9557f103a570bb283f6b..a201b72cf223df6a33fae7bdf77e51eac944f2d6 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
- {title}
-
- {children}
+ return (
+
+
+ {title}
+
+
+ {children}
+
- ;
+ );
}
}
class Demos extends Component {
- render () {
+ render() {
const { children, onChange, value } = this.props;
- return
-
- {React.Children.map(children, (demo, i) =>
- onChange(i)}>
- {""+(i+1)}
- )}
+ return (
+
+
+ {React.Children.map(children, (demo, i) =>
+ onChange(i)}
+ >
+ {"" + (i + 1)}
+
+ )}
+
+
+ {children[value]}
+
-
- {children[value]}
-
- ;
+ );
}
}
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
-
- this.setState({ current })} value={current}>
-
-
-
-
-
-
- {captured &&
- }
-
- {captureConfig &&
-
-
- format={captureConfig.format}
-
-
- type={captureConfig.type}
-
-
- quality={captureConfig.quality+""}
-
+ return (
+
+ this.setState({ current })} value={current}>
+
+
+
+
+
+
+ {captured &&
+ }
- }
- {captured &&
-
- {captured.slice(0, 100)}
- }
-
+ {captureConfig &&
+
+
+ format={captureConfig.format}
+
+
+ type={captureConfig.type}
+
+
+ quality={captureConfig.quality + ""}
+
+ }
+ {captured &&
+
+ {captured.slice(0, 100)}
+ }
+
-
-
-
+
+
+
+
+ this.setState({ saturationFactor })}
/>
-
- this.setState({ saturationFactor })}
- />
-
+
-
-
-
-
-
- Throw me to the wolves
- {text}
-
-
-
- this.setState({ hue })}
- />
- this.setState({ text })}
- value={text}
- />
-
+
+
+
+
+
+ Throw me to the wolves
+
+ {text}
+
+
+
+
+ this.setState({ hue })}
+ />
+ this.setState({ text })}
+ value={text}
+ />
+
-
-
-
-
+
+
+
+
+
-
-
-
-
-
+ >
+
+
+
+
-
- this.setState({ progress })}
- />
-
-
-
-
-
+ this.setState({ progress })}
+ />
+
-
-
-
+
+
+
-
-
-
- https://i.imgur.com/3On9QEu.jpg
-
-
- this.setState({ factor })} />
-
+
+
+
-
-
-
-
-
- this.setState({ factor })}
- />
-
- this.setState({ switch1 })} />
- this.setState({ switch2 })} />
- this.setState({ switch3 })} />
-
-
+
+
+
+ https://i.imgur.com/3On9QEu.jpg
-
-
- Note: This is highly experimental and not yet performant enough.
-
+
+ this.setState({ factor })}
+ />
+
-
- Not Supported Yet
-
+
+
+
+
+
+ this.setState({ factor })}
+ />
+
+ this.setState({ switch1 })}
+ />
+ this.setState({ switch2 })}
+ />
+ this.setState({ switch3 })}
+ />
+
+
+
+
+
+
+ Note: This is highly experimental and not yet performant enough.
+
+
-
- ;
+
+ Not Supported Yet
+
+
+
+ );
}
}
@@ -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 a418f239819ec01b31da474746257593e2d5c5e0..8f78c37a87f03f2a416c6dbf33270d4d976dfad9 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 =
- ;
+ const helloGL = ;
- const txt =
-
- {[0,1,2,3].map(i =>
- Hello World {i}
- )}
- ;
+ height: 400,
+ position: "relative",
+ backgroundColor: "transparent"
+ }}
+ >
+ {[0, 1, 2, 3].map(i =>
+
+ Hello World {i}
+
+ )}
+
+ );
const img = "https://i.imgur.com/zJIxPEo.jpg";
- const blurredImage =
+ const blurredImage = (
{img}
- ;
+
+ );
- const blurredImageOverText =
+ const blurredImageOverText = (
{blurredImage}
{txt}
- ;
-
- return
-
-
-
-
- {txt}
- {helloGL}
-
-
-
-
- {blurredImageOverText}
- {helloGL}
-
-
- {blurredImage}
+
+ );
+
+ return (
+
+
+
+
+ {txt}
+ {helloGL}
+
+
+
+
+ {blurredImageOverText}
+ {helloGL}
+
+
+ {blurredImage}
+
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
- https://i.imgur.com/mp79p5T.png
+ https://i.imgur.com/mp79p5T.png
-
-
-
+
+
+
+
+
+
+
+ https://i.imgur.com/mp79p5T.png
+
+
+
+
+
+
+
+
+
+
+
+ https://i.imgur.com/mp79p5T.png
+
+
+
+ https://i.imgur.com/S22HNaU.png
+
+
+
+
+
+
-
-
-
-
- https://i.imgur.com/mp79p5T.png
-
-
-
-
+
+
-
-
-
-
-
- https://i.imgur.com/mp79p5T.png
-
-
-
-
- https://i.imgur.com/S22HNaU.png
-
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
- https://i.imgur.com/rkiglmm.jpg
-
-
-
-
-
- ;
+
+
+ https://i.imgur.com/rkiglmm.jpg
+
+
+
+
+ );
}
}