Guías Técnicas

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

PropiedadDescripción
sourceObjeto con la URI o archivo local. Obligatorio.
styleTamaño y apariencia de la imagen. Obligatorio.
resizeModeCómo se ajusta la imagen: cover, contain, stretch, repeat, center.
onLoadSe dispara cuando la imagen ha sido cargada.
onErrorSe 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.