Ad

Add "radius" To Bottom Side Of Image

- 1 answer

This is design that I want to implement for my mobile application:

Design

And this is what is currently accomplished to implement:

Implemented design

As you can see folowing some online examples i manage to curve the picture but its curved on both ends instead of just on the bottom.

This is my style code:

const mainStyle = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: "#d3c586",
    alignItems: "center",
    justifyContent: "space-between",

  },
  cardContainer: {
    flex: 1,
    alignSelf: "center",
    backgroundColor: "#d3c586",
    alignItems: "center",
    justifyContent: "space-between",
    overflow: "hidden",
  },
  cardImageContainer: {
    flex: 0.6,
    borderRadius: width,
    width: width,
    height: width,
    bottom: 0,
    overflow: 'hidden',
  },
  cardImage: {
    height: height / 2, 
    width: width,
    bottom: 0, 
    marginLeft: 0,
  }};

This is a list of items that can be swiped and i render it from this function:

renderItem ({item, index}) {
    return (
      <View style={mainStyle.cardContainer}>
        <View style={mainStyle.cardImageContainer}>
          <TouchableOpacity  onPress={(event) => this.handleDoubleTap(item)} onLongPress={(event) => this.handlePictureShare(item)}>
            <LoadImage style={mainStyle.cardImage} source={{uri: item.url}} thumbnailSource={{uri: item.url}}/>
          </TouchableOpacity>
        </View>
        <View style={mainStyle.cardTextContainer}>
          <Text numberOfLines={25} style={{fontSize: 19}}>{item.fact}</Text>
        </View>     
      </View>
    )

  }

I do not have a lot of experience with CSS since most of my work is on the backend.

Ad

Answer

Check these links BorderBottomLeftRadiusBorderBottomRightRadius

This way you can only give radius bottom of your image.

Ad
source: stackoverflow.com
Ad