MiNaRiYao/Radices/Navigators/DrawerNavigation.js

//Nathalia A. Alicea
//codigo para Drawer Navigation. No está en uso. Pero si el cliente deseará tener Drawer Navigation se podría utilizar.

import * as React from 'react';
import {View, StyleSheet, ScrollView, Image} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
    createDrawerNavigator,
    DrawerContentScrollView,
    DrawerItemList, 
    DrawerItem
} from '@react-navigation/drawer';
import Home from '../Screens/Home';
import Contact from '../Screens/Contact';
import About from '../Screens/About';




function CustomDrawerConten(props) {
    return(
        <ScrollView style={styles.container}>
            <View style={styles.drawerHeader}>
                <View>
                    <Image style ={styles.drawerHeaderImage} source={require('../image/logowebes.png')} />
                </View>
            </View>
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
                <DrawerItem 
                    
                    label ="Close drawer"
                    onPress={ () => props.navigation.closeDrawer()}
                />
            </DrawerContentScrollView>
        </ScrollView>
    );
}

const Drawer = createDrawerNavigator();

function MyDrawer(){
    return(
        <Drawer.Navigator backBehavior="history" drawerContent={props => <CustomDrawerConten{...props}/>}>
            <Drawer.Screen name = "Sobre Nosotros" component={About}/>
            <Drawer.Screen name ="Tienda" component={Home}/>
            <Drawer.Screen name = "Contáctanos" component={Contact}/>
        </Drawer.Navigator>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }, 
    drawerHeader: {
        backgroundColor: "#ffffff",
        height: 150, 
        alignItems:'center',
        justifyContent: 'center',
        flex: 1, 
        flexDirection: 'row'
    }, drawerHeaderImage: {
        width: 260, 
        height: 130

    }
})

export default function DrawerNavigation(){
    return (
        <NavigationContainer>
            <MyDrawer />
        </NavigationContainer>
    )
}