From 80808395d83e96c81caae6c5d97ffa2057bc1b83 Mon Sep 17 00:00:00 2001 From: RitupL Date: Thu, 1 May 2025 11:23:03 +0530 Subject: [PATCH 1/3] added migrating to expo image blog --- .../2025-05-01-migrating-to-expo-image.md | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 website/blog/2025-05-01-migrating-to-expo-image.md diff --git a/website/blog/2025-05-01-migrating-to-expo-image.md b/website/blog/2025-05-01-migrating-to-expo-image.md new file mode 100644 index 000000000..84f753e53 --- /dev/null +++ b/website/blog/2025-05-01-migrating-to-expo-image.md @@ -0,0 +1,78 @@ +--- +title: "Migrating Image Component to Expo Image" +author: "Ankur Jyoti Das" +--- +--- + +When building modern mobile apps, image handling plays a crucial role in user experience and performance. Whether it's a social feed, media gallery, or product listing—rendering images efficiently can make or break your app’s smoothness. + +In this post, we’ll compare the Old Image Component (React Native's default Image) with the Enhanced Image Component (expo-image)—a high-performance image solution introduced by Expo. + + + +## Why This Matters + +The Old Image Component in React Native works well for simple use cases, but as your app scales, you’ll start noticing slow rendering, janky scrolling, and inconsistent caching. That’s where the enhanced image component steps in—with native-level performance, better caching, and memory efficiency. + +### Caching + +**Old Image Component** + +- Offers minimal caching. +- May result in repeated downloads, increasing data usage. + +**Enhanced Image Component** + +- Supports configurable caching strategies: memory, disk, memory-disk. +- Supports blurhash/thumbhash placeholders for low-res previews during loading. +Result: Up to 60% reduction in network requests thanks to smart disk caching. + + +### Memory Usage + +**Old Image Component** + +- Limited memory management. +- May cause memory spikes or crashes in image-heavy apps. + +**Enhanced Image Component** + +- Proactive memory management with automatic cache purging. +- Optimized for FlatList and virtualized lists. + +:::impact + + Up to 40% lower memory footprint observed in production apps. + +::: + + +### Performance + +**Old Image Component** +- Relies heavily on the JavaScript thread for image decoding and rendering. +- Causes UI lag when rendering many or large images. + +**Enhanced Image Component** + +- Offloads decoding to native modules like SDWebImage (iOS) and Glide (Android). +- Enables smooth, consistent rendering even in image-heavy interfaces. + +Key Metric: Apps using expo-image report 30–50% faster image rendering in lists and galleries, especially on mid-range Android devices. + + + +## Quick Comparison + +| Feature | Old Component | New Component | +| ----- | ---- | --- | +| Performance | Moderate, JS-thread bound | Native-level, smooth | +| Caching | Minimal, non-configurable | Memory / Disk, configuration will be made available in subsequent releases | +| Memory Usage | High in image-heavy apps | Optimized with auto cleanup | +| Platform Consistency | Inconsistent | Uniform across iOS, Android, Web | + +## Summary + +If your app involves displaying a lot of images—be it a media feed, marketplace, or messaging app—the Enhanced Image Component is a clear upgrade. It’s not just about faster load times, it’s about a better user experience, lower memory consumption, and reduced data usage. + +With the enhanced image component in WaveMaker, you can deliver a snappier, more reliable image experience, especially on lower-end devices or slower networks. \ No newline at end of file From 7696852528ec2cb037778a2854920cfae923523f Mon Sep 17 00:00:00 2001 From: RitupL Date: Tue, 6 May 2025 14:11:29 +0530 Subject: [PATCH 2/3] addressed comments --- .../2025-05-01-migrating-to-expo-image.md | 67 +++++++++++++++---- 1 file changed, 54 insertions(+), 13 deletions(-) diff --git a/website/blog/2025-05-01-migrating-to-expo-image.md b/website/blog/2025-05-01-migrating-to-expo-image.md index 84f753e53..07428c608 100644 --- a/website/blog/2025-05-01-migrating-to-expo-image.md +++ b/website/blog/2025-05-01-migrating-to-expo-image.md @@ -1,41 +1,56 @@ --- -title: "Migrating Image Component to Expo Image" +title: "Migrating Picture Component to Expo Image" author: "Ankur Jyoti Das" --- --- When building modern mobile apps, image handling plays a crucial role in user experience and performance. Whether it's a social feed, media gallery, or product listing—rendering images efficiently can make or break your app’s smoothness. -In this post, we’ll compare the Old Image Component (React Native's default Image) with the Enhanced Image Component (expo-image)—a high-performance image solution introduced by Expo. +In this post, we’ll compare and understand why Enhanced Picture Component over the Old Picture Component. +> **Old Picture Component**: The current image handling is based on React Native's built-in Picture component. +>**Enhanced Picture Component**: The enhanced Picture Component is based on Expo Image — a high-performance image solution introduced by Expo. + ## Why This Matters -The Old Image Component in React Native works well for simple use cases, but as your app scales, you’ll start noticing slow rendering, janky scrolling, and inconsistent caching. That’s where the enhanced image component steps in—with native-level performance, better caching, and memory efficiency. +The Old Picture component in React Native works well for simple use cases, but as your app scales, you’ll start noticing slow rendering, janky scrolling, and inconsistent caching. That’s where the enhanced Picture component steps in—with native-level performance, better caching, and memory efficiency. + +That's where the enhanced Picture component steps in. Below is the comparison of old and enhanced Picture component based w.r.t., + +- Caching +- Memory Usage +- Performance + ### Caching -**Old Image Component** +**Old Picture Component** - Offers minimal caching. - May result in repeated downloads, increasing data usage. -**Enhanced Image Component** +**Enhanced Picture Component** - Supports configurable caching strategies: memory, disk, memory-disk. -- Supports blurhash/thumbhash placeholders for low-res previews during loading. -Result: Up to 60% reduction in network requests thanks to smart disk caching. +- Supports blurhash/thumbhash placeholders for low-res previews during loading. + +:::impact + +Up to 60% reduction in network requests thanks to smart disk caching. + +::: ### Memory Usage -**Old Image Component** +**Old Picture Component** - Limited memory management. - May cause memory spikes or crashes in image-heavy apps. -**Enhanced Image Component** +**Enhanced Picture Component** - Proactive memory management with automatic cache purging. - Optimized for FlatList and virtualized lists. @@ -49,20 +64,26 @@ Result: Up to 60% reduction in network requests thanks to smart disk caching. ### Performance -**Old Image Component** +**Old Picture Component** - Relies heavily on the JavaScript thread for image decoding and rendering. - Causes UI lag when rendering many or large images. -**Enhanced Image Component** +**Enhanced Picture Component** - Offloads decoding to native modules like SDWebImage (iOS) and Glide (Android). - Enables smooth, consistent rendering even in image-heavy interfaces. -Key Metric: Apps using expo-image report 30–50% faster image rendering in lists and galleries, especially on mid-range Android devices. +:::impact + +Apps using expo-image report 30–50% faster image rendering in lists and galleries, especially on mid-range Android devices. +::: -## Quick Comparison + +## Old Picture Component vs New Picture Component + +To understand better, you can find the quick comparison between Old and New Picture component below. | Feature | Old Component | New Component | | ----- | ---- | --- | @@ -71,6 +92,26 @@ Key Metric: Apps using expo-image report 30–50% faster image rendering in list | Memory Usage | High in image-heavy apps | Optimized with auto cleanup | | Platform Consistency | Inconsistent | Uniform across iOS, Android, Web | +
+