Declarar variables Globales en React Native

---

const COLORS = {
  primary: "#4A90E2",
  secondary: "#50E3C2",
  background: "#F5F5F5",
  text: "#333333",
  danger: "#FF3B30",
};

const SIZES = {
  small: 12,
  medium: 16,
  large: 20,
};

const SPACING = {
  small: 8,
  medium: 16,
  large: 24,
};

const FONTS_FAMILY = {
  regular: "Poppins-Regular",
  bold: "Poppins-Bold",
  light: "Poppins-Light",
};

const FONTS_SIZES = {
  small: 12,
  medium: 16,
  large: 20,
};

const FONTS_WEIGHTS = {
  regular: "400",
  bold: "700",
  light: "300",
};

// Exportar las constantes de manera nombrada
export { COLORS, SIZES, SPACING, FONTS_FAMILY, FONTS_SIZES, FONTS_WEIGHTS };

import React from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
// Importar las constantes de manera nombrada
import { COLORS, SIZES, SPACING, FONTS_FAMILY, FONTS_SIZES, FONTS_WEIGHTS } from '../constants/constants';

const PerfilUsuario = () => {
return (
  <View style={styles.container}>
    <Image
      source={{ uri: 'https://i.pravatar.cc/150?img=3' }}
      style={styles.avatar}
    />
    <Text style={styles.nombre}>Juan Pérez</Text>
    <Text style={styles.descripcion}>Desarrollador React Native</Text>
  </View>
);
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: COLORS.background,
    padding: SPACING.large,
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: SPACING.medium,
  },
  nombre: {
    fontSize: FONTS_SIZES.large,
    fontFamily: FONTS_FAMILY.bold,
    color: COLORS.primary,
    fontWeight: FONTS_WEIGHTS.bold,
  },
  descripcion: {
    fontSize: FONTS_SIZES.medium,
    fontFamily: FONTS_FAMILY.light,
    color: COLORS.text,
    fontWeight: FONTS_WEIGHTS.light,
    marginTop: SPACING.small,
  },
});

export default PerfilUsuario;