Home Reference Source

src/views/diary/components/NavPreviousPage.js

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

import PreviousRoundButton from '../../../components/buttons/PreviousRoundButton';

import {RoundButtonSize} from '../../../utils/DimensionsConstants';

/**
 * Diary menu bar to navigate to previous page.
 * Button and background image are displayed if the props.isVisible is true.
 * @param {Object} props - Properties
 * @param {Object} props.containerStyle - Style of the container view
 * @param {boolean} props.isVisible - If true, the button is visible. Otherwise not visible
 * @param {function} props.onPress - Action to be executed when the button is pressed
 * @returns {Object} Menu to navigate to previous page
 */
export default function NavPreviousPage(props) {
    // Retrieve props
    const containerStyle = props.containerStyle;
    const isVisible = props.isVisible;
    const onPressAction = props.onPress;

    return (
        <View style={containerStyle}>
            {isVisible && (
                <ImageBackground
                    source={require('../../../assets/backgrounds/leftPage.png')}
                    style={styles.imageBackground}
                    resizeMode="stretch">
                    <PreviousRoundButton
                        buttonSize={RoundButtonSize.NORMAL}
                        containerStyle={styles.button}
                        onPress={onPressAction}
                    />
                </ImageBackground>
            )}
        </View>
    );
}

/** Local styles */
const styles = StyleSheet.create({
    imageBackground: {
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        alignItems: 'center',
    },

    button: {
        alignSelf: 'center',
    },
});