How can I cut image diagonally in react-native? - react-native

Question

I am developing a social networking app in react-native. I wanted to know if it is possible to cut <Image> in the way shown in the image:
If yes, can you provide me some example or any hints to implement this.
Reference for android

Answer 1

You could display a white triangle shaped View on top of your image
import React from 'react';
import { StyleSheet, View, Image, Dimensions } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.img} source={require('./images.jpg')} >
<View style={[styles.triangle]} /></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
triangle: {
position: 'absolute',
right: 0,
bottom: 0,
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderLeftWidth: Dimensions.get('window').width,
borderRightWidth: 0,
borderBottomWidth: 50,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#fff',
},
img: {
width: Dimensions.get('window').width,
},
});

Answer 2

apply this to your style tag of view,don forgot to import Dimensions from 'react-native'
triangleCorner: {
left:0,
height: 200,
backgroundColor: 'green',
borderStyle: 'solid',
borderLeftWidth:Dimensions.get('window').width,
borderBottomWidth: 80,
borderLeftColor: 'transparent',
borderBottomColor: 'white'
}

Answer 3

very old post but I found one solution, I use inline style for more easy example:
<ImageBackground
style={{
left: 0,
width: Dimensions.get('window').width - 10,
height: 220,
justifyContent: 'center', alignSelf: 'center'
}}
source={{ uri: header.banner }}></ImageBackground>
<View style={{
position: 'absolute',
right: 0,
bottom: 0,
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: Dimensions.get('window').width,
borderLeftWidth: 0,
borderBottomWidth: 100,
borderLeftColor: 'transparent',
borderRightColor: 'transparent',
borderBottomColor: '#fff',
}} />