en folders

App.js

@@ -1,20 +1,87 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import * as React from 'react';
+import { Button, View, Image} from 'react-native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
+import About from './screens/about';
+import Gallery from './screens/gallery';
+import Calendario from './screens/calendar';
+import Donate from './screens/donar';
+import Solicitar from './screens/solicitar';
+import Account from './screens/account';
+import Header from './shared/header';
 
-export default function App() {
+const screens = {
+  About: {
+      screen: About,
+      navigationOptions: ({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+      }
+  },
+}
+
+function HomeScreen({ navigation }) {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        onPress={() => navigation.navigate('Notifications')}
+        title="Go to notifications"
+      />
     </View>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
+function NotificationsScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button onPress={() => navigation.goBack()} title="Go back home" />
+    </View>
+  );
+}
+
+
+
+const Drawer = createDrawerNavigator();
+
+export default function App() {
+  return (
+    <NavigationContainer >
+      <Drawer.Navigator initialRouteName="Home">
+        <Drawer.Screen name="Sobre nosotros" component={About} options={({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+        }}/>
+        <Drawer.Screen name="Calendario" component={Calendario} options={({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+        }}/>
+        <Drawer.Screen name="Galeria" component={Gallery} options={({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+        }}/>
+        <Drawer.Screen name="Donar" component={Donate} options={({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+        }}/>
+        <Drawer.Screen name="Solicitar ayuda" component={Solicitar} 
+        options={({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+        }}/>
+
+        <Drawer.Screen name="Mi cuenta" component={Account} 
+        options={({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+        }}/>    
+      </Drawer.Navigator>
+    </NavigationContainer>
+  );
+}

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "TPMGnav",
-    "slug": "TPMGnav",
+    "name": "TPMG",
+    "slug": "TPMG",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",

babel.config.js

@@ -4,3 +4,8 @@ module.exports = function(api) {
     presets: ['babel-preset-expo'],
   };
 };
+
+module.exports = {
+  presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
+};

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tpmgnav",
+  "name": "tpmg",
   "version": "1.0.0",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -9,10 +9,29 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@expo/webpack-config": "^0.17.2",
+    "@mui/material": "^5.10.15",
+    "@react-native-google-signin/google-signin": "^8.2.1",
+    "@react-navigation/drawer": "^6.5.1",
+    "@react-navigation/native": "^6.0.14",
+    "@react-navigation/native-stack": "^6.9.2",
     "expo": "~47.0.7",
+    "expo-dev-client": "~2.0.1",
     "expo-status-bar": "~1.4.2",
+    "expo-web-browser": "^12.0.0",
     "react": "18.1.0",
-    "react-native": "0.70.5"
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-gesture-handler": "^2.8.0",
+    "react-native-reanimated": "~2.12.0",
+    "react-native-safe-area-context": "4.4.1",
+    "react-native-screens": "~3.18.0",
+    "react-native-web": "~0.18.9",
+    "react-navigation": "^4.4.4",
+    "react-navigation-stack": "^2.10.4",
+    "yarn": "^1.22.19"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

routes/drawer.js

@@ -0,0 +1,16 @@
+import { createDrawerNavigator } from "react-navigation-drawer";
+import { createAppContainer } from "react-navigation";
+
+import HomeStack from './homeStack';
+import About from './screens/about';
+
+const RootDrawerNavigator = createDrawerNavigator ({
+    Home: {
+        screen: HomeStack,
+    },
+    About: {
+        screen: About,
+    }
+})
+
+export default createAppContainer(RootDrawerNavigator);

routes/homeStack.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { createStackNavigator } from "react-navigation-stack";
+import { createAppContainer } from "react-navigation";
+import About from '../screens/about'
+import Gallery from '../screens/gallery'
+import Header from '../shared/header';
+
+const screens = {
+    About: {
+        screen: About,
+        navigationOptions: ({navigation}) => {
+            return {
+                headerTitle: () => <Header navigation={navigation}/>,
+            }
+        }
+    },
+    Gallery: {
+        screen: Gallery,
+        navigationOptions: ({navigation}) => {
+            return {
+                headerTitle: () => <Header navigation={navigation}/>,
+            }
+        }
+    },
+    Calendar: {
+        screen: Calendar,
+        navigationOptions: ({navigation}) => {
+            return {
+                headerTitle: () => <Header navigation={navigation}/>,
+            }
+        }
+    },
+}
+
+const HomeStack = createStackNavigator(screens);
+
+export default createAppContainer(HomeStack);

screens/about.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { StyleSheet, ScrollView, Text } from 'react-native';
+
+export default function About() {
+    return (
+        <ScrollView style={styles.container}>
+         <Text style={styles.title}>HISTORIA</Text>
+         <Text style={styles.paragraph}>Techos Pa' Mi Gente surgio en el año 2017, luego del huracan Maria. 
+         Fue una busqueda por inspirar y apoyar a las comunidades. Que despues de varios meses instalando 
+         toldos casi a diario, nuestros voluntarios llegaron a la conclusión de que había que realizar demasiado 
+         trabajo de carpintería para instalar un toldo correctamente, pues el daño era muy extenso. Por lo que, 
+         se tomó la decisión de comenzar a reparar techos de manera permanente. Para esto, se está siguiendo la: 
+         Guía de construcción para casas resistentes a huracanes, creada por el CIAPR Y FEMA luego del huracán Hugo, 
+         con actualizaciones en términos de nuevas tecnologías y materiales. Hasta el dia de hoy Techos Pa' Mi Gente 
+         se ha converitdo en una organizacion motivada a actuar una base solida de apoyo y compromiso con  las familias 
+         afectadas  por desastres naturales.</Text>
+         <Text style={styles.title}>MISIÓN, VISIÓN Y VALORES</Text>
+         <Text style={styles.subtitle}>Misión</Text>
+         <Text style={styles.subtitle}>Techos Pa' Mi Gente</Text>
+         <Text style={styles.paragraph}>(TPMG Corp.) es una organización sin fines de lucro dedicada a la construcción 
+         de techos dignos y rehabilitación de viviendas en comunidades afectadas por desastres naturales. Contribuye a mejorar 
+         la calidad de vida de los individuos que componen estas comunidades. Promueve la autogestión y brinda capacitación en 
+         destrezas básicas de construcción para fomentar la resiliencia. </Text>
+         <Text style={styles.subtitle}>Visión</Text>
+         <Text style={styles.paragraph}>  (TPMG Corp.) como organización del tercer sector aspira a ejercer liderazgo en la 
+         construcción de techo dignos, rehabilitación de viviendas y ser promotores de la autogestión, caracterizados por la 
+         excelencia en los servicios y la autosuficiencia fiscal.  Se propone a ser uno de los principales  proveedores de 
+         recursos para la capacitación y adiestramientos del capital humano que está comprometido con la recuperación a largo 
+         plazo ante desastres naturales.</Text>
+         <Text style={styles.subtitle}>Valores</Text>
+         <Text style={styles.paragraph}>-La solidaridad es nuestro eje. Las necesidades de nuestros compueblanos también son nuestras. </Text>
+         <Text style={styles.subtitle}>Empatía</Text>
+         <Text style={styles.paragraph}>-Somos sensibles con el prójimo. Fomentamos una cultura de identificamos con el dolor de los 
+         más necesitados.</Text>
+         <Text style={styles.subtitle}>Transparencia</Text>
+         <Text style={styles.paragraph}>-Honradez en nuestros  deberes. Trato honesto y veraz en nuestras operaciones.</Text>
+         <Text style={styles.subtitle}>Cuidado al voluntario</Text>
+         <Text style={styles.paragraph}>-Los voluntarios son nuestras principales herramientas. Un buen cuidado de nuestros voluntarios 
+         significa un trabajo eficiente y eficaz en pro de nuestros beneficiarios.</Text>
+         <Text style={styles.subtitle}>Diversidad</Text>
+         <Text style={styles.paragraph}>- Somos una entidad abierta sin discrimen de ninguna manera por razón de edad, raza, color, sexo, 
+         nacimiento, condición  de veteranos, ideología  politica o religiosa, origen o condición social, orientación sexual o identidad 
+         de género, diversidad funcional; ni por ser víctima de violencia doméstica o agresión sexual. En la diversidad está  la inclusión 
+         y TPMG es una organización inclusiva.</Text>
+        </ScrollView>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    },
+    title: {
+        fontWeight: 'bold',
+        fontFamily: "AvenirNext-Bold",
+        fontSize: 50
+    },
+    subtitle: {
+        fontWeight: 'bold',
+        fontFamily: "Avenir-Black",
+        fontSize: 15 
+    },
+    paragraph: {
+        fontWeight: 'normal',
+        fontFamily: "Avenir-Black",
+        fontSize: 15,
+        textAlign: 'justify'
+    }
+});

screens/account.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {useState} from "react";
+import { StyleSheet, View, Text } from 'react-native';
+import Header from '../shared/header';
+
+export default function Account({navigation}) {
+    return (
+        <View style={styles.container}>
+         <Text>Account Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    }
+});

screens/calendar.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Header from '../shared/header';
+
+export default function Calendario({navigation}) {
+    return (
+        <View style={styles.container}>
+         <Text>Calendario Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    }
+});

screens/donar.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Header from '../shared/header';
+
+export default function Donate({navigation}) {
+    return (
+        <View style={styles.container}>
+         <Text>Donate Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    }
+});

screens/gallery.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Header from '../shared/header';
+
+export default function Gallery() {
+    return (
+        <View style={styles.container}>
+         <Text>Gallery Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    }
+});

screens/solicitar.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import Header from '../shared/header';
+
+export default function Solicitar({navigation}) {
+    return (
+        <View style={styles.container}>
+         <Text>Solicitar Screen</Text>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24
+    },
+});

shared/header.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {StyleSheet, Text, View, Image} from 'react-native';
+import { DrawerActions } from 'react-navigation';
+import {MaterialIcons} from '@expo/vector-icons';
+
+export default function Header({navigation}) {
+    const openMenu = () => {
+        navigation.openDrawer()
+    }
+    return (
+        <View style={styles.header}>
+            
+            <View>
+                <Image 
+                style={styles.tinyLogo}
+                source={require('../assets/logo.png')} />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    header: {
+        width: '100%',
+        height: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    headerText: {
+        fontweight: 'bold',
+        fontSize: 20,
+        color: '#333',
+        letterSpacing: 1,
+    },
+    icon: {
+        position: 'absolute',
+        left: -75
+    },
+    tinyLogo: {
+        width:120,
+        height:35,
+    },
+})