v2.1.1

Experimental support of Animated object

has been released with an experimental support for Animated object on uniforms.

A simple example is this HelloGL component:

const shaders = GL.Shaders.create({
  helloGL: {
    frag: `
precision highp float;
varying vec2 uv;
uniform float value;
void main () {
  gl_FragColor = vec4(uv.x, uv.y, value, 1.0);
}
    `
  }
});

class HelloGL extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      value: new Animated.Value(0)
    };
  }
  componentDidMount () {
    const loop = () => Animated.sequence([
      Animated.timing(this.state.value, { toValue: 1, duration: 1000 }),
      Animated.timing(this.state.value, { toValue: 0, duration: 1000 })
    ]).start(loop);
    loop();
  }
  render () {
    const { width, height } = this.props;
    const { value } = this.state;
    return <Surface width={width} height={height}>
      <GL.Node
        shader={shaders.helloGL}
        uniforms={{ value }}
      />
    </Surface>;
  }
}

Notice how this no longer requires to loop over render(). This allows to get even better performance for animations, removing the need of complex diffing but instead directly building the data object and calling setNativeProps. Animated is also very smooth, here is an example of profiling:

Without animated (5.7ms)

After animated (4ms)

This should also work in gl-react-dom as long as you implement a local web version of Animated. We will eventually have it.

Internal refactoring to simplify the duck-typing logic of uniform values

see this commit for more detail