Exposes AnimatedSurface allowing animated width & height props

example/package.json

@@ -11,8 +11,8 @@
     "gl-react-blur": "^1.2.2",
     "gl-react-native": "file:..",
     "glsl-transitions": "^2016.2.15",
-    "react": "^15.0.0",
-    "react-native": "^0.26.0",
+    "react": "^15.1.0",
+    "react-native": "^0.27.2",
     "react-native-fs": "^1.4.0",
     "react-native-material-kit": "PyYoshi/react-native-material-kit#rn-0.25.1",
     "react-transform-hmr": "^1.0.2",

example/src/Animated/index.js

+import React, {Component} from "react";
+import {View, Animated } from "react-native";
+import {AnimatedSurface} from "gl-react-native";
+import GL from "gl-react";
+import Dimensions from "Dimensions";
+const { width: viewportW, height: viewportH } = Dimensions.get("window");
+
+export default class Tests extends Component {
+  state = {
+    heightValue: new Animated.Value(200)
+  };
+  componentWillMount () {
+    let i = 0;
+    this.interval = setInterval(() => {
+      Animated.spring(this.state.heightValue, {
+        toValue: ++i % 2 ? 500 : 200,
+      }).start();
+    }, 1000);
+  }
+  componentWillUnmount () {
+    clearInterval(this.interval);
+  }
+  render () {
+    const { heightValue } = this.state;
+    return <View style={{
+        backgroundColor: "#000",
+        flex: 1,
+        paddingTop: 60,
+        alignItems: "center"
+      }}>
+      <AnimatedSurface
+        width={200}
+        height={heightValue}>
+        <GL.Node shader={{
+            frag: `
+precision highp float;
+varying vec2 uv;
+void main () {
+  gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0);
+}
+            `
+          }}
+        />
+    </AnimatedSurface>
+    </View>;
+  }
+}

example/src/index.js

 import React, {Component, PropTypes} from "react";
 import {StyleSheet, View, Text, TouchableOpacity, Navigator, AsyncStorage} from "react-native";
 
-const screens = {
-  Simple: require("./Simple"),
-  AdvancedEffects: require("./AdvancedEffects"),
-  Hearts: require("./Hearts"),
-  Tests: require("./Tests"),
-};
+import Simple from "./Simple";
+import AdvancedEffects from "./AdvancedEffects";
+import Hearts from "./Hearts";
+import Tests from "./Tests";
+import Animated from "./Animated";
+
+const screens = { Simple, AdvancedEffects, Hearts, Tests, Animated };
 
 const homeRoute = {
   id: "home",
@@ -18,6 +19,7 @@ const routes = [
   { id: "AdvancedEffects" },
   { id: "Hearts" },
   { id: "Tests" },
+  { id: "Animated" },
 ];
 
 const styles = StyleSheet.create({

src/GLCanvas.js

@@ -104,6 +104,7 @@ class GLCanvas extends Component {
       width, height,
       onLoad, onProgress, eventsThrough,
       ...restProps } = this.props;
+
     return <GLCanvasNative
       ref="native"
       {...restProps}

src/Surface.js

-import invariant from "invariant";
-import {createSurface} from "gl-react";
-import React from "react";
-import {View, PixelRatio} from "react-native";
-import GLCanvas from "./GLCanvas";
-
-invariant(typeof createSurface === "function",
-"gl-react createSurface is not a function. Check your gl-react dependency");
-
-const getPixelRatio = props => props.scale || PixelRatio.get();
-
-function renderVcontent (width, height, id, children, { visibleContent }) {
-  const childrenStyle = {
-    position: "absolute",
-    top: visibleContent ? 0 : height, // as a workaround for RN, we offset the content so it is not visible but still can be rasterized
-    left: 0,
-    width: width,
-    height: height,
-    overflow: "hidden",
-  };
-  return <View key={id} style={childrenStyle}>{children}</View>;
-}
-
-function renderVGL (props) {
-  return <GLCanvas ref="canvas" {...props} />;
-}
-
-function renderVcontainer ({ style, width, height, visibleContent, eventsThrough }, contents, renderer) {
-  const parentStyle = [
-    {
-      position: "relative",
-    },
-    style,
-    {
-      width: width,
-      height: height,
-      overflow: "hidden",
-    }
-  ];
-  return <View
-    pointerEvents={!visibleContent && eventsThrough ? "none" : "auto"}
-    style={parentStyle}>
-    {contents}
-    {renderer}
-  </View>;
-}
-
-module.exports = createSurface(
-  renderVcontainer,
-  renderVcontent,
-  renderVGL,
-  getPixelRatio);

src/index.js

 import invariant from "invariant";
 import { Shaders } from "gl-react";
-import Surface from "./Surface";
-import {NativeModules} from "react-native";
+import isAnimated from "gl-react/src/isAnimated";
+import makeSurface from "./makeSurface";
+import GLCanvas from "./GLCanvas";
+import {NativeModules, View, Animated} from "react-native";
 const {RNGLContext} = NativeModules;
 invariant(RNGLContext,
 `gl-react-native: the native module is not available.
@@ -22,5 +24,21 @@ Shaders.setImplementation({
 });
 
 module.exports = {
-  Surface
+  Surface: makeSurface({
+    View,
+    GLCanvas,
+    dimensionInvariant: (value, field) =>
+      isAnimated(value)
+      ? invariant(false, "GL.Surface "+field+" prop cannot be an Animated object. Use GL.AnimatedSurface instead")
+      : invariant(typeof value === "number" && value > 0, "GL.Surface: "+field+" prop must be a strictly positive number")
+  }),
+  AnimatedSurface: makeSurface({
+    View: Animated.View,
+    GLCanvas: Animated.createAnimatedComponent(GLCanvas),
+    dimensionInvariant: (value, field) =>
+      invariant(
+        isAnimated(value) || typeof value === "number" && value > 0,
+        "GL.AnimatedSurface: "+field+" must be a strictly positive number OR an Animated object"
+      )
+  }),
 };

src/makeSurface.js

+import invariant from "invariant";
+import {createSurface} from "gl-react";
+import React from "react";
+import {PixelRatio} from "react-native";
+
+invariant(typeof createSurface === "function",
+"gl-react createSurface is not a function. Check your gl-react dependency");
+
+const getPixelRatio = props => props.scale || PixelRatio.get();
+
+export default C => {
+  const renderVcontainer = ({ style, width, height, visibleContent, eventsThrough }, contents, renderer) => {
+    const parentStyle = [
+      {
+        position: "relative",
+      },
+      style,
+      {
+        width: width,
+        height: height,
+        overflow: "hidden",
+      }
+    ];
+    return <C.View
+      pointerEvents={!visibleContent && eventsThrough ? "none" : "auto"}
+      style={parentStyle}>
+      {contents}
+      {renderer}
+    </C.View>;
+  };
+  const renderVcontent = (width, height, id, children, { visibleContent }) => {
+    const childrenStyle = {
+      position: "absolute",
+      top: visibleContent ? 0 : height, // as a workaround for RN, we offset the content so it is not visible but still can be rasterized
+      left: 0,
+      width: width,
+      height: height,
+      overflow: "hidden",
+    };
+    return <C.View key={id} style={childrenStyle}>{children}</C.View>;
+  };
+  const renderVGL = props => {
+    C.dimensionInvariant(props.width, "width");
+    C.dimensionInvariant(props.height, "height");
+    return <C.GLCanvas ref="canvas" {...props} />;
+  };
+
+  return createSurface(
+    renderVcontainer,
+    renderVcontent,
+    renderVGL,
+    getPixelRatio,
+  );
+};