src/views/diary/components/PictureActivity.js
import React from 'react';
import {ImageBackground, StyleSheet, View} from 'react-native';
import PhotoCornerTopLeftSvgr from '../../../assets/itemsSvgr/PhotoCornerTopLeftSvgr';
import PhotoCornerTopRightSvgr from '../../../assets/itemsSvgr/PhotoCornerTopRightSvgr';
import PhotoCornerBottomLeftSvgr from '../../../assets/itemsSvgr/PhotoCornerBottomLeftSvgr';
import PhotoCornerBottomRightSvgr from '../../../assets/itemsSvgr/PhotoCornerBottomRightSvgr';
import {globalStyles} from '../../../styles/styles';
/**
* Component displaying the picture of the activity with photo corners.
* @param {Object} props - Properties
* @param {Object} props.source - Source of the image
* @returns {Object} Picture of the activity
*/
export default function PictureActivity(props) {
// Retrieve props
const source = props.source;
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
<ImageBackground
source={source}
style={globalStyles.resetImage}>
<PhotoCornerTopLeftSvgr
style={[
styles.corner,
styles.topLeft,
globalStyles.lightShadow,
]}
/>
<PhotoCornerTopRightSvgr
style={[
styles.corner,
styles.topRight,
globalStyles.lightShadow,
]}
/>
<PhotoCornerBottomLeftSvgr
style={[
styles.corner,
styles.bottomLeft,
globalStyles.lightShadow,
]}
/>
<PhotoCornerBottomRightSvgr
style={[
styles.corner,
styles.bottomRight,
globalStyles.lightShadow,
]}
/>
</ImageBackground>
</View>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
container: {
flex: 1,
alignSelf: 'flex-end',
justifyContent: 'space-between',
alignContent: 'space-between',
position: 'absolute',
top: 50,
right: 5,
height: '40%',
width: '43%',
},
innerContainer: {
height: '98%',
width: '98%',
},
corner: {
height: 30,
width: 30,
},
topLeft: {
position: 'absolute',
top: -4,
left: -4,
},
topRight: {
position: 'absolute',
alignSelf: 'flex-end',
top: -4,
right: -4,
},
bottomLeft: {
position: 'absolute',
bottom: -4,
left: -4,
},
bottomRight: {
position: 'absolute',
bottom: -4,
right: -4,
},
});