how to work with images in react native

The Image component in React Native displays pictures in your app. Images can be:

• Local images: stored inside your project (like logos or icons).

• Remote images: loaded from a web URL.

React Native bundles local images with your app and loads remote images over the internet.

Syntax and How It Works

A. Local Images

1.  Stored in your project folders (e.g., assets/).
2.  Imported using require() with a relative path.
3.  Bundled into your app for offline use.

Example:

<Image source={require('./assets/logo.png')} style={{ width: 100, height: 100 }} />

You must set width and height because React Native cannot automatically detect the size.

B. Remote Images

1.  Loaded from the internet using URLs.
2.  Use an object with a `uri` property for the `source` prop

Example:

<Image source={{ uri: 'https://example.com/image.jpg' }} style={{ width: 100, height: 100 }} />

Important Props

•  style: size, position, border, etc.
•  resizeMode: how the image fits inside its container
• cover (default): fills container, cropping if needed
• contain: fits inside container, no cropping
•  stretch: stretches to fill container
• center: centers image without resizing
•  blurRadius: applies blur effect

Making Images Responsive to Screen Size

To make images look good on all devices, use dynamic sizing based on the device’s width or height.

Use Dimensions from React Native to get the screen size, then calculate image size proportionally.

Example:

import { Dimensions, Image } from 'react-native';

const windowWidth = Dimensions.get('window').width;

<Image

  source={require('./assets/logo.png')}

  style={{ width: windowWidth * 0.8, height: windowWidth * 0.5 }}

  resizeMode="contain"

/>

let's try for the image with :

• width is 80% of the screen width, and 
• height is 50% of screen width

5. Real-Life Example with Responsive Images

import React from 'react';

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

const windowWidth = Dimensions.get('window').width;

export default function App() {

  return (

    <View style={styles.container}>

      {/* Local responsive image */}

      <Image

        source={require('./assets/logo.png')}

        style={[styles.image, { width: windowWidth * 0.7, height: windowWidth * 0.4 }]}

        resizeMode="contain"

      />

      {/* Remote responsive image */}

      <Image

        source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}

        style={[styles.image, { width: windowWidth * 0.5, height: windowWidth * 0.3 }]}

        resizeMode="cover"

        blurRadius={1}

      />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

  },

  image: {

    margin: 15,

  },

});

 practices for Responsive Images

* Use `Dimensions.get('window')` to get device width and height.

* Calculate image size as a percentage of screen size.

* Combine with `resizeMode="contain"` or `"cover"` for best results.

* You can also use `AspectRatio` (via style or libraries) to maintain image proportions.

* Consider using `react-native-responsive-screen` package for more utilities.