If you followed each step in my previous post you should now have a React Native Camera App for iOS. In this post, we'll hack it to display an image on top of a QR Code, like this:

I'm using this image:

bad smiley

Save it to your project/assets/img folder as smiley.png.

Add the react-native image class to your list of imports:

import {
  AppRegistry,
  StyleSheet,
  Text,
  Dimensions,
  View,
  Image
} from 'react-native';

Add the onBarCodeRead listener property to your <Camera> tag, like so:

...
onBarCodeRead={this.readQR.bind(this)}
...

Add a readQR function above the render function. We need to grab the coordinates, height and width of the QR code and store this in state:

readQR(e) {
  if (e.data == 'Hello :)') {
    this.setState({opacity: 1});
  }
  else {
    this.setState({opacity: 0});
  }
  this.setState({bounds: e.bounds, data: e.data});
}

add a constructor to the top of your class which sets default state values:

constructor(props) {
  super(props);
  this.state = {
    bounds: {origin: {x: 0, y:0}, size: {height:0, width:0}},
    opacity: 0,
  };
}

Add an image, right before the closing </Camera> tag, get it's location and size from the state we set previously:

<Image
  style={{
    opacity: this.state.opacity,
    height: parseInt(this.state.bounds.size.height),
    width: parseInt(this.state.bounds.size.width),
    left: parseInt(this.state.bounds.origin.x),
    top: parseInt(this.state.bounds.origin.y),
    resizeMode: 'stretch',
    position: 'absolute'
  }}
  source={require('../assets/img/smiley.png')}
/>

That's it, that's all there is to it! Note that this is only two dimentional and doesn't handle the device's orientation, we might try to figure that out next.