Guía Completa de Estilos en React Native: Uso de StyleSheet

¿Cómo aplicar estilos con StyleSheet en React Native?

En React Native, puedes dar estilo a tus componentes usando distintos métodos como estilos en línea, el objeto StyleSheet y la combinación de estilos para lograr mayor flexibilidad y organización.

StyleSheet: es una utilidad de React Native que permite definir estilos de forma estructurada y optimizada, similar a las hojas de estilo en CSS.

Estilos en Línea (`Inline Styles`)

El primer método es el uso de estilos en línea, donde pasamos un objeto de estilo directamente al atributo style del componente. Es rápido y útil para ajustes puntuales o estilos dinámicos.

Ejemplo de estilo en línea

jsx

import { Text } from 'react-native';

export default function App() {
  return (
    <Text style={{ color: 'blue', fontSize: 20, fontWeight: 'bold' }}>
      Texto Azul
    </Text>
  );
}

Estilos con `StyleSheet` (Recomendado)

Para mejorar la legibilidad y eficiencia, es mejor usar StyleSheet, que permite definir los estilos por separado en un objeto. Esto ayuda a mantener el código limpio y optimizado.

Ejemplo usando `StyleSheet`

jsx

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

// Componente funcional
const MiComponente = () => {
return (
   // Contenedor principal con estilos que hacen referencia a styles.container
    <View style={styles.container}>
      <Text style={styles.titulo}>Título Principal</Text>
      <Text style={styles.subtitulo}>Subtítulo</Text>
      <Text style={styles.titleCenter}>Titulo centrado</Text>
    </View>
  );
};

// Definición de estilos usando StyleSheet
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f5f5f5',
  },
  titulo: { 
    color: 'red', 
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  subtitulo: {
    color: '#333',
    fontSize: 18,
  },
  titleCenter: {
    textAlign: 'center',
    fontSize: 20,
    color: 'blue',
  }
});

export default MiComponente;

En este ejemplo, los estilos están definidos dentro de StyleSheet.create(), lo que mejora la organización y el rendimiento de la aplicación.

Importante

Los estilos definidos con StyleSheet deben ser objetos de JavaScript, y sus propiedades deben escribirse en camelCase, como backgroundColor en lugar de background-color.

No se permiten guiones (-) ni guiones bajos (_) en los nombres de las propiedades ni en las claves del objeto.
Por ejemplo: background_color o title-center no son válidos; en su lugar, usa backgroundColor o titleCenter.

Combinando Estilos

También puedes combinar diferentes estilos. Esto es útil si quieres aplicar estilos predeterminados y luego hacer pequeñas modificaciones específicas en un componente.

Ejemplo de combinación de estilos

jsx

import React from 'react';
import { Text, StyleSheet } from 'react-native';

const MiComponente = () => {
return (
    <Text style={[styles.texto, { color: 'green' }]}>
      Este texto combina estilos
    </Text>
  );
};

const styles = StyleSheet.create({
  texto: {
    fontSize: 18,
    fontWeight: 'bold',
  }
});

export default MiComponente;

Aquí, el estilo texto se aplica junto con un estilo en línea que cambia el color a verde.

Recordatorio

Los estilos en línea tienen mayor prioridad que los definidos en StyleSheet.

Estilos Condicionales

En React Native, también es posible aplicar estilos de forma condicional, lo cual es útil cuando tienes diferentes estilos dependiendo del estado de tu componente.

Ejemplo de estilos condicionales:

jsx

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const EstiloCondicional = () => {
const [isRed, setIsRed] = useState(false);

return (
    <View style={styles.container}>
      <TouchableOpacity 
        style={styles.button}
        onPress={() => setIsRed(!isRed)}
      >
        <Text style={styles.text}>Cambiar Color</Text>
      </TouchableOpacity>

      <Text style={[styles.text, isRed ? styles.redText : styles.greenText]}>
        Este texto cambia de color
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#2196F3',
    padding: 10,
    borderRadius: 25,
  },
  text: {
    color: "#fff",
    fontSize: 18,
  },
  redText: {
    color: 'red',
  },
  greenText: {
    color: 'green',
  }
});

export default EstiloCondicional;

En este ejemplo, el color del texto cambia dependiendo del valor del estado isRed, lo que aplica un estilo diferente de manera dinámica.

Estilos Responsivos

Puedes también hacer que tus estilos sean responsivos y se adapten a diferentes tamaños de pantalla.

Ejemplo de estilos responsivos:

jsx

import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

const EstilosResponsivos = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Ancho de la pantalla: {width}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: width > 400 ? 24 : 18, // Cambia el tamaño de fuente dependiendo del ancho de la pantalla
  },
});

export default EstilosResponsivos;

En este contexto, el tamaño de la fuente cambia dependiendo del ancho de la pantalla, lo que hace que la interfaz sea más flexible.

Diseño con Flexbox

Flexbox es un modelo de diseño unidimensional que permite alinear y distribuir el espacio entre los elementos en un contenedor, incluso cuando su tamaño es desconocido o dinámico.

Ejemplo de Flexbox:

jsx

import { View, ScrollView, StyleSheet } from 'react-native';

const FlexboxExample = () => {
return (
  <ScrollView>
    <View style={styles.container}>
      <View style={styles.box1} />
      <View style={styles.box2} />
      <View style={styles.box3} />
      <View style={styles.box4} />
    </View>
  </ScrollView>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row', // 'column', 'row', 'column-reverse', 'row-reverse'
    flexWrap: 'wrap', // Permite que bajen a la siguiente línea si no caben
    justifyContent: 'space-between', // 'flex-start', 'flex-end', 'center', 'space-around'
    alignItems: 'center', // 'flex-start', 'flex-end', 'stretch'
    padding: 20,
  },
  box1: {
    width: 100,
    height: 100,
    backgroundColor: '#4385f5',
    marginBottom: 15,
    borderRadius:5
  },
  box2: { width: 100, height: 100, backgroundColor: '#eb4235', marginBottom: 15, borderRadius:5 },
  box3: { width: 100, height: 100, backgroundColor: '#fcbc05', marginBottom: 15, borderRadius:5 },
  box4: { width: 100, height: 100, backgroundColor: '#35a954', marginBottom: 15, borderRadius:5 },
});

export default FlexboxExample;

Definir Estilos Globales desde un Archivo

Puedes definir estilos globales en un archivo separado y luego importarlos en tus componentes. Esto es útil para mantener la consistencia en toda la aplicación.

Ejemplo de estilos globales:

Definir el archivo de estilos globales: /styles/globalStyles.js

jsx

import { StyleSheet } from 'react-native';

const globalStyles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
    color: '#333',
  },
  button: {
    backgroundColor: '#007bff',
    padding: 12,
    borderRadius: 6,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontWeight: '600',
  }
});

export default globalStyles;

Luego, puedes importar estos estilos en tus componentes usando el archivo de estilos: /components/MyComponent.js

jsx

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import globalStyles from '../styles/globalStyles';

const MyComponent = () => {
return (
    <View style={globalStyles.container}>
      <Text style={globalStyles.title}>Hola desde el componente</Text>
      <TouchableOpacity style={globalStyles.button}>
        <Text style={globalStyles.buttonText}>Presionar</Text>
      </TouchableOpacity>
    </View>
  );
};

export default MyComponent;

Conclusión

Estilos en línea: Útiles para cambios rápidos y simples.
StyleSheet: Recomendado para la mayor parte de los casos, ya que organiza mejor tu código.
Combinación de estilos: Útil para aplicar estilos comunes y personalizarlos rápidamente.
Estilos condicionales: Perfectos para personalizar la apariencia de los componentes basados en su estado.
Estilos responsivos: Ajustan la UI según las dimensiones de la pantalla, mejorando la experiencia en diferentes dispositivos.
Flexbox: Ideal para crear diseños complejos y responsivos.
Estilos globales: Mantienen la consistencia en toda la aplicación y facilitan el mantenimiento del código.
Estilos en componentes: Permiten encapsular estilos específicos para cada componente, mejorando la modularidad.