gl-react-native not displaying image on physical iOS device

I'm trying to get the saturation example from gl-react: Contrast/Saturation/Brightness example working on an iphone, but for some reason the image only displays on an iOS simulator and not a real device.

This is what is shown on an iphone SE simulator running iOS 10.3 (Everything works perfectly, as in the example). This is what is shown on an actual iphone SE running iOS 10.3

And this is the code

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Shaders, Node, GLSL } from 'gl-react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Slider
} from 'react-native';
import { Surface } from 'gl-react-native';

const shaders = Shaders.create({
  Saturate: {
    frag: GLSL`
  precision highp float;
  varying vec2 uv;
  uniform sampler2D t;
  uniform float contrast, saturation, brightness;
  const vec3 L = vec3(0.2125, 0.7154, 0.0721);
  void main() {
    vec4 c = texture2D(t, uv);
    vec3 brt = c.rgb * brightness;
    gl_FragColor = vec4(mix(
      vec3(0.5),
      mix(vec3(dot(brt, L)), brt, saturation),
      contrast), c.a);
  }
  `
  }
});

export const Saturate = ({ contrast, saturation, brightness, children }) =>
  <Node
    shader={shaders.Saturate}
    uniforms={{ contrast, saturation, brightness, t: children }}
  />;



export default class App extends Component<{}> {
  state = {
    contrast: 1,
    saturation: 1,
    brightness: 1
  }

  render() {
    const { contrast, saturation, brightness } = this.state;

    const filter = {
      contrast,
      brightness,
      saturation
    }

    return (
      <View>
        <Text style={styles.header}>
          SaturateGL
        </Text>
        <Surface style={{ width: 300, height: 300 }}>
          <Saturate {...filter}>
            {{ uri: "https://i.imgur.com/uTP9Xfr.jpg" }}
          </Saturate>
        </Surface>
        <Slider
          minimumValue={0}
          maximumValue={4}
          step={0.01}
          value={ contrast }
          onValueChange={ contrast => this.setState({ contrast }) }>
        </Slider>
        <Slider
          minimumValue={0}
          maximumValue={4}
          step={0.01}
          value={ saturation }
          onValueChange={ saturation => this.setState({ saturation }) }>
        </Slider>
        <Slider
          minimumValue={0}
          maximumValue={4}
          step={0.01}
          value={ brightness }
          onValueChange={ brightness => this.setState({ brightness }) }>
        </Slider>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    fontSize: 24,
    textAlign: 'center',
    padding: 10,
  },
});

Repo Here

I'm running

• gl-react@3.13.0
• gl-react-native@3.13.0
• react-native-webgl@0.70

and react-native-webgl is set up properly (I've linked the libRNWebGL.a and removed the libGPUImage.a in xcode as per the install instructions).

I'm quite new to react-native, so probably I've done (or worse yet, not done) something, which is a bit daft. But if anyone can help point out why this is happening, I'd be most grateful. This is really annoying me.

Thanks