Does this component really works?

[scerelli]

Following your example i did this:

let image = <GLImage
        source={resolveAssetSource(require('../Images/foto.jpg'))}
        imageSize={{width: 600, height: 480}}
        onLoad={() => {this.forceUpdate()}} />
    return (
      <Surface width={Dimensions.get('window').width} height={600}>
          <ColorBlending
            color={[1,0.8352941176,0.5647058824,0.1]}
            blendMode={'blendHardLight'}
          >
            {image}
          </ColorBlending>
        </Surface>
    )

but the only thing i see is the color.

P.S i tried almost all blend modes

[miklosme]

Worked when I created it ;) RN api is changing in a fast pace, so it's quite possible that this project needs an update. I'll check it soon.

Meanwhile, could you provide info about your issue? What's happening at you? Error message?

[scerelli]

Sorry man i don't know, now it works... maybe was something related to react-gl-image because i resetted cache and did a clean build and now it works well. I would like to implement the possibility to pass a gradient instead of a color. Any idea?

i did this:

const vec3 color0 = vec3(1,0.8352941176,0.5647058824);
const vec3 color1 = vec3(1,0.6980392157,0.631372549);

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    vec2 A = vec2(0.2*iResolution.xy);
    vec2 B = vec2(iResolution.xy);
    vec2 V = B - A;

    float s = dot(fragCoord.y-A, V) / dot(V, V);
    s = clamp(s, 0.0, 1.0);
    vec3 color = mix(color0, color1, s);

    color = pow(color, vec3(1.0/2.2)); 
    fragColor = vec4(color, 0.05882352941176);
}

i would like to implement something like this, a simple linear gradient instead of a color.

[miklosme]

ColorBlending tries to rasterize any children what passed in (it's done by the gl-react-native package), so just create a gradient element (for example with react-native-linear-gradient), and replace your image component with it.

Good luck!

[scerelli]

and as color what i should pass?

p.s maybe there is some problem when it calculates the opacity. if i pass 0.1 it keeps it really visible.

[miklosme]

The transparency of rasterized content is not supported. https://github.com/ProjectSeptemberInc/gl-react-native/issues/46

Are you trying to put a shade to an image? Put both the gradient and the image element inside the GL node as a child.