Implement imagesToPreload support (GL.View preload prop)

Examples/Tests/Blur.js

@@ -29,13 +29,12 @@ function directionForPass (p, factor, total) {
 class Blur extends GL.Component {
   render () {
     const { width, height, factor, children, passes } = this.props;
-
     const rec = p => p <= 0 ? children :
       <Blur1D width={width} height={height} direction={directionForPass(p, factor, passes)}>
         {rec(p-1)}
       </Blur1D>;
 
-    return rec(passes);
+    return rec(passes || 0);
   }
 }
 

Examples/Tests/index.ios.js

@@ -34,7 +34,7 @@ const Tests = React.createClass({
         </Text>)}
       </View>;
 
-    const img = "http://i.imgur.com/zJIxPEo.jpg";
+    const img = "http://i.imgur.com/zJIxPEo.jpg?t="+Date.now();
 
     const blurredImage =
       <Blur factor={4} passes={6} width={200} height={200}>

RNGL/GLCanvas.m

@@ -26,6 +26,9 @@
   BOOL _deferredRendering; // This flag indicates a render has been deferred to the next frame (when using contents)
   
   GLint defaultFBO;
+  
+  NSMutableArray *_preloaded;
+  BOOL _preloadingDone;
 }
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge
@@ -34,6 +37,8 @@
   if ((self = [super init])) {
     _bridge = bridge;
     _images = @{};
+    _preloaded = [[NSMutableArray alloc] init];
+    _preloadingDone = false;
     self.context = context;
   }
   return self;
@@ -41,6 +46,14 @@
 
 RCT_NOT_IMPLEMENTED(-init)
 
+-(void)setImagesToPreload:(NSArray *)imagesToPreload
+{
+  if (_preloadingDone) return;
+  if ([imagesToPreload count] == 0) {
+    _preloadingDone = true;
+  }
+  _imagesToPreload = imagesToPreload;
+}
 
 - (void)setOpaque:(BOOL)opaque
 {
@@ -144,7 +157,7 @@ NSString* srcResource (id res)
             }
             if (image == nil) {
               image = [[GLImage alloc] initWithBridge:_bridge withOnLoad:^{
-                [self requestSyncData];
+                [self onImageLoad:src];
               }];
               image.src = src;
               images[src] = image;
@@ -190,6 +203,30 @@ NSString* srcResource (id res)
   }
 }
 
+- (bool)allPreloaded
+{
+  for (id toload in _imagesToPreload) {
+    if (![_preloaded containsObject:srcResource(toload)])
+      return false;
+  }
+  return true;
+}
+
+- (void)onImageLoad:(NSString *)loaded
+{
+  if (!_preloadingDone) {
+    [_preloaded addObject:loaded];
+    if ([self allPreloaded]) {
+      _preloadingDone = true;
+      [self requestSyncData];
+    }
+  }
+  else {
+    // Any texture image load will trigger a future re-sync of data (if no preloaded)
+    [self requestSyncData];
+  }
+}
+
 - (void)setNbContentTextures:(NSNumber *)nbContentTextures
 {
   [self resizeUniformContentTextures:[nbContentTextures intValue]];
@@ -233,6 +270,7 @@ NSString* srcResource (id res)
 
 - (void)drawRect:(CGRect)rect
 {
+  if (!_preloadingDone) return;
   BOOL needsDeferredRendering = _nbContentTextures > 0;
   if (needsDeferredRendering && !_deferredRendering) {
     dispatch_async(dispatch_get_main_queue(), ^{

src/View.js

@@ -13,6 +13,7 @@ const GLCanvas = requireNativeComponent("GLCanvas", null);
 
 const renderVcontent = function (width, height, id, children) {
   const childrenStyle = {
+    key: id,
     position: "absolute",
     top: 0,
     left: 0,