Why does react-native border radius work on iOS but not Android Image

Question

Created a list component, it has an image, some text, and a button. the image has a border radius and borderColor on it.

Problem: the colored-border-radius on android isn't being recognized, but on iOS it works fine...

here's the code:

List:

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) => {
    const onPress = (name) => {
        alert('Unblocking ' + name);
    };
    return (
        <FlatList
            style={styles.container}
            data={props.data}
            renderItem={({ item, index }) => (
                <View style={styles.itemContainer}>
                    <View style={styles.leftSide}>
                        <Image source={item.img} style={styles.img} resizeMode={'contain'} />
                        <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}>{item.name}</Text>
                    </View>
                    <View style={styles.rightSide}>
                        <TouchableOpacity onPress={() => onPress(item.name)} style={styles.btn}>
                            <Text style={{ fontWeight: 'bold', color: '#fff' }}>Unblock</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            )}
        />
    );
};

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;

here's what its supposed to look like (working correctly on iOS):

here's what is looks like on android (notice the square green border):

Why is this happening and how can I get my border radius?

Answer 1

if we want the view circle, we also realize it by setting the borderRadius equals half of the view height(width).

<View
   style={{
       borderWidth:1,
       borderColor:'rgba(0,0,0,0.2)',
       alignItems:'center',
       justifyContent:'center',
       width:100,
       height:100,
       backgroundColor:'#fff',
       borderRadius:50,
     }}
 />

In your situation, your image sets the resizeMode. so it did not show the effect you want. for that try to move it in a view or use resizeMode:stretch; resizeMode:cover or remove it.

<View style={styles.leftSide}>
 <Image source={item.img} style={styles.img}/>
   <Text style={{ fontSize: 18, fontWeight: 'bold', color: '#454A66' }}>{item.name}</Text>
 </View>

img: {
        borderRadius: width * 0.125*0.5,
        borderWidth: 2,
        borderColor: '#219F75',
        height: width * 0.125,
        width: width * 0.125,
        marginHorizontal: width * 0.05
    },

contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).