Upload files to ''

con drawer navigation

App.js

@@ -0,0 +1,87 @@
+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';
+
+const screens = {
+  About: {
+      screen: About,
+      navigationOptions: ({navigation}) => {
+          return {
+              headerTitle: () => <Header navigation={navigation}/>,
+          }
+      }
+  },
+}
+
+function HomeScreen({ navigation }) {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Button
+        onPress={() => navigation.navigate('Notifications')}
+        title="Go to notifications"
+      />
+    </View>
+  );
+}
+
+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>
+  );
+}

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'
+    }
+});

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
+    }
+});

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
+    }
+});

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
+    },
+});