Cómo mostrar imágenes con el componente Image en React Native

¿Qué es el componente Image en React Native?

El componente Image en React Native permite mostrar imágenes en tus apps móviles, ya sean desde una URL remota o archivos locales.
Es esencial para mostrar logos, avatares, íconos, fondos o cualquier imagen decorativa o informativa.

Ejemplo con imágenes locales y remotas

jsx

import React from 'react';
import { StyleSheet, Image, View } from 'react-native';
import imgLogo from './assets/snack-icon.png'; // Imagen importada

// Imagen como variable
const image = require('./assets/snack-icon.png'); 

const ImagenesApp = () => {
return (
    <View style={styles.container}>
      {/* Imagen desde una URL */}
      <Image 
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} 
        style={styles.image} 
      />

      {/* Imagen local con require */}
      <Image 
        source={require('./assets/snack-icon.png')} 
        style={styles.image} 
      />

      {/* Imagen desde variable */}
      <Image 
        source={image} 
        style={styles.image} 
      />

      {/* Imagen importada */}
      <Image 
        source={imgLogo} 
        style={styles.image} 
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  image: {
    width: 100,
    height: 100,
    marginBottom: 10,
  },
});

export default ImagenesApp;

¿Qué debes saber?

Para imágenes locales, usa require() o impórtalas como módulos.
Las imágenes remotas deben tener la propiedad uri dentro de un objeto.
El estilo (width y height) es obligatorio en el componente Image.

📦 Props más comunes

Propiedad	Descripción
`source`	Objeto con la URI o archivo local. Obligatorio.
`style`	Tamaño y apariencia de la imagen. Obligatorio.
`resizeMode`	Cómo se ajusta la imagen: `cover`, `contain`, `stretch`, `repeat`, `center`.
`onLoad`	Se dispara cuando la imagen ha sido cargada.
`onError`	Se dispara si hay un error al cargar la imagen.

🖼️ Ejemplo con `resizeMode`

jsx

<Image 
source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
style={styles.image}
resizeMode="contain"
/>

Buenas prácticas

Optimiza las imágenes para que no pesen demasiado.
Usa formatos modernos como .webp cuando sea posible.
Para imágenes locales, colócalas en una carpeta como assets/.
Siempre define width y height, o usa estilos flexibles como % o aspectRatio.