Add “radius” to bottom side of image

Question

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

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.

Answer 1

Check these links BorderBottomLeftRadius BorderBottomRightRadius

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

Answer 2

You can try like this:

import React, { Component } from 'react';
import { View } from 'react-native';

    export default class FlexDirectionBasics extends Component {
      render() {
        return (
          // Try setting `flexDirection` to `column`.
          <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center'}}>     
            <View style={{width: 100, height: 100, backgroundColor: 'steelblue', borderBottomColor: 'black', borderBottomEndRadius: 10, borderBottomStartRadius: 10 }} />
          </View>
        );
      }
    }