Skip to content

G
gl-react-native-v2
Commit 49dea67f authored by Gaëtan Renaudeau's avatar Gaëtan Renaudeau
Browse files
Options

update some examples

parent 785d7df1
Show whitespace changes
Inline Side-by-side
Showing with 468 additions and 333 deletions
example/src/AdvancedEffects/Banner.js
View file @ 49dea67f
import React from "react"; import React from "react";
import GL from "gl-react"; import GL from "gl-react";
import {Surface} from "gl-react-native"; import { Surface } from "gl-react-native";
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
banner: { banner: {
frag: ` frag: `
...@@ -25,13 +25,20 @@ void main( void ) { ...@@ -25,13 +25,20 @@ void main( void ) {
}); });
class Banner extends React.Component { class Banner extends React.Component {
render () { render() {
const { width, height, time } = this.props; 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")} 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 }} /> <GL.Node shader={shaders.banner} uniforms={{ time }} />
</Surface>; </Surface>
);
} }
} }
......
example/src/AdvancedEffects/Transition.js
View file @ 49dea67f
import {PixelRatio} from "react-native"; import { PixelRatio } from "react-native";
import React from "react"; import React from "react";
import GL from "gl-react"; import GL from "gl-react";
module.exports = GL.createComponent( module.exports = GL.createComponent(
({ width, height, shader, progress, from, to, uniforms }) => { ({ width, height, shader, progress, from, to, uniforms }) => {
const scale = PixelRatio.get(); const scale = PixelRatio.get();
return <GL.Node return (
<GL.Node
preload preload
shader={shader} shader={shader}
width={width} width={width}
height={height} height={height}
backgroundColor="transparent" backgroundColor="transparent"
setZOrderOnTop
uniforms={{ uniforms={{
progress, progress,
from, from,
to, to,
...uniforms, ...uniforms,
resolution: [ width * scale, height * scale ] resolution: [width * scale, height * scale]
}} }}
/>; />
);
}, },
{ displayName: "Transition" }); { displayName: "Transition" }
);
example/src/AdvancedEffects/Vignette.js
View file @ 49dea67f
import React from "react"; import React from "react";
import GL from "gl-react"; import GL from "gl-react";
import {Surface} from "gl-react-native"; import { Surface } from "gl-react-native";
const shaders = GL.Shaders.create({ const shaders = GL.Shaders.create({
imageVignette: { imageVignette: {
...@@ -38,46 +38,49 @@ void main() { ...@@ -38,46 +38,49 @@ void main() {
} }
}); });
class Vignette extends React.Component { class Vignette extends React.Component {
constructor (props) { constructor(props) {
super(props); super(props);
this.onResponderMove = this.onResponderMove.bind(this); this.onResponderMove = this.onResponderMove.bind(this);
this.state = { this.state = {
finger: [0.5, 0.5] finger: [0.5, 0.5]
}; };
} }
onResponderMove (evt) { onResponderMove(evt) {
const { width, height } = this.props; const { width, height } = this.props;
const { locationX, locationY } = evt.nativeEvent; 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 { width, height, time, source } = this.props;
const { finger } = this.state; const { finger } = this.state;
return <Surface return (
<Surface
width={width} width={width}
height={height} height={height}
backgroundColor="transparent" backgroundColor="transparent"
setZOrderOnTop
preload preload
onStartShouldSetResponder={() => true} onStartShouldSetResponder={() => true}
onMoveShouldSetResponder={() => true} onMoveShouldSetResponder={() => true}
onLoad={() => console.log("Vignette onLoad")} onLoad={() => console.log("Vignette onLoad")}
onProgress={e => console.log("Vignette onProgress", e.nativeEvent)} onProgress={e => console.log("Vignette onProgress", e.nativeEvent)}
onResponderMove={this.onResponderMove}> onResponderMove={this.onResponderMove}
>
<GL.Node <GL.Node
shader={shaders.imageVignette} shader={shaders.imageVignette}
uniforms={{ uniforms={{
time: time, time: time,
freq: 10 + 2 * Math.sin(0.7*time), freq: 10 + 2 * Math.sin(0.7 * time),
texture: source, 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, moving: 0,
finger: finger finger: finger
}} }}
/> />
</Surface>; </Surface>
);
} }
} }
......
example/src/Simple/index.js
View file @ 49dea67f
import React, {Component} from "react"; import React, { Component } from "react";
import { import {
StyleSheet, StyleSheet,
Text, Text,
...@@ -7,7 +7,7 @@ import { ...@@ -7,7 +7,7 @@ import {
TextInput, TextInput,
TouchableOpacity, TouchableOpacity,
Slider, Slider,
Switch, Switch
} from "react-native"; } from "react-native";
import { Surface } from "gl-react-native"; import { Surface } from "gl-react-native";
...@@ -19,47 +19,54 @@ import HueRotate from "./HueRotate"; ...@@ -19,47 +19,54 @@ import HueRotate from "./HueRotate";
import PieProgress from "./PieProgress"; import PieProgress from "./PieProgress";
import OneFingerResponse from "./OneFingerResponse"; import OneFingerResponse from "./OneFingerResponse";
import AnimatedHelloGL from "./AnimatedHelloGL"; import AnimatedHelloGL from "./AnimatedHelloGL";
import {Blur} from "gl-react-blur"; import { Blur } from "gl-react-blur";
import Button from "./Button"; import Button from "./Button";
class Demo extends Component { class Demo extends Component {
render () { render() {
const { title, children } = this.props; const { title, children } = this.props;
return <View> return (
<Text style={styles.demoTitle}>{title}</Text> <View>
<Text style={styles.demoTitle}>
{title}
</Text>
<View style={styles.demo}> <View style={styles.demo}>
{children} {children}
</View> </View>
</View>; </View>
);
} }
} }
class Demos extends Component { class Demos extends Component {
render () { render() {
const { children, onChange, value } = this.props; const { children, onChange, value } = this.props;
return <View> return (
<View>
<View style={styles.nav}> <View style={styles.nav}>
{React.Children.map(children, (demo, i) => {React.Children.map(children, (demo, i) =>
<Text <Text
style={{ flex: 1, padding: 10 }} style={{ flex: 1, padding: 10 }}
textStyle={{ textStyle={{
textAlign: "center", textAlign: "center",
color: i!==value ? "#123" : "#69c", color: i !== value ? "#123" : "#69c",
fontWeight: "bold" fontWeight: "bold"
}} }}
onPress={() => onChange(i)}> onPress={() => onChange(i)}
{""+(i+1)} >
</Text>)} {"" + (i + 1)}
</Text>
)}
</View> </View>
<View style={styles.demos}> <View style={styles.demos}>
{children[value]} {children[value]}
</View> </View>
</View>; </View>
);
} }
} }
class Simple extends Component { class Simple extends Component {
state = { state = {
current: 0, current: 0,
saturationFactor: 1, saturationFactor: 1,
...@@ -74,22 +81,22 @@ class Simple extends Component { ...@@ -74,22 +81,22 @@ class Simple extends Component {
captureConfig: null captureConfig: null
}; };
onCapture1 = () => { onCapture1 = () => {
const captureConfig = { const captureConfig = {
quality: Math.round((Math.random() * 100))/100, quality: Math.round(Math.random() * 100) / 100,
type: Math.random() < 0.5 ? "jpg": "png", type: Math.random() < 0.5 ? "jpg" : "png",
format: Math.random() < 0.5 ? "base64" : "file" format: Math.random() < 0.5 ? "base64" : "file"
}; };
if (captureConfig.format === "file") { if (captureConfig.format === "file") {
captureConfig.filePath = RNFS.DocumentDirectoryPath+"/hellogl_capture.png"; captureConfig.filePath =
RNFS.DocumentDirectoryPath + "/hellogl_capture.png";
} }
this.refs.helloGL this.refs.helloGL
.captureFrame(captureConfig) .captureFrame(captureConfig)
.then(captured => this.setState({ captured, captureConfig })); .then(captured => this.setState({ captured, captureConfig }));
}; };
render () { render() {
const { const {
current, current,
saturationFactor, saturationFactor,
...@@ -104,24 +111,30 @@ class Simple extends Component { ...@@ -104,24 +111,30 @@ class Simple extends Component {
captureConfig captureConfig
} = this.state; } = this.state;
return <View style={styles.container}> return (
<View style={styles.container}>
<Demos onChange={current => this.setState({ current })} value={current}> <Demos onChange={current => this.setState({ current })} value={current}>
<Demo id={1} title="1. Hello GL"> <Demo id={1} title="1. Hello GL">
<Surface width={256} height={171} ref="helloGL"> <Surface width={256} height={171} ref="helloGL">
<HelloGL /> <HelloGL />
</Surface> </Surface>
<View style={{ marginTop: 20, flexDirection: "row" }}> <View style={{ marginTop: 20, flexDirection: "row" }}>
<Button onPress={this.onCapture1}> <Button onPress={this.onCapture1}>captureFrame()</Button>
captureFrame()
</Button>
{captured && {captured &&
<Image source={{ uri: captured }} <Image
source={{ uri: captured }}
style={{ marginLeft: 20, width: 51, height: 34 }} style={{ marginLeft: 20, width: 51, height: 34 }}
/> } />}
</View> </View>
{captureConfig && {captureConfig &&
<View style={{ paddingTop: 20, alignItems: "center", flexDirection: "row", justifyContent: "space-between" }}> <View
style={{
paddingTop: 20,
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between"
}}
>
<Text style={{ fontSize: 10 }}> <Text style={{ fontSize: 10 }}>
format={captureConfig.format} format={captureConfig.format}
</Text> </Text>
...@@ -129,14 +142,16 @@ class Simple extends Component { ...@@ -129,14 +142,16 @@ class Simple extends Component {
type={captureConfig.type} type={captureConfig.type}
</Text> </Text>
<Text style={{ fontSize: 10 }}> <Text style={{ fontSize: 10 }}>
quality={captureConfig.quality+""} quality={captureConfig.quality + ""}
</Text> </Text>
</View> </View>}
}
{captured && {captured &&
<Text numberOfLines={1} style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}> <Text
numberOfLines={1}
style={{ marginTop: 10, fontSize: 10, color: "#aaa" }}
>
{captured.slice(0, 100)} {captured.slice(0, 100)}
</Text> } </Text>}
</Demo> </Demo>
<Demo id={2} title="2. Saturate an Image"> <Demo id={2} title="2. Saturate an Image">
...@@ -148,7 +163,8 @@ class Simple extends Component { ...@@ -148,7 +163,8 @@ class Simple extends Component {
</Surface> </Surface>
<Slider <Slider
maximumValue={8} maximumValue={8}
onValueChange ={saturationFactor => this.setState({ saturationFactor })} onValueChange={saturationFactor =>
this.setState({ saturationFactor })}
/> />
</Demo> </Demo>
...@@ -156,9 +172,14 @@ class Simple extends Component { ...@@ -156,9 +172,14 @@ class Simple extends Component {
<Surface autoRedraw width={256} height={180}> <Surface autoRedraw width={256} height={180}>
<HueRotate hue={hue}> <HueRotate hue={hue}>
<View key="hue" style={{ width: 256, height: 180 }}> <View key="hue" style={{ width: 256, height: 180 }}>
<Image style={{ width: 256, height: 244 }} source={{ uri: "https://i.imgur.com/qVxHrkY.jpg" }}/> <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.demoText1}>Throw me to the wolves</Text>
<Text style={styles.demoText2}>{text}</Text> <Text style={styles.demoText2}>
{text}
</Text>
</View> </View>
</HueRotate> </HueRotate>
</Surface> </Surface>
...@@ -176,7 +197,8 @@ class Simple extends Component { ...@@ -176,7 +197,8 @@ class Simple extends Component {
<Demo id={4} current={current} title="4. Progress Indicator"> <Demo id={4} current={current} title="4. Progress Indicator">
<View style={{ position: "relative", width: 256, height: 180 }}> <View style={{ position: "relative", width: 256, height: 180 }}>
<TouchableOpacity> <TouchableOpacity>
<Image source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }} <Image
source={{ uri: "https://i.imgur.com/qM9BHCy.jpg" }}
style={{ style={{
width: 256, width: 256,
height: 180, height: 180,
...@@ -186,8 +208,22 @@ class Simple extends Component { ...@@ -186,8 +208,22 @@ class Simple extends Component {
}} }}
/> />
</TouchableOpacity> </TouchableOpacity>
<View pointerEvents="box-none" style={{ position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}> <View
<Surface width={256} height={180} backgroundColor="transparent" eventsThrough> pointerEvents="box-none"
style={{
position: "absolute",
top: 0,
left: 0,
backgroundColor: "transparent"
}}
>
<Surface
width={256}
height={180}
backgroundColor="transparent"
setZOrderOnTop
eventsThrough
>
<PieProgress progress={progress} /> <PieProgress progress={progress} />
</Surface> </Surface>
</View> </View>
...@@ -199,17 +235,11 @@ class Simple extends Component { ...@@ -199,17 +235,11 @@ class Simple extends Component {
</Demo> </Demo>
<Demo id={5} current={current} title="5. Touch Responsive"> <Demo id={5} current={current} title="5. Touch Responsive">
<OneFingerResponse <OneFingerResponse width={256} height={180} />
width={256}
height={180}
/>
</Demo> </Demo>
<Demo id={6} current={current} title="6. Animation"> <Demo id={6} current={current} title="6. Animation">
<AnimatedHelloGL <AnimatedHelloGL width={256} height={180} />
width={256}
height={180}
/>
</Demo> </Demo>
<Demo id={7} current={current} title="7. Blur"> <Demo id={7} current={current} title="7. Blur">
...@@ -220,7 +250,8 @@ class Simple extends Component { ...@@ -220,7 +250,8 @@ class Simple extends Component {
</Surface> </Surface>
<Slider <Slider
maximumValue={2} maximumValue={2}
onValueChange={factor => this.setState({ factor })} /> onValueChange={factor => this.setState({ factor })}
/>
</Demo> </Demo>
<Demo id={8} current={current} title="8. Blur+Hue over UI"> <Demo id={8} current={current} title="8. Blur+Hue over UI">
...@@ -229,33 +260,62 @@ class Simple extends Component { ...@@ -229,33 +260,62 @@ class Simple extends Component {
height={160} height={160}
autoRedraw autoRedraw
eventsThrough eventsThrough
visibleContent> visibleContent
>
<HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}> <HueRotate hue={-switch1 + 2 * switch2 + 4 * switch3}>
<Blur factor={factor}> <Blur factor={factor}>
<View key="blur" style={{ width: 256, height: 160, padding: 10, backgroundColor: "#f9f9f9" }}> <View
key="blur"
style={{
width: 256,
height: 160,
padding: 10,
backgroundColor: "#f9f9f9"
}}
>
<Slider <Slider
style={{ height: 80 }} style={{ height: 80 }}
maximumValue={1} maximumValue={1}
onValueChange={factor => this.setState({ factor })} onValueChange={factor => this.setState({ factor })}
/> />
<View style={{ height: 60, flexDirection: "row", alignItems: "center" }}> <View
<Switch style={{flex:1}} value={switch1} onValueChange={(switch1) => this.setState({ switch1 })} /> style={{
<Switch style={{flex:1}} value={switch2} onValueChange={(switch2) => this.setState({ switch2 })} /> height: 60,
<Switch style={{flex:1}} value={switch3} onValueChange={(switch3) => this.setState({ switch3 })} /> 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>
</View> </View>
</Blur> </Blur>
</HueRotate> </HueRotate>
</Surface> </Surface>
<Text>Note: This is highly experimental and not yet performant enough.</Text> <Text>
Note: This is highly experimental and not yet performant enough.
</Text>
</Demo> </Demo>
<Demo id={9} current={current} title="9. Texture from array"> <Demo id={9} current={current} title="9. Texture from array">
<Text>Not Supported Yet</Text> <Text>Not Supported Yet</Text>
</Demo> </Demo>
</Demos> </Demos>
</View>; </View>
);
} }
} }
...@@ -263,7 +323,7 @@ const styles = StyleSheet.create({ ...@@ -263,7 +323,7 @@ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#F9F9F9", backgroundColor: "#F9F9F9",
paddingTop: 50, paddingTop: 50
}, },
nav: { nav: {
flexDirection: "row", flexDirection: "row",
...@@ -274,7 +334,7 @@ const styles = StyleSheet.create({ ...@@ -274,7 +334,7 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
marginLeft: 40, marginLeft: 40,
width: 276, width: 276,
marginBottom: 40, marginBottom: 40
}, },
demoTitle: { demoTitle: {
marginBottom: 16, marginBottom: 16,
...@@ -282,11 +342,11 @@ const styles = StyleSheet.create({ ...@@ -282,11 +342,11 @@ const styles = StyleSheet.create({
alignSelf: "flex-start", alignSelf: "flex-start",
color: "#999", color: "#999",
fontWeight: "300", fontWeight: "300",
fontSize: 20, fontSize: 20
}, },
demo: { demo: {
marginBottom: 64, marginBottom: 64,
marginLeft: 20, marginLeft: 20
}, },
demoText1: { demoText1: {
position: "absolute", position: "absolute",
...@@ -311,7 +371,7 @@ const styles = StyleSheet.create({ ...@@ -311,7 +371,7 @@ const styles = StyleSheet.create({
fontWeight: "300", fontWeight: "300",
fontSize: 32, fontSize: 32,
letterSpacing: -1 letterSpacing: -1
}, }
}); });
module.exports = Simple; module.exports = Simple;
example/src/Tests/index.js
View file @ 49dea67f
import React from "react"; import React from "react";
import {Text, View, ScrollView, Image} from "react-native"; import { Text, View, ScrollView, Image } from "react-native";
import {Surface} from "gl-react-native"; import { Surface } from "gl-react-native";
import {Blur} from "gl-react-blur"; import { Blur } from "gl-react-blur";
import Add from "./Add"; import Add from "./Add";
import Multiply from "./Multiply"; import Multiply from "./Multiply";
import Layer from "./Layer"; import Layer from "./Layer";
...@@ -16,63 +16,88 @@ import Dimensions from "Dimensions"; ...@@ -16,63 +16,88 @@ import Dimensions from "Dimensions";
const { width: viewportW, height: viewportH } = Dimensions.get("window"); const { width: viewportW, height: viewportH } = Dimensions.get("window");
class Tests extends React.Component { class Tests extends React.Component {
constructor(props) {
constructor (props) {
super(props); super(props);
this.onLoad = this.onLoad.bind(this); this.onLoad = this.onLoad.bind(this);
this.onProgress = this.onProgress.bind(this); this.onProgress = this.onProgress.bind(this);
} }
onLoad () { onLoad() {
console.log("LOADED"); console.log("LOADED");
} }
onProgress ({nativeEvent: { progress, loaded, total }}) { onProgress({ nativeEvent: { progress, loaded, total } }) {
console.log("PROGRESS", progress, loaded, total); console.log("PROGRESS", progress, loaded, total);
} }
render () { render() {
const debugSize = viewportW / 4; const debugSize = viewportW / 4;
const helloGL = const helloGL = <HelloGL width={64} height={64} />;
<HelloGL width={64} height={64} />;
const txt = const txt = (
<View key="txt" style={{ width: 400, height: 400, position: "relative", backgroundColor: "transparent" }}> <View
{[0,1,2,3].map(i => <Text key={i} style={{ key="txt"
style={{
width: 400,
height: 400,
position: "relative",
backgroundColor: "transparent"
}}
>
{[0, 1, 2, 3].map(i =>
<Text
key={i}
style={{
position: "absolute", position: "absolute",
top: 20+100*i, top: 20 + 100 * i,
left: 0, left: 0,
width: 400, width: 400,
height: 100, height: 100,
textAlign: "center", textAlign: "center",
color: ["#f00", "#0f0", "#00f", "#fff"][i], color: ["#f00", "#0f0", "#00f", "#fff"][i],
fontSize: 40 fontSize: 40
}}> }}
>
Hello World {i} Hello World {i}
</Text>)} </Text>
</View>; )}
</View>
);
const img = "https://i.imgur.com/zJIxPEo.jpg"; const img = "https://i.imgur.com/zJIxPEo.jpg";
const blurredImage = const blurredImage = (
<Blur factor={4} passes={6} width={200} height={200}> <Blur factor={4} passes={6} width={200} height={200}>
{img} {img}
</Blur>; </Blur>
);
const blurredImageOverText = const blurredImageOverText = (
<Layer> <Layer>
{blurredImage} {blurredImage}
{txt} {txt}
</Layer>; </Layer>
);
return <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
return (
<Surface width={viewportW} height={viewportW} preload onLoad={this.onLoad} onProgress={this.onProgress}> <ScrollView style={{ backgroundColor: "#000", flex: 1 }}>
<Surface
width={viewportW}
height={viewportW}
preload
onLoad={this.onLoad}
onProgress={this.onProgress}
>
<Display2> <Display2>
<Add width={viewportW/2} height={viewportH/2}> <Add width={viewportW / 2} height={viewportH / 2}>
{txt} {txt}
{helloGL} {helloGL}
</Add> </Add>
<Display2 width={viewportW/2} height={viewportH/2} vertical> <Display2 width={viewportW / 2} height={viewportH / 2} vertical>
<Blur factor={1} passes={4} width={viewportW/2} height={viewportH/4}> <Blur
factor={1}
passes={4}
width={viewportW / 2}
height={viewportH / 4}
>
<Multiply> <Multiply>
{blurredImageOverText} {blurredImageOverText}
{helloGL} {helloGL}
...@@ -84,21 +109,38 @@ class Tests extends React.Component { ...@@ -84,21 +109,38 @@ class Tests extends React.Component {
</Surface> </Surface>
<View style={{ flexDirection: "row", flexWrap: "wrap" }}> <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
<NativeLayer width={debugSize} height={debugSize}> <NativeLayer width={debugSize} height={debugSize}>
<Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> <Image
<Image key={1} source={{ uri: "https://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} /> 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>
<NativeLayer width={debugSize} height={debugSize}> <NativeLayer width={debugSize} height={debugSize}>
<Image key={0} source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> <Image
<Surface width={debugSize} height={debugSize} backgroundColor="transparent"> 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 last>
<Copy> <Copy>
<Copy> <Copy>
<Copy> <Copy>https://i.imgur.com/mp79p5T.png</Copy>
https://i.imgur.com/mp79p5T.png
</Copy>
</Copy> </Copy>
</Copy> </Copy>
</Copy> </Copy>
...@@ -106,8 +148,17 @@ class Tests extends React.Component { ...@@ -106,8 +148,17 @@ class Tests extends React.Component {
</NativeLayer> </NativeLayer>
<NativeLayer width={debugSize} height={debugSize}> <NativeLayer width={debugSize} height={debugSize}>
<Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> <Image
<Surface width={debugSize} height={debugSize} backgroundColor="transparent"> source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
width={debugSize}
height={debugSize}
/>
<Surface
width={debugSize}
height={debugSize}
backgroundColor="transparent"
setZOrderOnTop
>
<Layer> <Layer>
https://i.imgur.com/mp79p5T.png https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied> <TransparentNonPremultiplied>
...@@ -118,16 +169,23 @@ class Tests extends React.Component { ...@@ -118,16 +169,23 @@ class Tests extends React.Component {
</NativeLayer> </NativeLayer>
<NativeLayer width={debugSize} height={debugSize}> <NativeLayer width={debugSize} height={debugSize}>
<Image source={{ uri: "https://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} /> <Image
<Surface width={debugSize} height={debugSize} backgroundColor="transparent"> source={{ uri: "https://i.imgur.com/S22HNaU.png" }}
width={debugSize}
height={debugSize}
/>
<Surface
width={debugSize}
height={debugSize}
backgroundColor="transparent"
setZOrderOnTop
>
<Layer> <Layer>
https://i.imgur.com/mp79p5T.png https://i.imgur.com/mp79p5T.png
<TransparentNonPremultiplied> <TransparentNonPremultiplied>
<Copy> <Copy>
<TransparentNonPremultiplied> <TransparentNonPremultiplied>
<Copy> <Copy>https://i.imgur.com/S22HNaU.png</Copy>
https://i.imgur.com/S22HNaU.png
</Copy>
</TransparentNonPremultiplied> </TransparentNonPremultiplied>
</Copy> </Copy>
</TransparentNonPremultiplied> </TransparentNonPremultiplied>
...@@ -139,7 +197,11 @@ class Tests extends React.Component { ...@@ -139,7 +197,11 @@ class Tests extends React.Component {
<HelloGL width={2} height={2} pixelRatio={1} /> <HelloGL width={2} height={2} pixelRatio={1} />
</Surface> </Surface>
<Surface style={{ borderRadius: 50 }} width={debugSize} height={debugSize}> <Surface
style={{ borderRadius: 50 }}
width={debugSize}
height={debugSize}
>
<HelloGL /> <HelloGL />
</Surface> </Surface>
...@@ -148,10 +210,9 @@ class Tests extends React.Component { ...@@ -148,10 +210,9 @@ class Tests extends React.Component {
https://i.imgur.com/rkiglmm.jpg https://i.imgur.com/rkiglmm.jpg
</Blur> </Blur>
</Surface> </Surface>
</View> </View>
</ScrollView>
</ScrollView>; );
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment