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 {
} from 'react-native';

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


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) {
  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:

    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'

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.