title: Pass photo uri to Image element in React Native
body: <p>I have a file called <code>imagePicker.js</code> that returns a view displaying images from the phone's CameraRoll. After I have clicked an image I want to be able to click the button that says edit and navigate to the photo editing screen (<code>photoScreen.js</code>) and edit the photo I have selected. However, while I am successfully navigating to the photo editing screen I can't figure out how to pass the selected image's uri into the Image element on the photo editing screen.</p>
  
  <p>Routes.js (navigation)</p>
  
  <pre><code>class Routes {
  static register(name, handler) {
   if (this.handlers == null) this.handlers = {}
   this.handlers[name] = handler
  }
  static get(name, params) {
   if (this.handlers[name] == null) throw new Error('unknown route')
   return this.handlers[name](params)
  }
  static imagePicker() {
   return {
    component: require('./imagePicker'),
  }
  }
  static photoScreen(image) {
   return {
    component: require('./photoScreen'),
  
    passProps: {image: image}
  }
  }
  
  }
  
  module.exports = Routes
  </code></pre>
  
  <p>imagePicker.js (photo gallery and selection screen)</p>
  
  <pre><code>const React = require('react-native');
  var Routes = require('./Routes')
  
  const {
  
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  CameraRoll,
  TouchableHighlight,
  NativeModules,
  } = React;
  
  const styles = StyleSheet.create({
  container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
  },
  imageGrid: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'center'
  },
  image: {
      width: 100,
      height: 100,
      margin: 10,
  }
  });
  
  const imagePicker = React.createClass({
  getInitialState() {
      return {
          images: [],
          selected: '',
      };
  },
  
  componentDidMount() {
      const fetchParams = {
          first: 25,
      };
      CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError);
  },
  
  storeImages(data) {
      const assets = data.edges;
      const images = assets.map((asset) =&gt; asset.node.image);
      this.setState({
          images: images,
      });
  },
  
  logImageError(err) {
      console.log(err);
  },
  
  gotoPhoto(image) {
      this.props.route.push(Routes.photoScreen(image))
    },
  
  
  selectImage(uri) {
      NativeModules.ReadImageData.readImage(uri, (image) =&gt; {
          this.setState({
              selected: image,
          });
          console.log(image);
      });
  },
  
  render() {
      return (
          &lt;ScrollView style={styles.container}&gt;
              &lt;View style={styles.imageGrid}&gt;
              { this.state.images.map((image) =&gt; {
                  return (
                      &lt;TouchableHighlight onPress={this.selectImage.bind(null, image.uri)}&gt;
                      &lt;Image style={styles.image} source={{ uri: image.uri }} /&gt;
                      &lt;/TouchableHighlight&gt;
                  );
                  })
              }
              &lt;/View&gt;
              &lt;TouchableHighlight onPress={this.gotoPhoto} &gt;&lt;Text&gt;edit&lt;/Text&gt;&lt;/TouchableHighlight&gt;
          &lt;/ScrollView&gt;
      );
  }
  });
  
  module.exports = imagePicker
  </code></pre>
  
  <p>photoScreen.js (photo editing screen)</p>
  
  <pre><code>var React = require('react-native');
  var GL = require('gl-react-native');
  
  var {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  View,
  ScrollView,
  SliderIOS
  } = React;
  
  
  var photoScreen = React.createClass({
  getInitialState: function() {
  return {
    width:0,
    height: 0,
    saturation: 1,
    brightness: 1,
    contrast: 1,
    hue: 0,
    sepia: 0,
    gray: 0,
    mixFactor: 0
  };
  },
  renderWithDimensions: function(layout) {
  var {
    width,
    height
  } = layout.nativeEvent.layout;
  this.setState({
    width,
    height
  })
  },
  getImage: function() {
  var {image} = this.props
  return (
    &lt;Instagram 
      brightness={this.state.brightness}
      saturation={this.state.saturation}
      contrast={this.state.contrast}
      hue={this.state.hue}
      gray={this.state.gray}
      sepia={this.state.sepia}
      mixFactor={this.state.mixFactor}
      width={this.state.width}
      height={this.state.height}
    &gt;
      &lt;Image
        source={{uri: image.uri}}
        style={styles.cover}
        resizeMode="cover"
      /&gt;
    &lt;/Instagram&gt;
  
   )
   },
  render: function() {
  return (
    &lt;View style={styles.container}&gt;
      &lt;View style={styles.container} onLayout={this.renderWithDimensions}&gt;
        { this.state.width ? this.getImage() : null}
      &lt;/View&gt;
      &lt;ScrollView style={styles.container}&gt;
        &lt;View&gt;
          &lt;Text&gt;Blend Factor: {this.state.mixFactor}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.mixFactor}
            minimumValue={0}
            maximumValue={2}
            onValueChange={(mixFactor) =&gt; this.setState({mixFactor})}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Brightness: {this.state.brightness}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.brightness}
            minimumValue={0}
            maximumValue={3}
            onValueChange={(brightness) =&gt; this.setState({brightness})}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Saturation: {this.state.saturation}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.saturation}
            minimumValue={0}
            maximumValue={3}
            onValueChange={(saturation) =&gt; this.setState({saturation})}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Contrast: {this.state.contrast}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.contrast}
            minimumValue={0}
            maximumValue={3}
            onValueChange={(contrast) =&gt; this.setState({contrast})}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Sepia: {this.state.sepia}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.sepia}
            minimumValue={0}
            maximumValue={1}
            onValueChange={(sepia) =&gt; this.setState({sepia})}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Grayscale: {this.state.gray}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.gray}
            minimumValue={0}
            maximumValue={1}
            onValueChange={(gray) =&gt; this.setState({gray})}
          /&gt;
        &lt;/View&gt;
        &lt;View&gt;
          &lt;Text&gt;Hue: {this.state.hue}&lt;/Text&gt;
          &lt;SliderIOS
            value={this.state.hue}
            minimumValue={0}
            maximumValue={10}
            onValueChange={(hue) =&gt; this.setState({hue})}
          /&gt;
        &lt;/View&gt;
      &lt;/ScrollView&gt;
    &lt;/View&gt;
  );
  }
  });
  
  var styles = StyleSheet.create({
   container: {
   flex: 1
   },
  cover: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0
  }
  
  });
  
  
  
  const shaders = GL.Shaders.create({
  instagram: {
  frag: `
    precision highp float;
    varying vec2 uv;
    uniform sampler2D tex;
    // uniform float hue;
    uniform float saturation;
    uniform float brightness;
    uniform float contrast;
    uniform float hue;
    uniform float gray;
    uniform float sepia;
    uniform float mixFactor;
  
    const vec3 W = vec3(0.2125, 0.7154, 0.0721);
    const mat3 rgb2yiq = mat3(0.299, 0.587, 0.114, 0.595716, -0.274453, -0.321263, 0.211456, -0.522591, 0.311135);
    const mat3 yiq2rgb = mat3(1.0, 0.9563, 0.6210, 1.0, -0.2721, -0.6474, 1.0, -1.1070, 1.7046);
    const vec3 SEPIA = vec3(1.2, 1.0, 0.8);
  
    vec3 BrightnessContrastSaturation(vec3 color, float brt, float con, float sat)
    {
      vec3 black = vec3(0., 0., 0.);
      vec3 middle = vec3(0.5, 0.5, 0.5);
      float luminance = dot(color, W);
      vec3 gray = vec3(luminance, luminance, luminance);
  
      vec3 brtColor = mix(black, color, brt);
      vec3 conColor = mix(middle, brtColor, con);
      vec3 satColor = mix(gray, conColor, sat);
      return satColor;
    }
  
    vec3 multiplyBlender(vec3 Color, vec3 filter){
      vec3 filter_result;
      float luminance = dot(filter, W);
  
      if(luminance &lt; 0.5)
        filter_result = 2. * filter * Color;
      else
        filter_result = Color;
  
      return filter_result;
    }
  
    vec3 ovelayBlender(vec3 Color, vec3 filter){
      vec3 filter_result;
  
      float luminance = dot(filter, W);
  
      if(luminance &lt; 0.5)
        filter_result = 2. * filter * Color;
      else
        filter_result = 1. - (1. - (2. *(filter - 0.5)))*(1. - Color);
  
      return filter_result;
    }
  
    vec3 applyHue(vec3 Color, float h) {
      vec3 yColor = rgb2yiq * Color;
      float originalHue = atan(yColor.b, yColor.g);
      float finalHue = originalHue + (h);
      float chroma = sqrt(yColor.b*yColor.b+yColor.g*yColor.g);
      vec3 yFinalColor = vec3(yColor.r, chroma * cos(finalHue), chroma * sin(finalHue));
      return vec3(yiq2rgb*yFinalColor);
    }
  
    vec3 applyGray(vec3 Color, float g) {
      float gray = dot(Color, vec3(0.299, 0.587, 0.114));
      return mix(Color, vec3(gray, gray, gray), g);
    }
  
    vec3 applySepia(vec3 Color, float s) {
      float gray = dot(Color, vec3(0.299, 0.587, 0.114));
      return mix(Color, vec3(gray) * SEPIA, s);
    }
  
  
    void main() {
      vec2 st = uv.st;
      vec3 irgb = texture2D(tex, st).rgb;
      vec3 filter = texture2D(tex, st).rgb;
  
      vec3 bcs_result = BrightnessContrastSaturation(irgb, brightness, contrast, saturation);
      vec3 hue_result = applyHue(bcs_result, hue);
      vec3 sepia_result = applySepia(hue_result, sepia);
      vec3 gray_result = applyGray(sepia_result, gray);
  
      vec3 after_filter = mix(gray_result, multiplyBlender(gray_result, filter), mixFactor);
  
      gl_FragColor = vec4(after_filter, 1.);
    }
  `
  }
  });
  
  var Instagram = GL.createComponent(
  ({ brightness, saturation, contrast, hue, gray, sepia, mixFactor,   children, ...rest }) =&gt;
  &lt;GL.View
  {...rest}
  shader={shaders.instagram}
  uniforms={{ brightness, saturation, contrast, hue, gray, sepia, mixFactor }}&gt;
  &lt;GL.Uniform name="tex"&gt;{children}&lt;/GL.Uniform&gt;
  &lt;/GL.View&gt;
  , { displayName: "Instagram" });
  
  module.exports = photoScreen
  </code></pre>