Question - how do I load a react native image?

[Cristiano Santos]

library version

react-native@0.48.2

yarn list v0.24.6
├─ gl-react-native@3.13.0
└─ gl-react@3.13.0

My code

// @flow
import React, { Component } from 'react';
import { Image } from 'react-native';
import { Shaders, Node, GLSL } from 'gl-react';
import { Surface } from 'gl-react-native';

import { images } from '../../theme';

const shaders = Shaders.create({
  blendMultiply: {
    frag: GLSL`
    precision highp float;
    varying vec2 uv;

    uniform sampler2D tex;
    uniform vec4 color;

    vec3 blendMultiply(vec3 base, vec3 blend) {
      return base*blend;
    }
    vec3 blendMultiply(vec3 base, vec3 blend, float opacity) {
      return (blendMultiply(base, blend) * opacity + blend * (1.0 - opacity));
    }

    void main () {
      vec4 baseColor = texture2D(tex, uv);
      vec3 newColor = blendMultiply(baseColor.rgb, color.rgb, color.a);
      gl_FragColor = vec4(newColor, 1.);
    }`,
  },
});


export const BlendMultiply = ({ children: tex, color }) => (
  <Node shader={shaders.blendMultiply} uniforms={{ tex, color }} />
);

export default class Example extends Component {
  render() {
    return (
      <Surface style={{ height: 300, width: 300 }}>
        <BlendMultiply color={[0.1, 0.9, 0.1, 1]}>
          <Image source={images.sample.background} /> // <~ returns null :(
        </BlendMultiply>
      </Surface>
    );
  }
};

[@greweb]

you can't give a react-native Image element inside gl-react but this should work instead:

<Surface style={{ height: 300, width: 300 }}>
  <BlendMultiply color={[0.1, 0.9, 0.1, 1]}>
    {images.sample.background}
  </BlendMultiply>
</Surface>

if you are looking for cropping feature (like the RN Image resizeMode), you can also use gl-react-image

e.g.

<Surface style={{ height: 300, width: 300 }}>
  <BlendMultiply color={[0.1, 0.9, 0.1, 1]}>
    <GLImage source={images.sample.background} resizeMode="cover" />
  </BlendMultiply>
</Surface>

[Cristiano Santos]

Made it work with GLImage, thank a lot!