AnEdJaMi/screens/Derechos.js

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity,  Linking, Pressable} from "react-native";
import { FlatList, TouchableHighlight } from "react-native-gesture-handler";
import {ButtonLay} from "./Button.js";
import Leyes from "./leyes.json";
import LeyesPR from "./leyesPR.json";
import DerechosAmb from "./derechos.json";

const Derechos = () => {
    return (

        <><View>

            <Text style={styles.container2}>1) Leyes de la Tierra</Text>
            <View>
                {Leyes.map(ley => {
                    return (
                        <><TouchableOpacity style={styles.button}
                        
                        onPress={() => {
                            Linking.openURL(ley.link.toString());
                        }}>
                            <Text style={styles.text}>{ley.title}</Text>
                        </TouchableOpacity></>
                    );
                })}
            </View>

        </View>
        
        <View>
                <Text style={styles.container2}>2) Derechos del activista climatico</Text>
                <View>
                {DerechosAmb.map(der => {
                    return (
                        <><TouchableOpacity style={styles.button}
                        
                        onPress={() => {
                            Linking.openURL(der.link.toString());
                        }}>
                            <Text style={styles.text}>{der.title}</Text>
                        </TouchableOpacity></>
                    );
                })}
            </View>


            </View>
            
            
            <View>
                <Text style={styles.container2}>3) Leyes de Puerto Rico</Text>
                <View>
                {LeyesPR.map(ley => {
                    return (
                        <><TouchableOpacity style={styles.button}
                        
                        onPress={() => {
                            Linking.openURL(ley.link.toString());
                        }}>
                            <Text style={styles.text}>{ley.title}</Text>
                        </TouchableOpacity></>
                    );
                })}
            </View>
            </View></>



    );
}

const styles = StyleSheet.create({
    container: {
        fontSize: 25,
        textAlign: "center",
        marginTop: "10%"
    },

    container2: {
        fontSize: 25,
        textAlign: "left",
        marginTop: "10%",
        marginLeft: "5%"
    },

    laws: {
        fontSize: 15,
        textAlign: "center",
        marginTop: "5%"
    },
    button: {
        width:250,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: 12,
        paddingHorizontal: 32,
        borderRadius: 4,
        elevation: 3,
        backgroundColor: '#009688',
        marginTop: "5%"
      },
      text: {
        fontSize: 16,
        lineHeight: 21,
        fontWeight: 'bold',
        letterSpacing: 0.25,
        color: 'white',
        textAlign: "center"
      }
})

export default Derechos