src/views/diary/components/Header.js
import React from 'react';
import {StyleSheet, View} from 'react-native';
/**
* Header of the diary.
* @param {Object} props - Properties
* @param {Object} props.leftComponent - Left element of the header
* @param {Object} props.middleComponent - Middle element of the header
* @param {Object} props.rightComponent - Right element of the header
* @returns {Object} Header of the diary.
*/
export default function Header(props) {
// Retrieve props
const leftComponent = props.leftComponent;
const middleComponent = props.middleComponent;
const rightComponent = props.rightComponent;
let flexValue; // Size of flex view relative to whole screen.
if (props.flexValue === undefined) {
flexValue = 0.18;
} else {
flexValue = props.flexValue;
}
return (
<View style={[styles.container, {flex: flexValue}]}>
<View style={[styles.component, styles.leftContainer]}>
{leftComponent}
</View>
<View style={[styles.component, styles.middleContainer]}>
{middleComponent}
</View>
<View style={[styles.component, styles.rightContainer]}>
{rightComponent}
</View>
</View>
);
}
/** Local styles */
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
component: {
height: '100%',
width: '100%',
flexDirection: 'column',
},
leftContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
padding: 10,
},
middleContainer: {
flex: 5,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
alignContent: 'flex-start',
marginBottom: -5,
},
rightContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
padding: 10,
},
});