MiNaRiYao/Radices/Navigators/TopBarNavigator.js

//Nathalia A. Alicea
//código para la implementación de los Tabs y las pantalla de "Sobre Nosotros", "Insignia", "Tienda" y "Contacto"

import * as React from 'react';
import {useState, useEffect}  from 'react';
import {Text, View, Button, Linking, Image, FlatList, TextInput, StyleSheet, ScrollView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

//Json que se están usando como ejemplo de lo que se usaría con una API
//import JsonNosotros from '../nosotros.json' 
//import insignias from '../insignias.json'

import HomeScreen from '../codes/screen/Homescreen/index';

import fetch_json from '../fetch_json';

//función con código para la pantalla de "Sobre Nosotros" donde la data se extrae de Json files.
function Nosotros() {

    const [jsonNosotros, setNosotros] = useState([]);
    const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=2';

    useEffect(() => {
        fetch_json(url, setNosotros);
    });

    return (
        <View style = {{
            flex:1,
            alignItems: "center",
            justifyContent: "space-evenly",
            backgroundColor: "#efffea"}}
            >
            <Text></Text>
            <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
            <Text></Text>
            <Text></Text>
            <ScrollView>
            {jsonNosotros.map((item)=>{
                return (
                    <View key ={item.key} >
                        <Image style = {styles.image} source={{uri: item.imagen}} />
                        <Text style={styles.item}>{item.nombre} {item.apellido} </Text>
                        <Text style={styles.itemLetters}>{item.descripcion}</Text>
                        <Text></Text>
                    </View>
                )
            })}
            </ScrollView>
            <ScrollView>
            <View >
                <View>
                    <Text style={styles.itemMVV}>Misión</Text>
                    <Text style={styles.itemLettersMVV}>Aportar a la transformación hacia la sostenibilidad a nivel individual, empresarial y organizacional a través de la educación y de la promoción y validación de negocios locales que venden productos o servicios sostenibles.</Text>
                </View>
                <View>
                    <Text style={styles.itemMVV}>Visión</Text>
                    <Text style={styles.itemLettersMVV}>Ser reconocidos globalmente como una organización educativa con confiabilidad y compromiso con la educación sobre la sostenibilidad y la promoción y validación de productos y servicios sostenibles locales, destacando y contribuyendo al bienestar de la ciudadanía, el desarrollo económico local, el comercio justo y la conservación del ambiente.</Text>
                </View>
                <View>
                    <Text style={styles.itemMVV}>Valores</Text>
                    <Text style={styles.itemLettersMVV}>Educación, Respeto y responsabilidad social y ambiental, Comercio justo, Confiabilidad, Disciplina, Empatía y solidaridad, Equidad, Honestidad, Humanidad y respeto, Integridad y objetividad</Text>
                </View>
            </View>
            </ScrollView>
            
        </View>     
    );

}

//función donde se extraen las insignias y las descripciones de las mismas y se muestran en el tab de "Insignias".
function Logos() {
    const [jsonInsignias, setInsignias] = useState([]);
    const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=1';

    useEffect(() => {
        fetch_json(url, setInsignias);
    });

    return (
        <View style = {{
            flex:1,
            alignItems: "center",
            justifyContent: "space-evenly",
            backgroundColor: "#efffea"}}
            >
            <Text></Text>
            <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
            <Text></Text>
            <Text></Text>
            <ScrollView>
            {jsonInsignias.map((item)=>{
                return (
                    <View key ={item.id} >
                        <Image style = {styles.image} source={{uri: item.imagen}} />
                        <Text style={styles.description}>{item.nombre} </Text>
                        <Text></Text>
                    </View>
                )
            })}
            </ScrollView>
        </View>
    );
}

//función para Tienda. 
function Tienda() {

    return (
        <View style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "#efffea"
        }}>
            <HomeScreen />
        </View>
    );
}

//función donde los clientes o personas interesadas pueden escribir un email a raices.
function Contacto() {
    return (
        <View style = {{
            flex:1,
            alignItems: "center",
            justifyContent: "space-evenly",
            backgroundColor: "#efffea"}}>

            <Image style = {{width: 260, height: 130}} source={require('../image/logowebes.png')}/>
            <Text style={{ fontSize: 20, color: '#2d4b09', fontWeight: '800' }}>Para solicitudes o reclamos: </Text>
            <View style={{padding:20}}>
                
                <Text style={{ fontSize: 10, color: '#4c5b4b', fontWeight: '500' }}>
                    Con el próposito de poder comunicarnos de la manera más efectiva posible, favor de proveer la siguiente información: propósito de comunicación, nombre, apellido y correo electrónico. Nos estaremos comunicando con usted prontamente.
                </Text>
                <Button onPress={() => Linking.openURL('mailto:contacto@raices.com?subject=SendMail&body=Favor de incluir motivo de comunicación e información personal.') } title="Contáctanos!" color="#2d4b09" />
            </View>
    </View>
    );
        

}

//estilos de stylesheets
const styles = StyleSheet.create({
    image:{
        flex:2,
        height: 150,
        resizeMode: "contain"
    },
    container: {
        flex: 1,
        backgroundColor:'#58AB63', 
        paddingTop:40, 
        paddingHorizontal: 20, 
    },
    item: { 
        marginTop:30,
        padding:10,
        backgroundColor: '#77aa5a',
        fontSize: 20, 
        color: "#fff",
        justifyContent: "flex-end"

    },
    description: {
        padding:10,
        backgroundColor: '#77aa5a',
        fontSize: 20, 
        color: "#fff",
        textAlign: "center",
        alignItems: "stretch"

    },
    itemLetters: { 
        padding: 30,
        backgroundColor: '#77aa5a',
        fontSize: 10, 
        color: "#fff", 
        justifyContent: "flex-start"
    },
    itemMVV:{
        padding: 10,
        fontSize: 15, 
        color: "green"},
    itemLettersMVV: { 
        padding: 10,
        fontSize: 10, 
        color: "#77aa5a", 
        justifyContent: "flex-start"
        }
});

const Tab = createMaterialTopTabNavigator();

//todas las pantalla de los tabs.
function MyTabs() {
    const insets = useSafeAreaInsets();
    return (
        <Tab.Navigator screenOptions ={{ style: { backgroundColor: "white", marginTop: insets.top }, activeTintColor: "#228B22", labelStyle: { fontSize: 12 } }}>
            <Tab.Screen name="Sobre Nosotros"
                component={Nosotros}
                options={{ tabBarLabel: 'Sobre Nosotros' }}
            />
            <Tab.Screen name="Insignias"
                component={Logos}
                options={{ tabBarLabel: 'Insignias' }}
            />
            <Tab.Screen name="Tienda"
                component={Tienda}
                options={{ tabBarLabel: 'Tienda' }}
            />
            <Tab.Screen name="Contacto"
                component={Contacto}
                options={{ tabBarLabel: 'Contacto' }}
            />
        </Tab.Navigator>
    );
}

export default function TopTabNavigator() {
    return (
        <NavigationContainer>
            <MyTabs />
        </NavigationContainer>
    )
}