?️ React Native Image Component

? Quick Overview

The Image component in React Native is used to display images from local assets, remote URLs, or base64 encoded data. It supports resizing, styling, caching, and loading states, making it essential for building visually rich mobile applications.

? Key Concepts

Supports local and remote image sources
Requires explicit width and height
Optimized image rendering on iOS and Android
Provides resize modes for layout control

? Syntax / Theory

The Image component is imported from react-native and uses the source prop to define the image location.

? View Code Example

// Import Image component from react-native
import { Image } from 'react-native';

// Basic Image usage with a remote URL
<Image
  source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
  style={{ width: 100, height: 100 }}
/>

? Live Output / Explanation

?️ What Happens?

The image is fetched from the given URL and rendered on the screen. Width and height are mandatory; without them, the image will not appear.

? Interactive Example

Change the image size dynamically using state to understand how layout updates work. The simulator below mimics React Native's state behavior.

? View Code Example

// Interactive Image resize using React state
import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';

export default function App() {
  const [size, setSize] = useState(100);

  return (
    <View>
      <Image
        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        style={{ width: size, height: size }}
      />
      <Button title="Increase Size" onPress={() => setSize(size + 20)} />
    </View>
  );
}

? Web Simulator

Click the button below to see the logic in action:

width: 100, height: 100

? Use Cases

User profile pictures
Product images in e-commerce apps
Gallery and media applications
Icons and branding assets

? Tips & Best Practices

Always define width and height
Use optimized image sizes for performance
Prefer local assets for static images
Use resizeMode for layout control

? Try It Yourself

Load an image from your local assets
Experiment with different resizeMode values
Add a loading placeholder
Animate image size on button click