Example on how to create a image background with another layer on top

AddImageView

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, ImageBackground, Platform } from 'react-native';

const backgroundImage = require('../assets/background.png')
const iconCamera = require('../assets/camera_alt_white_48x48.png')

const styles = StyleSheet.create({
  addImage: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    height: 200,
    backgroundColor: 'black'
  },
  backgroundImage: {
    flex: 1,
    width: null,
    height: null
  },
  overlay: {
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 30
  },
  addImageText: {
    fontSize: 15,
    textAlign: 'center',
    marginTop: 5,
    color: 'white'
  },
  addImageDesc: {
    fontSize: 15,
    textAlign: 'center',
    marginTop: 10,
    marginLeft: 37,
    marginRight: 37,
    paddingLeft: 25,
    paddingRight: 25,
    color: '#9EA0A1'
  }
});

export default AddImageView = (props) => {
  return (
    <View style={ styles.addImage }>
      <ImageBackground
        blurRadius={ Platform.OS === 'ios' ? 10 : 5 }
        style={ styles.backgroundImage }
        source={ backgroundImage }
      >
        <View style={ styles.overlay }>
          <Image source={ iconCamera } />
          <Text style={ styles.addImageText }>ADD A STORY PHOTO</Text>
          <Text style={ styles.addImageDesc }>
            Please upload photos in landscape orientation that are at least 704 pixels wide and 376 pixels tall.
          </Text>
        </View>
      </ImageBackground>
    </View>
  );
};