Support for https://github.com/ProjectSeptemberInc/gl-react/issues/33

example/src/Tests/NativeLayer.js

@@ -6,7 +6,7 @@ const {
 class NativeLayer extends React.Component {
   render () {
     const { width, height, children, ...rest } = this.props;
-    return <View style={{ width, height, position: "relative" }}>
+    return <View style={{ width, height, position: "relative", overflow: "hidden" }}>
       {React.Children.map(children, child =>
         <View style={{ width, height, position: "absolute", top: 0, left: 0, backgroundColor: "transparent" }}>
           {child}

example/src/Tests/index.js

@@ -31,14 +31,14 @@ class Tests extends React.Component {
     console.log("PROGRESS", progress, loaded, total);
   }
   render () {
-    const debugSize = viewportW / 2;
+    const debugSize = viewportW / 4;
 
     const helloGL =
       <HelloGL width={64} height={64} />;
 
     const txt =
       <View style={{ width: 400, height: 400, position: "relative", backgroundColor: "transparent" }}>
-        {[0,1,2,3].map(i => <Text style={{
+        {[0,1,2,3].map(i => <Text key={i} style={{
           position: "absolute",
           top: 20+100*i,
           left: 0,
@@ -87,44 +87,6 @@ class Tests extends React.Component {
 
       <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
 
-        <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Image source={{ uri: "http://i.imgur.com/mp79p5T.png" }} width={debugSize} height={debugSize} />
-        </NativeLayer>
-
-        <NativeLayer width={debugSize} height={debugSize}>
-          <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <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} />
-          <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} />
-          <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} />
           <Surface width={debugSize} height={debugSize} opaque={false}>
@@ -142,52 +104,9 @@ class Tests extends React.Component {
 
         <NativeLayer width={debugSize} height={debugSize}>
           <Image source={{ uri: "http://i.imgur.com/S22HNaU.png" }} width={debugSize} height={debugSize} />
-          <Surface width={debugSize} height={debugSize} opaque={false}>
-            <Copy last>
-              <Copy>
-                <Copy>
-                  <Copy>
-                    <Copy>
-                      http://i.imgur.com/mp79p5T.png
-                    </Copy>
-                  </Copy>
-                </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} />
-            <Surface width={debugSize} height={debugSize}>
-              <TransparentNonPremultiplied>
-                <HelloGL />
-              </TransparentNonPremultiplied>
-            </Surface>
-          </NativeLayer>
-        </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} />
-            <Surface width={debugSize} height={debugSize}>
-              <TransparentNonPremultiplied>
-                <TransparentNonPremultiplied>
-                  <HelloGL />
-                </TransparentNonPremultiplied>
-              </TransparentNonPremultiplied>
-            </Surface>
-          </NativeLayer>
-        </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} />
-            <Surface width={debugSize} height={debugSize}>
+            <Surface width={debugSize} height={debugSize} opaque={false}>
               <TransparentNonPremultiplied>
                 <Copy>
                   <TransparentNonPremultiplied>
@@ -231,6 +150,10 @@ class Tests extends React.Component {
           </Surface>
         </NativeLayer>
 
+        <Surface width={debugSize} height={debugSize}>
+          <HelloGL width={2} height={2} pixelRatio={1} />
+        </Surface>
+
       </View>
 
     </ScrollView>;

example/src/index.js

@@ -6,6 +6,7 @@ import React, {
   Text,
   TouchableOpacity,
   Navigator,
+  AsyncStorage,
 } from "react-native";
 
 const screens = {
@@ -77,6 +78,26 @@ class Home extends Component {
 
 export default class App extends Component {
   static propTypes = {};
+  constructor (props) {
+    super(props);
+    this.state = {
+      initialRoute: homeRoute
+    };
+    /*
+    new Promise((success, failure) =>
+      AsyncStorage.getItem("route", (error, result) => {
+        if (error) failure(error);
+        else success(result);
+      }))
+    .then(result => {
+      const route = JSON.parse(result);
+      if (!route) throw new Error("invalid route");
+      return route;
+    })
+    .catch(() => homeRoute)
+    .then(initialRoute => this.setState({ initialRoute }));
+    */
+  }
   renderScene = (route, navigator) => {
     if (route.id === homeRoute.id) {
       return <Home openScreen={route => navigator.push(route)} />;
@@ -85,12 +106,14 @@ export default class App extends Component {
     return <Screen />;
   };
   render () {
+    const { initialRoute } = this.state;
+    if (!initialRoute) return <View />;
     return (
       <View style={styles.root}>
         <Navigator
           style={styles.navBar}
-          initialRoute={homeRoute}
           renderScene={this.renderScene}
+          initialRoute={initialRoute}
           navigationBar={
             <Navigator.NavigationBar
               routeMapper={{

src/GLCanvas.js

@@ -2,7 +2,7 @@ const invariant = require("invariant");
 const React = require("react-native");
 const {
   Component,
-  requireNativeComponent
+  requireNativeComponent,
 } = React;
 const defer = require("promise-defer");
 const captureFrame = require("./GLCanvas.captureFrame");
@@ -18,6 +18,35 @@ const GLCanvasNative = requireNativeComponent("GLCanvas", GLCanvas, {
   }
 });
 
+const getExtraProps = ({ width, height, pixelRatio, data }) => {
+  // If Surface size matches the root node size, pass-in the styles
+  if (
+    !data ||
+    width * pixelRatio === data.width * data.pixelRatio &&
+    height * pixelRatio === data.height * data.pixelRatio
+  ) {
+    return { pixelRatio, style: { width, height } };
+  }
+  // otherwise, stretch the canvas to the surface size
+  const w = data.width * data.pixelRatio;
+  const h = data.height * data.pixelRatio;
+  return {
+    pixelRatio: 1, // pixelRatio is hardcoded to 1 to normalize the transform
+    style: {
+      width: w,
+      height: h,
+      transform: [
+        { translateX: -w / 2 },
+        { translateY: -h / 2 },
+        { scaleX: width / w },
+        { scaleY: height / h },
+        { translateX: w / 2 },
+        { translateY: h / 2 },
+      ]
+    }
+  };
+};
+
 class GLCanvas extends Component {
 
   componentWillMount () {
@@ -103,15 +132,19 @@ class GLCanvas extends Component {
   };
 
   render () {
-    const { width, height, onLoad, onProgress, eventsThrough, ...restProps } = this.props;
+    const {
+      width, height, pixelRatio, data,
+      onLoad, onProgress, eventsThrough,
+      ...restProps } = this.props;
     return <GLCanvasNative
       ref="native"
       {...restProps}
+      {...getExtraProps({ width, height, pixelRatio, data })}
+      data={data}
       onGLLoad={onLoad ? onLoad : null}
       onGLProgress={onProgress ? onProgress : null}
       onGLCaptureFrame={this.onGLCaptureFrame}
       pointerEvents={eventsThrough ? "none" : "auto"}
-      style={{ width, height }}
     />;
   }
 }