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?
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
To add a rounded image with a border with React Native, we can set the borderRadius and overflow styles. to set borderRadius to '50%' to make the Image round. And we set the width and height of the Image to set the dimensions. We set overflow to 'hidden' so the Image stays in the circle.
Border Radius in React NativeThe borderRadius property can be set as the style attribute to any element. It takes a value in pixels and assigns that value to the overall border radius of that UI element. By default, the border radius of any element is 0 if you haven't added that style attribute to that element.
To set border around view component in react native we have to use borderWidth and borderColor style prop. Using the borderWidth prop we would define the border width in pixels. The borderWidth prop Number type value. The higher value we would pass the thicker border would be.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With