Building Image Card in React Native - reactjs

Question

I'm trying to build a simple image card component in React Native and got some problems. This is my component now (It's available for you on snack):
I can't find a way to set border only on the top of the image on the card, keeping the bottom border flat.
Desired form:
The Image component doesn't seen to be rendered from the top showing the model's face, instead it's getting centered showing her body.
Here it's the original image for comparison:

Answer 1

Use this code. Added overflow: "hidden" to the View and removed borderRadius for Image. Tested in IOS.
import * as React from 'react';
import { Text, View, Image } from "react-native";
export default class RootComponent extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<View style={{ backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" }}>
<View>
<Image
source={require("./assets/h4.jpg")}
style={{
height: 135,
width: 155
}}
/>
</View>
<View style={{ padding: 10, width: 155 }}>
<Text>Title</Text>
<Text style={{ color: "#777", paddingTop: 5 }}>
Description of the image
</Text>
</View>
</View>
</View>
);
}
}

Answer 2

By removing the height from the <Image> and setting it in its parent view, the image will be shown from the top.
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<View style={{ backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' }}>
<View style={{ height: 135, width: 155, overflow: 'hidden' }}>
<Image
source={require("./assets/h4.jpg")}
style={{
width: 155
}}
/>
</View>
<View style={{ padding: 10, width: 155 }}>
<Text>Title</Text>
<Text style={{ color: "#777", paddingTop: 5 }}>
Description of the image
</Text>
</View>
</View>
</View>

Answer 3

You can directly do it with borderTopLeftRadius and borderTopRightRadius in a Card.
<Card
containerStyle={styles.boxCon}
featuredTitle={title}
image={{
uri: urlToImage
}}
imageStyle={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }}
>
const styles = {
boxCon: {
margin: 15,
marginHorizontal: 10,
marginBottom: 17.5,
borderColor: '#FFFFFF',
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.3,
shadowRadius: 5,
elevation: 5,
borderRadius: 10
}
};