title: React native box shadow solution for images
body: <p>I am trying to add styling to different images based upon their touched status. I am struggling to find a solution that works for both android and ios that adds a border shadow to the images. On web I used box-shadow to do this, but that option doesnt work on RN. So far I have tried elevation (not sure if I'm using this correctly as it doesn't seem to do much?) and shadowColor but neither is doing what I need it to</p>
  
  <pre><code>import React, { Component } from 'react';
  import { TouchableWithoutFeedback, Image, Alert } from 'react-native';
  import { View, Text } from 'native-base';
  
  class Answer extends Component {
  
    render() {
      const { option, onClickCallback, isSelected, isBlurred } = this.props;
  
      const {
        cssUnSelected,
        cssSelected,
        cssBlurred,
        image
      } = styles;
      let mode = 'contain';
  
      let cssSelection = cssUnSelected;
      if (isSelected) {
        cssSelection = cssSelected;
      }
      if (isBlurred) {
        cssSelection = cssBlurred;
      }
  
      return (
        &lt;View style={cssSelection}&gt;
          &lt;TouchableWithoutFeedback onPress={onClickCallback}&gt;
            &lt;Image source={require('../../assets/imgs/draw90.png')}
              resizeMode={mode}
              style={image} /&gt;
          &lt;/TouchableWithoutFeedback&gt;
        &lt;/View&gt;
      )
    }
  }
  
  const styles = {
    cssSelected: {
      borderRadius: 100,
      elevation: 90,
      shadowColor: "green"
    },
    cssUnSelected: {
      borderRadius: 100,
      elevation: 90,
      shadowColor: "blue"
    },
    cssBlurred: {
      elevation: 10,
      borderRadius: 100,
      opacity: 0.5,
      shadowColor: "red"
    },
    image: {
      flex: 1,
      marginLeft: "1%",
      marginRight: "1%",
      maxWidth: 90
    }
  }
  
  export default Answer;
  </code></pre>