title: Why does react-native border radius work on iOS but not Android Image
body: <p>Created a list component, it has an image, some text, and a button. 
  the image has a border radius and borderColor on it. </p>
  
  <p>Problem: 
  the colored-border-radius on android isn't being recognized, but on iOS it works fine...</p>
  
  <p>here's the code:</p>
  
  <p>List:</p>
  
  <pre><code>import React, { useState } from 'react';
  import {
      View,
      Text,
      Image,
      StyleSheet,
      Modal,
      FlatList,
      Dimensions,
      TouchableOpacity,
      TouchableWithoutFeedback
  } from 'react-native';
  import { Svg, Path, G, Line } from 'react-native-svg';
  const { width } = Dimensions.get('window');
  
  const BlockList = (props) =&gt; {
      const onPress = (name) =&gt; {
          alert('Unblocking ' + name);
      };
      return (
          &lt;FlatList
              style={styles.container}
              data={props.data}
              renderItem={({ item, index }) =&gt; (
                  &lt;View style={styles.itemContainer}&gt;
                      &lt;View style={styles.leftSide}&gt;
                          &lt;Image source={item.img} style={styles.img} resizeMode={'contain'} /&gt;
                          &lt;Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}&gt;{item.name}&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.rightSide}&gt;
                          &lt;TouchableOpacity onPress={() =&gt; onPress(item.name)} style={styles.btn}&gt;
                              &lt;Text style={{ fontWeight: 'bold', color: '#fff' }}&gt;Unblock&lt;/Text&gt;
                          &lt;/TouchableOpacity&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
              )}
          /&gt;
      );
  };
  
  const styles = StyleSheet.create({
      itemContainer: {
          flexDirection: 'row',
          width: width * 0.95,
          backgroundColor: '#fff',
          marginHorizontal: width * 0.025,
          marginBottom: width * 0.02,
          borderRadius: 18,
          justifyContent: 'space-between',
          alignItems: 'center',
          paddingVertical: width * 0.02,
          shadowColor: '#333',
          shadowOffset: {
              width: 3,
              height: 3
          },
          shadowOpacity: 0.5,
          shadowRadius: 3,
          elevation: 5
      },
      img: {
          borderRadius: 50,
          borderWidth: 2,
          borderColor: '#219F75',
          height: width * 0.125,
          width: width * 0.125,
          marginHorizontal: width * 0.05
      },
      btn: {
          borderRadius: 11,
          backgroundColor: '#219F75',
          padding: width * 0.0275
      },
      leftSide: {
          flexDirection: 'row',
          alignItems: 'center'
      },
      rightSide: {
          marginRight: width * 0.05
      }
  });
  
  export default BlockList;
  </code></pre>
  
  <p>here's what its supposed to look like (working correctly on iOS):
  <a href="https://i.stack.imgur.com/17F9Q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/17F9Q.png" alt="enter image description here"></a></p>
  
  <p>here's what is looks like on android (notice the square green border):
  <a href="https://i.stack.imgur.com/ouN3q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ouN3q.png" alt="enter image description here"></a></p>
  
  <p>Why is this happening and how can I get my border radius?</p>