Browse Source

Upload files to ''

con drawer navigation
dayanlee.deleon 1 year ago
parent
commit
3affa34267
5 changed files with 207 additions and 0 deletions
  1. 87
    0
      App.js
  2. 69
    0
      about.js
  3. 17
    0
      donar.js
  4. 17
    0
      gallery.js
  5. 17
    0
      solicitar.js

+ 87
- 0
App.js View File

@@ -0,0 +1,87 @@
1
+import * as React from 'react';
2
+import { Button, View, Image} from 'react-native';
3
+import { createDrawerNavigator } from '@react-navigation/drawer';
4
+import { NavigationContainer } from '@react-navigation/native';
5
+import About from './screens/about';
6
+import Gallery from './screens/gallery';
7
+import Calendario from './screens/calendar';
8
+import Donate from './screens/donar';
9
+import Solicitar from './screens/solicitar';
10
+import Account from './screens/account';
11
+import Header from './shared/header';
12
+
13
+const screens = {
14
+  About: {
15
+      screen: About,
16
+      navigationOptions: ({navigation}) => {
17
+          return {
18
+              headerTitle: () => <Header navigation={navigation}/>,
19
+          }
20
+      }
21
+  },
22
+}
23
+
24
+function HomeScreen({ navigation }) {
25
+  return (
26
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
27
+      <Button
28
+        onPress={() => navigation.navigate('Notifications')}
29
+        title="Go to notifications"
30
+      />
31
+    </View>
32
+  );
33
+}
34
+
35
+function NotificationsScreen({ navigation }) {
36
+  return (
37
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
38
+      <Button onPress={() => navigation.goBack()} title="Go back home" />
39
+    </View>
40
+  );
41
+}
42
+
43
+
44
+
45
+const Drawer = createDrawerNavigator();
46
+
47
+export default function App() {
48
+  return (
49
+    <NavigationContainer >
50
+      <Drawer.Navigator initialRouteName="Home">
51
+        <Drawer.Screen name="Sobre nosotros" component={About} options={({navigation}) => {
52
+          return {
53
+              headerTitle: () => <Header navigation={navigation}/>,
54
+          }
55
+        }}/>
56
+        <Drawer.Screen name="Calendario" component={Calendario} options={({navigation}) => {
57
+          return {
58
+              headerTitle: () => <Header navigation={navigation}/>,
59
+          }
60
+        }}/>
61
+        <Drawer.Screen name="Galeria" component={Gallery} options={({navigation}) => {
62
+          return {
63
+              headerTitle: () => <Header navigation={navigation}/>,
64
+          }
65
+        }}/>
66
+        <Drawer.Screen name="Donar" component={Donate} options={({navigation}) => {
67
+          return {
68
+              headerTitle: () => <Header navigation={navigation}/>,
69
+          }
70
+        }}/>
71
+        <Drawer.Screen name="Solicitar ayuda" component={Solicitar} 
72
+        options={({navigation}) => {
73
+          return {
74
+              headerTitle: () => <Header navigation={navigation}/>,
75
+          }
76
+        }}/>
77
+
78
+        <Drawer.Screen name="Mi cuenta" component={Account} 
79
+        options={({navigation}) => {
80
+          return {
81
+              headerTitle: () => <Header navigation={navigation}/>,
82
+          }
83
+        }}/>    
84
+      </Drawer.Navigator>
85
+    </NavigationContainer>
86
+  );
87
+}

+ 69
- 0
about.js View File

@@ -0,0 +1,69 @@
1
+import * as React from 'react';
2
+import { StyleSheet, ScrollView, Text } from 'react-native';
3
+
4
+export default function About() {
5
+    return (
6
+        <ScrollView style={styles.container}>
7
+         <Text style={styles.title}>HISTORIA</Text>
8
+         <Text style={styles.paragraph}>Techos Pa' Mi Gente surgio en el año 2017, luego del huracan Maria. 
9
+         Fue una busqueda por inspirar y apoyar a las comunidades. Que despues de varios meses instalando 
10
+         toldos casi a diario, nuestros voluntarios llegaron a la conclusión de que había que realizar demasiado 
11
+         trabajo de carpintería para instalar un toldo correctamente, pues el daño era muy extenso. Por lo que, 
12
+         se tomó la decisión de comenzar a reparar techos de manera permanente. Para esto, se está siguiendo la: 
13
+         Guía de construcción para casas resistentes a huracanes, creada por el CIAPR Y FEMA luego del huracán Hugo, 
14
+         con actualizaciones en términos de nuevas tecnologías y materiales. Hasta el dia de hoy Techos Pa' Mi Gente 
15
+         se ha converitdo en una organizacion motivada a actuar una base solida de apoyo y compromiso con  las familias 
16
+         afectadas  por desastres naturales.</Text>
17
+         <Text style={styles.title}>MISIÓN, VISIÓN Y VALORES</Text>
18
+         <Text style={styles.subtitle}>Misión</Text>
19
+         <Text style={styles.subtitle}>Techos Pa' Mi Gente</Text>
20
+         <Text style={styles.paragraph}>(TPMG Corp.) es una organización sin fines de lucro dedicada a la construcción 
21
+         de techos dignos y rehabilitación de viviendas en comunidades afectadas por desastres naturales. Contribuye a mejorar 
22
+         la calidad de vida de los individuos que componen estas comunidades. Promueve la autogestión y brinda capacitación en 
23
+         destrezas básicas de construcción para fomentar la resiliencia. </Text>
24
+         <Text style={styles.subtitle}>Visión</Text>
25
+         <Text style={styles.paragraph}>  (TPMG Corp.) como organización del tercer sector aspira a ejercer liderazgo en la 
26
+         construcción de techo dignos, rehabilitación de viviendas y ser promotores de la autogestión, caracterizados por la 
27
+         excelencia en los servicios y la autosuficiencia fiscal.  Se propone a ser uno de los principales  proveedores de 
28
+         recursos para la capacitación y adiestramientos del capital humano que está comprometido con la recuperación a largo 
29
+         plazo ante desastres naturales.</Text>
30
+         <Text style={styles.subtitle}>Valores</Text>
31
+         <Text style={styles.paragraph}>-La solidaridad es nuestro eje. Las necesidades de nuestros compueblanos también son nuestras. </Text>
32
+         <Text style={styles.subtitle}>Empatía</Text>
33
+         <Text style={styles.paragraph}>-Somos sensibles con el prójimo. Fomentamos una cultura de identificamos con el dolor de los 
34
+         más necesitados.</Text>
35
+         <Text style={styles.subtitle}>Transparencia</Text>
36
+         <Text style={styles.paragraph}>-Honradez en nuestros  deberes. Trato honesto y veraz en nuestras operaciones.</Text>
37
+         <Text style={styles.subtitle}>Cuidado al voluntario</Text>
38
+         <Text style={styles.paragraph}>-Los voluntarios son nuestras principales herramientas. Un buen cuidado de nuestros voluntarios 
39
+         significa un trabajo eficiente y eficaz en pro de nuestros beneficiarios.</Text>
40
+         <Text style={styles.subtitle}>Diversidad</Text>
41
+         <Text style={styles.paragraph}>- Somos una entidad abierta sin discrimen de ninguna manera por razón de edad, raza, color, sexo, 
42
+         nacimiento, condición  de veteranos, ideología  politica o religiosa, origen o condición social, orientación sexual o identidad 
43
+         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 
44
+         y TPMG es una organización inclusiva.</Text>
45
+        </ScrollView>
46
+    )
47
+}
48
+
49
+const styles = StyleSheet.create({
50
+    container: {
51
+        padding: 24
52
+    },
53
+    title: {
54
+        fontWeight: 'bold',
55
+        fontFamily: "AvenirNext-Bold",
56
+        fontSize: 50
57
+    },
58
+    subtitle: {
59
+        fontWeight: 'bold',
60
+        fontFamily: "Avenir-Black",
61
+        fontSize: 15 
62
+    },
63
+    paragraph: {
64
+        fontWeight: 'normal',
65
+        fontFamily: "Avenir-Black",
66
+        fontSize: 15,
67
+        textAlign: 'justify'
68
+    }
69
+});

+ 17
- 0
donar.js View File

@@ -0,0 +1,17 @@
1
+import * as React from 'react';
2
+import { StyleSheet, View, Text } from 'react-native';
3
+import Header from '../shared/header';
4
+
5
+export default function Donate({navigation}) {
6
+    return (
7
+        <View style={styles.container}>
8
+         <Text>Donate Screen</Text>
9
+        </View>
10
+    )
11
+}
12
+
13
+const styles = StyleSheet.create({
14
+    container: {
15
+        padding: 24
16
+    }
17
+});

+ 17
- 0
gallery.js View File

@@ -0,0 +1,17 @@
1
+import * as React from 'react';
2
+import { StyleSheet, View, Text } from 'react-native';
3
+import Header from '../shared/header';
4
+
5
+export default function Gallery() {
6
+    return (
7
+        <View style={styles.container}>
8
+         <Text>Gallery Screen</Text>
9
+        </View>
10
+    )
11
+}
12
+
13
+const styles = StyleSheet.create({
14
+    container: {
15
+        padding: 24
16
+    }
17
+});

+ 17
- 0
solicitar.js View File

@@ -0,0 +1,17 @@
1
+import * as React from 'react';
2
+import { StyleSheet, View, Text } from 'react-native';
3
+import Header from '../shared/header';
4
+
5
+export default function Solicitar({navigation}) {
6
+    return (
7
+        <View style={styles.container}>
8
+         <Text>Solicitar Screen</Text>
9
+        </View>
10
+    )
11
+}
12
+
13
+const styles = StyleSheet.create({
14
+    container: {
15
+        padding: 24
16
+    },
17
+});