diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index aa5082c1680143d31a168d78ba57481dc07a11d8..0000000000000000000000000000000000000000
--- a/.eslintrc
+++ /dev/null
@@ -1,51 +0,0 @@
-{
- "parser": "babel-eslint",
- "globals": {
- "requestAnimationFrame": true
- },
- "rules": {
- "indent": [
- 2,
- 2
- ],
- "quotes": [
- 2,
- "double"
- ],
- "linebreak-style": [
- 2,
- "unix"
- ],
- "semi": [
- 2,
- "always"
- ],
- "comma-dangle": 0,
- "no-var": 1,
-
- "react/jsx-boolean-value": 1,
- "react/jsx-no-undef": 1,
- "react/jsx-quotes": 1,
- "react/jsx-uses-react": 1,
- "react/jsx-uses-vars": 1,
- "react/no-danger": 1,
- "react/no-did-mount-set-state": 1,
- "react/no-did-update-set-state": 1,
- "react/no-unknown-property": 1,
- "react/react-in-jsx-scope": 1,
- "react/require-extension": 1,
- "react/sort-comp": 1
- },
- "env": {
- "es6": true,
- "node": true
- },
- "extends": "eslint:recommended",
- "ecmaFeatures": {
- "jsx": true,
- "experimentalObjectRestSpread": true
- },
- "plugins": [
- "react"
- ]
-}
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000000000000000000000000000000000000..6af15b2b674fa5dc090b2017c26b68b9c25134ce
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,49 @@
+{
+ "parser": "babel-eslint",
+ "env": {
+ "browser": true,
+ "commonjs": true,
+ "es6": true,
+ "node": true
+ },
+ "globals": {
+ "__DEV__": true
+ },
+ "extends": "eslint:recommended",
+ "installedESLint": true,
+ "parserOptions": {
+ "ecmaFeatures": {
+ "experimentalObjectRestSpread": true,
+ "jsx": true
+ },
+ "sourceType": "module"
+ },
+ "plugins": [
+ "react"
+ ],
+ "rules": {
+ "indent": [
+ "error",
+ 2
+ ],
+ "linebreak-style": [
+ "error",
+ "unix"
+ ],
+ "quotes": [
+ "error",
+ "double"
+ ],
+ "semi": [
+ "error",
+ "always"
+ ],
+ "no-console": [
+ "error",
+ { "allow": ["warn", "error" ] }
+ ],
+ "comma-dangle": 0,
+ "react/jsx-uses-react": "error",
+ "react/jsx-uses-vars": "error"
+ }
+}
diff --git a/android/RNGL.iml b/android/RNGL.iml
index ae08619d47a1df69e5929443be2748c840de57c2..27e83b1aa01a063c247939e0f47f4574968e7554 100644
--- a/android/RNGL.iml
+++ b/android/RNGL.iml
@@ -100,6 +100,7 @@
+
diff --git a/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java b/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
index 4b12b770e5b576c0ade9145f41e095e0732ed4bc..c88c495b4af540ebea852db40df56069e47e13cf 100644
--- a/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
+++ b/android/src/main/java/com/projectseptember/RNGL/GLCanvas.java
@@ -490,7 +490,17 @@ public class GLCanvas extends GLSurfaceView
textures.put(uniformName, emptyTexture);
}
else {
- ReadableMap value = dataUniforms.getMap(uniformName);
+ ReadableMap value = null;
+ try {
+ value = dataUniforms.getMap(uniformName);
+ }
+ catch (Exception e) {
+ shader.runtimeException(
+ "texture uniform '"+uniformName+"': you cannot directly give require('./img.png') "+
+ "to gl-react, use resolveAssetSource(require('./img.png')) instead."
+ );
+ return null;
+ }
String t = value.getString("type");
if (t.equals("content")) {
int id = value.getInt("id");
diff --git a/example/android/app/app.iml b/example/android/app/app.iml
index 4b00cde89b0b79bf54ee83d3d3adde134133b078..9fc5b9019cb0f37dad70b4fd9106dc10b9d4bf31 100644
--- a/example/android/app/app.iml
+++ b/example/android/app/app.iml
@@ -64,14 +64,6 @@
-
-
-
-
-
-
-
-
@@ -80,14 +72,20 @@
+
+
+
+
+
+
+
+
-
-
@@ -97,7 +95,7 @@
-
+
@@ -107,20 +105,19 @@
-
-
+
@@ -132,7 +129,6 @@
-
diff --git a/example/package.json b/example/package.json
index 954cac47e2fa95e0c50583264ae8c34f2dd9af4b..2115dcc5190df35689eeb47dcc9487f3008d5ce8 100644
--- a/example/package.json
+++ b/example/package.json
@@ -7,12 +7,12 @@
},
"dependencies": {
"crypto": "0.0.3",
- "gl-react": "^2.2.0",
- "gl-react-blur": "^1.2.2",
+ "gl-react": "2.2.4",
+ "gl-react-blur": "^1.3.0",
"gl-react-native": "file:..",
"glsl-transitions": "^2016.2.15",
"react": "^15.1.0",
- "react-native": "^0.27.2",
+ "react-native": "^0.28.0-rc.0",
"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",
diff --git a/example/src/AdvancedEffects/index.js b/example/src/AdvancedEffects/index.js
index ab037b6fbd70fc363c4326586cf174d838aeda9d..3d1d4e09f65c7bc4938fc8aef083e5a16157ae28 100644
--- a/example/src/AdvancedEffects/index.js
+++ b/example/src/AdvancedEffects/index.js
@@ -1,13 +1,14 @@
import React from "react";
import {StyleSheet, View} from "react-native";
+import {resolveAssetSource} from "gl-react-native";
const { width: viewportW, height: viewportH } = require("Dimensions").get("window");
-import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
import Banner from "./Banner";
import Intro from "./Intro";
import Vignette from "./Vignette";
import Slideshow from "./Slideshow";
+
class AdvancedEffects extends React.Component {
constructor (props) {
diff --git a/ios/GLCanvas.m b/ios/GLCanvas.m
index 3578b98c0dc3c7854d3dc0e0c2d23c6af59ca372..1a19eecb39def46ea5a09aa65334120ff235e851 100644
--- a/ios/GLCanvas.m
+++ b/ios/GLCanvas.m
@@ -227,6 +227,9 @@ RCT_NOT_IMPLEMENTED(-init)
[emptyTexture setPixels:nil];
textures[uniformName] = emptyTexture;
}
+ else if ([value isKindOfClass:[NSNumber class]]) {
+ RCTLogError(@"texture uniform '%@': you cannot directly give require('./img.png') to gl-react, use resolveAssetSource(require('./img.png')) instead.", uniformName);
+ }
else {
NSString *type = [RCTConvert NSString:value[@"type"]];
if ([type isEqualToString:@"content"]) {
diff --git a/ios/GLImage.m b/ios/GLImage.m
index 0e832729b1fdd7d09bd18d24b32ef76f8f12951a..16d07709c2d81c98883e54e19efa2aa01e6a13a6 100644
--- a/ios/GLImage.m
+++ b/ios/GLImage.m
@@ -5,6 +5,7 @@
#import "RCTImageLoader.h"
#import "RCTLog.h"
#import "GLTexture.h"
+#import "RCTUtils.h"
@implementation GLImage
{
@@ -70,31 +71,46 @@ RCT_NOT_IMPLEMENTED(-init)
- (void)reloadImage
{
+ RCTImageSource *source = _source;
if (_loading) _loading();
_loading = nil;
- if (!_source) {
+ if (!source) {
[self clearImage];
}
else {
// Load the image (without resizing it)
- _loading = [_bridge.imageLoader loadImageWithURLRequest:_source.imageURL.absoluteString
+ __weak GLImage *weakSelf = self;
+ _loading = [_bridge.imageLoader loadImageWithURLRequest:source.request
size:CGSizeZero
scale:0
clipped:YES
resizeMode:RCTResizeModeStretch
progressBlock:nil
- completionBlock:^(NSError *error, UIImage *image) {
+ completionBlock:^(NSError *error, UIImage *loadedImage) {
+ GLImage *strongSelf = weakSelf;
+ void (^setImageBlock)(UIImage *) = ^(UIImage *image) {
+ if (![source isEqual:strongSelf.source]) {
+ // Bail out if source has changed since we started loading
+ return;
+ }
+ strongSelf.image = [UIImage imageWithCGImage:image.CGImage];
+ dispatch_async(dispatch_get_main_queue(), ^{
+ if (_onload) _onload();
+ });
+ };
+
_loading = nil;
[self clearImage];
if (error) {
NSLog(@"Image failed to load: %@", error);
} else {
- // we need to copy the image because it seems the image will be altered.
- // ^^^ FIXME: check if it's still the case
- self.image = [UIImage imageWithCGImage:image.CGImage];
- dispatch_async(dispatch_get_main_queue(), ^{
- if (_onload) _onload();
- });
+ if ([NSThread isMainThread]) {
+ setImageBlock(loadedImage);
+ } else {
+ RCTExecuteOnMainThread(^{
+ setImageBlock(loadedImage);
+ }, NO);
+ }
}
}];
}
diff --git a/package.json b/package.json
index aaecf6b71e63331e3afba5b8fda9a805993b619c..51b466d4f433a4e0bb46bdd4782454f0dd4458ef 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
"author": "Project September ",
"license": "MIT",
"peerDependencies": {
- "react-native": "*",
- "gl-react": "^2.2.3"
+ "react-native": "* || 0.28.0-rc.0",
+ "gl-react": "^2.2.4"
},
"dependencies": {
"invariant": "2.2.0",
diff --git a/src/index.js b/src/index.js
index 61e73d57d1aac68709b1b05037b9c6bd724171fa..463bf1a918228f53e72a949d5d1ad99750d3a363 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,9 +1,11 @@
import invariant from "invariant";
-import { Shaders } from "gl-react";
+import { Shaders, runtime } from "gl-react";
import isAnimated from "gl-react/src/isAnimated";
import makeSurface from "./makeSurface";
import GLCanvas from "./GLCanvas";
-import {NativeModules, View, Animated} from "react-native";
+import {NativeModules, View, Animated, Image} from "react-native";
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
+
const {RNGLContext} = NativeModules;
invariant(RNGLContext,
`gl-react-native: the native module is not available.
@@ -23,7 +25,24 @@ Shaders.setImplementation({
remove: id => RNGLContext.removeShader(id)
});
+if (__DEV__) {
+ runtime.decorateVDOMContent = vdom => {
+ if (vdom && vdom.type === Image && !vdom.props.glReactUseImage) {
+ console.warn(
+`gl-react: Found a ReactNative.Image element. This is not performant. Try one of these:
+- pass-in directly the image URL in your uniforms.
+- use gl-react-image which implements the same Image API directly in OpenGL. https://github.com/gre/gl-react-image
+- If you need more features like padding, explicitly setting image size, you can implement your own shader.
+
+If you still want to do this, add a glReactUseImage prop to the Image to disable this warning.
+`);
+ }
+ return vdom;
+ };
+}
+
module.exports = {
+ resolveAssetSource,
Surface: makeSurface({
View,
GLCanvas,