first impl of gl-react-native (wip)

it works but remain some bugs and image texture is not yet supported

Author: gre

LICENSE

@@ -1,5 +1,5 @@
 The MIT License (MIT)
-Copyright (c) 2016 <[email protected]>
+Copyright (c) 2016 - 2017 <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

cookbook-exp/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["react-native-stage-0/decorator-support"],
+  "env": {
+    "development": {
+      "plugins": ["transform-react-jsx-source"]
+    }
+  }
+}

cookbook-exp/.gitignore

@@ -0,0 +1,3 @@
+node_modules/**/*
+.exponent/*
+npm-debug.*

cookbook-rn/exp.json renamed to cookbook-exp/exp.json

@@ -17,5 +17,11 @@
   },
   "packagerOpts": {
     "assetExts": ["ttf", "mp4"]
+  },
+  "android": {
+    "package": "fr.greweb.glrncookbook"
+  },
+  "ios": {
+    "bundleIdentifier": "fr.greweb.glrncookbook"
   }
 }

cookbook-rn/main.js renamed to cookbook-exp/main.js

@@ -0,0 +1,24 @@
+{
+  "name": "glrn-cookbook",
+  "version": "0.0.0",
+  "description": "GL React Native cookbook",
+  "author": "Gaëtan Renaudeau",
+  "private": true,
+  "main": "main.js",
+  "dependencies": {
+    "@exponent/ex-navigation": "^2.7.1",
+    "exponent": "^13.0.0",
+    "gl-react": "^3.0.0-alpha.3",
+    "gl-react-exponent": "^3.0.0-alpha.3",
+    "glsl-transitions": "^2017.1.16",
+    "ndarray": "^1.0.18",
+    "raf": "^3.3.0",
+    "react": "~15.4.2",
+    "react-motion": "^0.4.7",
+    "react-native": "github:exponentjs/react-native#sdk-13.0.0",
+    "seedrandom": "github:gre/seedrandom#released"
+  },
+  "scripts": {
+    "generate-examples": "cd src/examples; ./gen.sh 1> index.js"
+  }
+}

cookbook-exp/package.json

@@ -0,0 +1,76 @@
+//@flow
+import React, { Component } from "react";
+import { PanResponder, View } from "react-native";
+import hoistNonReactStatics from "hoist-non-react-statics";
+
+type Pos = { x: number, y: number };
+type State = { touching: boolean, touchPosition: Pos };
+
+export default (Comp: ReactClass<*>, {
+  initialPosition = { x: 0.5, y: 0.5 }
+}: { initialPosition: Pos } = {}) => {
+  class TouchPositionResponding extends Component {
+    state: State = {
+      touching: false,
+      touchPosition: initialPosition,
+    };
+    initialContainerPos: [number, number];
+    initialDragPos: [number, number];
+    size: [number, number];
+    panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onStartShouldSetPanResponderCapture: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponderCapture: () => true,
+      onPanResponderGrant: (evt) => {
+        const { pageX, pageY } = evt.nativeEvent;
+        this.initialDragPos = [ pageX, pageY ];
+        this.refs.root.measure((x, y, w, h, initialPageX, initialPageY) => {
+          this.initialContainerPos = [ initialPageX, initialPageY ];
+          this.size = [ w, h ];
+          this.setState({
+            touching: true,
+            touchPosition: {
+              x: (pageX - initialPageX) / w,
+              y: 1 - (pageY - initialPageY) / h,
+            }
+          });
+        });
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        const [ pageX, pageY ] = this.initialDragPos;
+        const [ initialPageX, initialPageY ] = this.initialContainerPos;
+        const { dx, dy } = gestureState;
+        const [ w, h ] = this.size;
+        this.setState({
+          touchPosition: {
+            x: (pageX + dx - initialPageX) / w,
+            y: 1 - (pageY + dy - initialPageY) / h,
+          }
+        });
+      },
+      onPanResponderTerminationRequest: () => true,
+      onPanResponderRelease: () => this._onEnd(),
+      onPanResponderTerminate: () => this._onEnd(),
+      onShouldBlockNativeResponder: () => true,
+    });
+    _onEnd = () => {
+      if (this.state.touching) {
+        this.setState({
+          touching: false,
+        });
+      }
+    };
+    render() {
+      return (
+        <View ref="root" {...this.panResponder.panHandlers}>
+          <Comp {...this.props} {...this.state} />
+        </View>
+      );
+    }
+  }
+
+  hoistNonReactStatics(TouchPositionResponding, Comp);
+
+  return TouchPositionResponding;
+};

cookbook-exp/src/0BJobQo.jpg

@@ -0,0 +1,50 @@
+//@flow
+import React, { PureComponent } from "react";
+import raf from "raf";
+import hoistNonReactStatics from "hoist-non-react-statics";
+
+// NB this is only an utility for the examples
+export default (
+  C: ReactClass<*>,
+  { refreshRate = 60 }: { refreshRate?: number } = {}
+): ReactClass<*> => {
+  class TL extends PureComponent {
+    static displayName = `timeLoop(${C.displayName||C.name||""})`;
+    state: { time: number };
+    state = {
+      time: 0,
+      tick: 0,
+    };
+    _r: any;
+    componentDidMount() {
+      let startTime: number, lastTime: number;
+      let interval = 1000 / refreshRate;
+      lastTime = -interval;
+      const loop = (t: number) => {
+        this._r = raf(loop);
+        if (!startTime) startTime = t;
+        if (t - lastTime > interval) {
+          lastTime = t;
+          this.setState({
+            time: t - startTime,
+            tick: this.state.tick + 1,
+          });
+        }
+      };
+      this._r = raf(loop);
+    }
+    componentWillUnmount() {
+      raf.cancel(this._r);
+    }
+    render() {
+      return <C
+        {...this.props}
+        {...this.state}
+      />;
+    }
+  };
+
+  hoistNonReactStatics(TL, C);
+
+  return TL;
+}