CODEWITHSUNDEEP
react-native
Jim
Jim

Reputation: 2322

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

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): enter image description here

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

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

Upvotes: 6

Views: 9526

Answers (5)

Kojo Clinton
Kojo Clinton

Reputation: 1

You can try to change the resizeMode to "cover"

Upvotes: 0

ANKIT DETROJA
ANKIT DETROJA

Reputation: 2065

try this in img style borderRadius: (width * 0.125)/2

Upvotes: 0

Lenoarod
Lenoarod

Reputation: 3610

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).

Upvotes: 4

Israt Jahan Simu
Israt Jahan Simu

Reputation: 1110

You set image width height dynamically but border radius static value when using lower resolution device of android sometimes image borderRedius is larger to image width that's why it's occurred.

Please set all attribute dynamically. It will be better if use image borderRedius half of the width

Upvotes: 0

Maneesh
Maneesh

Reputation: 674

Try borderRadius:width * 0.125 under img style.

Upvotes: 0

Related Questions