DEV Community: Nader Alfakesh

I rebuilt my 2021 React Native image gallery in 2026 — every library I used is dead

Nader Alfakesh — Tue, 21 Jul 2026 12:19:54 +0000

Five years ago I wrote a tutorial about handling images in React Native — loading, caching, viewing, and pinch-to-zoom. I recently went back to it, and it aged the way milk ages. Not because the advice was wrong at the time, but because every single library I built on is now dead.

So instead of updating the old post, I archived it and rebuilt the whole demo from scratch, the way I would write it in 2026. This is the story of what died, what replaced it, and the one part that's still genuinely worth building yourself.

What the 2021 version was

The original demo was a small gallery app: a reusable image component with a loading spinner, avatar and card variants built on top of it, and a full-screen viewer with pinch-to-zoom. The stack: bare React Native 0.64, react-native-fast-image for caching, react-native-image-pan-zoom for the viewer, and an Ignite boilerplate around it.

The autopsy

2021	2026
Bare RN 0.64 + boilerplate	Expo SDK 57, expo-router, React Compiler
`react-native-fast-image` + hand-rolled spinner	`expo-image` (caching, placeholder, transition)
`react-native-image-pan-zoom` (abandoned)	Custom viewer: Reanimated 4 + Gesture Handler 2
Manual image measuring for the zoom library	Gestures own the transform — no measuring
`TouchableOpacity`, `Dimensions.get`	`Pressable`, `useWindowDimensions`
`apisauce` + API layer classes	`fetch` + `AbortController`

react-native-fast-image hasn't seen a release since 2021 and doesn't play well with the New Architecture, which is now the default. react-native-image-pan-zoom was abandoned even earlier — it predates modern Reanimated. And the upgrade path from RN 0.64 crosses so many breaking changes (New Architecture, the death of unimodules, React 17 → 19) that upgrading in place would have been slower than starting fresh. If your project is five years old, rebuild beats upgrade.

Part 1: the image component became boring — and that's the lesson

In 2021, a "good" image component was real work: wrap FastImage, track loading state, render an ActivityIndicator, expose props for all of it. Today the equivalent is embarrassingly small:

const AppImage = ({ url, containerStyle, placeholderColor, onPress, style, ...rest }: Props) => {
  return (
    <Pressable style={[styles.base, containerStyle]} onPress={onPress} disabled={!onPress}>
      <Image
        style={[styles.base, !!placeholderColor && { backgroundColor: placeholderColor }, style]}
        source={{ uri: url }}
        contentFit="cover"
        transition={200}
        cachePolicy="memory-disk"
        {...rest}
      />
    </Pressable>
  );
};

expo-image ships everything my old component existed to add: memory + disk caching, placeholders, fade-in transitions, priorities, and recyclingKey for list performance.

One trick I like: the Pexels API returns an avg_color for every photo. Feed it into that placeholderColor prop and every image loads over a background that already matches it — a poor man's blurhash for free:

const mapPhoto = (image: PexelsPhotoResource): Photo => ({
  id: String(image.id),
  url: image.src.medium,
  urlLarge: image.src.portrait,
  title: image.photographer,
  avgColor: image.avg_color,
});

The takeaway stings a little: most of my 2021 article was me wrapping features the platform was about to absorb. Don't build infrastructure around a gap the ecosystem is actively closing.

Part 2: the viewer is still worth building — and now you can actually own it

The full-screen viewer is the part that got more interesting. In 2021 I delegated everything to a library and had to manually measure the image to feed it. In 2026, Gesture Handler 2 + Reanimated 4 make it reasonable to own the whole thing in a couple hundred lines, running entirely on the UI thread.

The core is three gestures. Pinch, zooming around the focal point so the pixels under your fingers stay put:

const pinch = Gesture.Pinch()
  .onStart(() => {
    savedScale.set(scale.get());
    savedTranslateX.set(translateX.get());
    savedTranslateY.set(translateY.get());
    // A second finger means the user is zooming, not dismissing.
    dismissY.set(withTiming(0, { duration: 100 }));
  })
  .onUpdate((event) => {
    // Follow the fingers below rest scale too — clamping at 1 makes the
    // gesture feel dead the moment you reverse direction mid-pinch.
    const nextScale = clamp(savedScale.get() * event.scale, PINCH_MIN_SCALE, MAX_SCALE);
    scale.set(nextScale);

    // Keep the point under the user's fingers fixed while scaling:
    // t' = f - (f - t0) * (s / s0), with f measured from the screen center.
    const focalX = event.focalX - width / 2;
    const focalY = event.focalY - height / 2;
    const ratio = nextScale / savedScale.get();
    translateX.set(focalX - (focalX - savedTranslateX.get()) * ratio);
    translateY.set(focalY - (focalY - savedTranslateY.get()) * ratio);
  });

Pan does double duty: when zoomed in it moves the image (clamped so you never pan into empty space), and at rest a vertical drag becomes swipe-down-to-dismiss with the backdrop fading out — the pattern every photo app has trained users to expect:

const pan = Gesture.Pan()
  .maxPointers(1)
  .onChange((event) => {
    if (scale.get() > MIN_SCALE) {
      translateX.set(translateX.get() + event.changeX);
      translateY.set(translateY.get() + event.changeY);
    } else {
      dismissY.set(event.translationY);
    }
  })
  .onEnd((_event, success) => {
    if (scale.get() > MIN_SCALE) {
      const s = scale.get();
      translateX.set(withSpring(clampToBounds(translateX.get(), width, s)));
      translateY.set(withSpring(clampToBounds(translateY.get(), height, s)));
    } else if (success && Math.abs(dismissY.get()) > DISMISS_THRESHOLD) {
      runOnJS(onClose)();
    } else {
      dismissY.set(withSpring(0));
    }
  });

Add a double-tap that zooms toward the tap point and a two-finger rotation that slots in the same way, compose them, and that's the whole viewer:

const gesture = Gesture.Race(doubleTap, Gesture.Simultaneous(pinch, rotate, pan));

The part that made me smile: my 2021 code had a whole calculateImageSize function to measure the image for the zoom library. The new viewer doesn't measure anything. contentFit="contain" handles the layout and the gestures own the transform.

Two modern details worth knowing:

React Compiler is on by default in new Expo projects, and it can't track sharedValue.value property access — use .get() and .set() instead. Every snippet above does.
Everything runs as worklets on the UI thread. The JS thread can be busy parsing a response and the pinch stays at 60fps.

Small things that quietly got better

Pressable replaced TouchableOpacity, useWindowDimensions replaced Dimensions.get (it actually updates on rotation).
Flexbox gap in list contentContainerStyle replaced the old style={index && styles.item} margin hack.
Plain fetch + AbortController replaced my apisauce layer — and cancelling in-flight requests on unmount is now three lines.
EXPO_PUBLIC_* env vars replaced the git-ignored env.js file. The demo also falls back to Lorem Picsum when there's no API key, so npm install && npx expo start just works.

What five years taught me about dependencies

Looking at which parts of the 2021 stack survived, the pattern is clear:

Platform-adjacent libraries survived and absorbed everything — Expo, Reanimated, Gesture Handler. Backed by teams, aligned with where the platform was going.
Single-purpose UI wrappers died — fast-image, image-pan-zoom. Maintained by individuals, built to patch gaps the platform eventually closed.

So my rule now: take the platform-adjacent dependency, and for the part that is your feature — in this case, the gesture feel of the viewer — own the code. It's less code than you think, and it's the part worth writing an article about five years from now.

The full project is on GitHub — components, the viewer, and the demo app:

naderalfakesh / image-toolset-modern

Modern React Native image handling — expo-image, gesture-driven viewer with Reanimated 4, Expo SDK 57. Rebuild of my 2021 demo.

Image Toolset — Modern

📝 Read the article: I rebuilt my 2021 React Native image gallery in 2026 — every library I used is dead

A modern rebuild of ImageToolSet, the demo project behind my 2021 dev.to article about handling images in React Native. Five years later most of that article's stack is gone, so this repo rebuilds the same component set the way you would write it today.

What changed since 2021

2021	Now
Bare RN 0.64 + Ignite boilerplate	Expo SDK 57, expo-router, React Compiler
`react-native-fast-image` + hand-rolled spinner	`expo-image` (caching, placeholder, transition)
`react-native-image-pan-zoom` (abandoned)	Custom viewer: Reanimated 4 + Gesture Handler 2
Manual image size measuring for the zoom library	Gestures own the transform — no measuring
`TouchableOpacity`, `Dimensions.get`	`Pressable`, `useWindowDimensions`
`apisauce` + class-era API layer	`fetch` + `AbortController`
API key in a git-ignored `env.js`	`EXPO_PUBLIC_PEXELS_API_KEY` in `.env`

Screenshots

Home	Viewer	Pinch & double-tap

…

View on GitHub

P.S. The repo keeps moving — since publishing it also gained full-card press feedback, pinch zoom-out overshoot, two-finger rotation, and a shared transition that morphs the tapped thumbnail into the viewer. The snippets above remain the core; the repo always has the current code.

The 2021 repo is archived for the curious, with a pointer to the new one. Some code is better left as a time capsule.

Understanding Hermes, Fabric, and the New Architecture in React Native

Nader Alfakesh — Sun, 16 Nov 2025 20:36:51 +0000

🚀 Understanding Hermes, Fabric, and the New Architecture in React Native

If you've been building React Native apps for a while, chances are you've heard terms like Hermes, TurboModules, and Fabric floating around. When I recently upgraded from an older React Native project to v0.80.2, I realized these weren't just buzzwords—they're a fundamental shift in how React Native works under the hood.

This guide will demystify these technologies and show you why they matter for your next React Native project.

📋 Table of Contents

The Evolution of React Native
Hermes: The JavaScript Engine Built for Mobile
The New Architecture: Beyond the Bridge
TurboModules: Native Modules, Supercharged
Fabric: Modern UI for Modern React
Migration Guide
Performance Comparisons
Conclusion

🎯 The Evolution of React Native

Before diving into the new technologies, let's understand the journey:

📅 Timeline
2015: React Native Launch → JavaScript Bridge Architecture
2017: Hermes Development Begins → Focus on Mobile Performance
2018: New Architecture Announced → JSI Introduction
2022: New Architecture Stable → Fabric & TurboModules
2024: Default in New Projects → Mature Ecosystem

🧠 Hermes: The JavaScript Engine Built for Mobile

React Native originally relied on JavaScriptCore (JSC), but Hermes was introduced as a mobile-first JS engine optimized specifically for React Native apps.

Key Benefits:

🚀 Faster Startup Time

// Traditional JSC Flow
Source Code → Parse → Compile → Execute

// Hermes Flow
Source Code → Precompile to Bytecode → Execute

💾 Lower Memory Usage

Perfect for low-end Android devices. Here's a real-world comparison:

Memory Usage Comparison (50MB App):
JSC:    ~185MB RAM
Hermes: ~136MB RAM (-26%)

🔄 Smaller Bundle Size

Bundle Size Impact:
Before Hermes: 41MB APK
After Hermes:  29MB APK (-29%)

💡 Enabling Hermes in Your Project

Most new React Native projects now enable Hermes by default. Here's how to check:

Android (android/app/build.gradle):

android {
    ...
    packagingOptions {
        pickFirst '**/libc++_shared.so'
        pickFirst '**/libjsc.so'
    }
}

// Hermes is enabled by this flag
hermesEnabled = true

iOS (ios/Podfile):

use_react_native!(
  :path => config[:reactNativePath],
  # Hermes is now enabled by default
  :hermes_enabled => true,
  :fabric_enabled => flags[:fabric_enabled],
)

⚡ The New Architecture: Beyond the Bridge

The classic React Native model relied on a Bridge for JS-to-Native communication:

Old Bridge Architecture:

┌─────────────┐     JSON      ┌──────────────┐
│ JavaScript  │ ←----------→  │    Native    │
│   Thread    │   Serialize   │   Thread     │
└─────────────┘               └──────────────┘
       ↓                              ↓
   [Async Queue]                [Processing]
       ↓                              ↓
   [Batching]                    [Response]

New JSI Architecture:

┌─────────────┐               ┌──────────────┐
│ JavaScript  │ ←----------→  │    Native    │
│   Thread    │  Direct C++   │   Thread     │
└─────────────┘   Interface   └──────────────┘
       ↓                              ↓
   [Immediate]                  [Immediate]

Performance Impact:

// Old Bridge (Async)
NativeModules.Camera.takePicture((result) => {
  // Wait for bridge...
  console.log(result); // ~16-32ms delay
});

// New JSI (Sync when needed)
const result = Camera.takePictureSync();
console.log(result); // <1ms delay

🛠 TurboModules: Native Modules, Supercharged

TurboModules revolutionize how we interact with native code:

Key Features:

Lazy Loading: Modules load only when needed
Type Safety: Auto-generated TypeScript bindings
Synchronous Calls: When performance matters
Direct JSI Access: No serialization overhead

Creating a TurboModule:

1. Define the Native Module Interface:

// specs/NativeDeviceInfo.ts
import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  getBatteryLevel(): number;
  getDeviceId(): string;
  isTablet(): boolean;
}

export default TurboModuleRegistry.getEnforcing<Spec>('DeviceInfo');

2. Native Implementation (iOS):

// RNDeviceInfo.mm
#import "RNDeviceInfo.h"

@implementation RNDeviceInfo

RCT_EXPORT_MODULE(DeviceInfo)

- (NSNumber *)getBatteryLevel {
  UIDevice *device = [UIDevice currentDevice];
  device.batteryMonitoringEnabled = YES;
  return @(device.batteryLevel);
}

- (NSString *)getDeviceId {
  return [[[UIDevice currentDevice] identifierForVendor] UUIDString];
}

- (NSNumber *)isTablet {
  return @(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad);
}

@end

3. Usage in JavaScript:

import DeviceInfo from './specs/NativeDeviceInfo';

// Direct, synchronous calls!
const batteryLevel = DeviceInfo.getBatteryLevel();
const deviceId = DeviceInfo.getDeviceId();
const isTablet = DeviceInfo.isTablet();

console.log(`Battery: ${batteryLevel * 100}%`);
console.log(`Device ID: ${deviceId}`);
console.log(`Is Tablet: ${isTablet}`);

🎨 Fabric: Modern UI for Modern React

Fabric is React Native's new rendering system, built from the ground up to support modern React features:

Architecture Comparison:

Old Renderer:

React Components
      ↓
Shadow Thread (Layout)
      ↓
Bridge (JSON)
      ↓
Main Thread (UI)

Fabric Renderer:

React Components
      ↓
Fabric C++ Core
   ↙     ↘
iOS UI   Android UI
(Sync)    (Sync)

Key Improvements:

1. Concurrent Rendering Support

// Now works seamlessly with React 18 features
function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <ExpensiveComponent />
    </Suspense>
  );
}

2. Priority-based Rendering

// High priority updates (user input)
<TextInput onChangeText={setText} />

// Low priority updates (background data)
<LargeList data={backgroundData} />

3. Better Animations

// Fabric enables smoother 60fps animations
const animatedValue = useSharedValue(0);

const animatedStyle = useAnimatedStyle(() => ({
  transform: [{
    translateX: withSpring(animatedValue.value * 100)
  }]
}));

📊 Performance Comparisons

Real-world Metrics:

┌─────────────────┬──────────┬──────────┬─────────┐
│ Metric          │ Old Arch │ New Arch │ Change  │
├─────────────────┼──────────┼──────────┼─────────┤
│ App Start Time  │ 3.2s     │ 1.8s     │ -44%    │
│ List Scroll FPS │ 47 fps   │ 59 fps   │ +25%    │
│ Memory Usage    │ 185 MB   │ 136 MB   │ -26%    │
│ Bundle Size     │ 41 MB    │ 29 MB    │ -29%    │
└─────────────────┴──────────┴──────────┴─────────┘

Benchmark Code:

// Measure startup performance
const startTime = Date.now();

AppRegistry.registerComponent(appName, () => App);

// Log after first render
const FirstRenderTracker = () => {
  useEffect(() => {
    console.log(`First render: ${Date.now() - startTime}ms`);
  }, []);
  return null;
};

🎯 Best Practices

1. Gradual Migration

// Start with non-critical modules
const MyModule = Platform.select({
  ios: NativeModules.MyModuleOld,
  android: TurboModuleRegistry.get<Spec>('MyModule'),
});

2. Type Safety First

// Always define TypeScript specs
interface Spec extends TurboModule {
  readonly constantsToExport: {
    readonly apiUrl: string;
    readonly version: string;
  };
  methodWithCallback(callback: (result: string) => void): void;
}

3. Performance Testing

// Use React DevTools Profiler
import {Profiler} from 'react';

<Profiler id="MyComponent" onRender={(id, phase, duration) => {
  console.log(`${id} (${phase}) took ${duration}ms`);
}}>
  <MyComponent />
</Profiler>

🚀 Conclusion

The new React Native architecture isn't just an incremental update—it's a fundamental reimagining of how JavaScript and native code communicate. With:

Hermes providing faster startup and lower memory usage
JSI eliminating the bridge bottleneck
TurboModules offering type-safe, lazy-loaded native modules
Fabric bringing modern React features to mobile

...your React Native apps can now rival truly native performance while maintaining the developer experience we love.

React native dealing with images loading, viewing, zooming, and caching

Nader Alfakesh — Sun, 18 Jul 2021 22:42:12 +0000

Introduction

I started using react native at my work 9 months ago and it is amazing.
We are launching a new feature that involves users uploading pictures, then we show them in different ways according to the context.
I want to share my experience with dealing with images in react native.

Objective

I need a reusable base image component that takes care of the following:
- making sure that the image takes all the available space unless I pass fixed width height.
- Image loading state.
- Image caching for better speed third-party lifelong;
I need to make some reusable components that consume the image component I can use directly in my screen with my data;

Component list

Avatar
Card with image
Input field for image upload.
Image with caption
Full screen view with and zoom feature

This is a demo screen uses those components

Before writing this article I coded the demo with typescript and storybook then uploaded it to Github so you can check the code
Visit the Github repo

Image base component:

This is a very basic component that has a touch opacity container to contain the image and give us an onPress event. I replaced the react-native image component with the fast image from react-native-fast-image because it is providing very good caching which gives a better user experience.

import React, { useState } from "react"
import { ActivityIndicator, StyleSheet, TouchableOpacity } from "react-native"
import FastImage from "react-native-fast-image"

const Image = ({ containerStyle, url, onPress, onLoad, style, loaderSize, ...restProps }) => {
  const [loaded, setLoaded] = useState(false)
  const handleLoading = (event) => {
    setLoaded(true)
    onLoad && onLoad(event)
  }
  return (
    <TouchableOpacity style={[styles.base, containerStyle]} onPress={onPress} disabled={!onPress}>
      <FastImage
        style={[styles.base, style]}
        onLoad={handleLoading}
        source={{ uri: url }}
        {...restProps}
      />
      {!loaded && (
        <ActivityIndicator color={LOADER_COLOR} style={styles.loader} size={loaderSize} />
      )}
    </TouchableOpacity>
  )
}

export default Image

const BG_COLOR = "rgba(240, 242, 245, 1)"
const LOADER_COLOR = "rgba(55, 107, 251, 1)"

const styles = StyleSheet.create({
  base: {
    height: "100%",
    width: "100%",
  },
  loader: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: BG_COLOR,
  },
})

Notice that I am getting the loading state from the onLoad event and still passing the event if I need to use it in different scenario.

AVATAR

When I make an avatar component I would like to have multiple sizes and shapes.

import React from "react"
import { StyleSheet } from "react-native"
import Image from "../Image"

const LARGE_SIZE = 90
const MEDIUM_SIZE = 65
const SMALL_SIZE = 40

const Avatar = ({
  style,
  url,
  resizeMode = "cover",
  size = "medium",
  shape = "square",
  onPress,
}) => {
  return (
    <Image
      containerStyle={[sizeStyle[size], shapeStyle(shape, size), style]}
      url={url}
      resizeMode={resizeMode}
      onPress={onPress}
    />
  )
}

export default Avatar

const sizeStyle = StyleSheet.create({
  large: {
    height: LARGE_SIZE,
    width: LARGE_SIZE,
  },
  medium: {
    height: MEDIUM_SIZE,
    width: MEDIUM_SIZE,
  },
  small: {
    height: SMALL_SIZE,
    width: SMALL_SIZE,
  },
})

const shapeStyle = (shape, size) => {
  switch (shape) {
    case "circle":
      return { borderRadius: 0.5 * sizeStyle[size].height, overflow: "hidden" }
    case "round":
      return { borderRadius: 0.25 * sizeStyle[size].height, overflow: "hidden" }
    default:
      return { borderRadius: 0 }
  }
}

Nothing fancy here just notice that for getting a full circle you need the width and height to be equal and then you set the border radius to half of the height or width.

Card with image

Regardless of the layout of the end of the cart in most cases it has been a title and description

import React from "react"
import { StyleSheet, View, Text } from "react-native"
import Image from "../Image"

const ImageCard = ({ style, url, title, description }) => {
  return (
    <View style={[styles.base, style]}>
      <Image containerStyle={styles.image} url={url} resizeMode="cover" />
      <View style={styles.textContainer}>
        <Text style={styles.title} numberOfLines={1}>
          {title.toUpperCase()}
        </Text>
        <Text style={styles.description}>{description}</Text>
      </View>
    </View>
  )
}

export default ImageCard

const CARD_BG_COLOR = "rgba(240, 242, 245, 1)"
const TITLE_COLOR = "rgba(22, 42, 76, 0.9)"
const DESCRIPTION_COLOR = "rgba(22, 42, 76, 0.7)"

const styles = StyleSheet.create({
  base: {
    backgroundColor: CARD_BG_COLOR,
    borderRadius: 20,
    flexDirection: "row",
    height: 200,
    overflow: "hidden",
    width: "100%",
  },
  description: { color: DESCRIPTION_COLOR, fontSize: 14, lineHeight: 20 },
  image: { height: "100%", width: "35%" },
  textContainer: {
    flex: 1,
    paddingHorizontal: 12,
    paddingVertical: 20,
  },
  title: { color: TITLE_COLOR, fontSize: 16, lineHeight: 24 },
})

Input field for image upload:

I want to have an upload icon when the image is not selected yet and when the image is selected I want to show a thumbnail of that image and I want an integrated text field so I can give that image a name.

import React, { Fragment, useState } from "react"
import { StyleSheet, TouchableOpacity, TextInput, Image as RNIImage } from "react-native"
import Image from "../Image"

const uploadIcon = require("./Upload.png")
const { uri: uploadIconUrl } = RNIImage.resolveAssetSource(uploadIcon)

const InputField = ({ url, onPress }) => {
  const [name, setName] = useState("")
  const [focus, setFocus] = useState(false)

  return (
    <Fragment>
      <TouchableOpacity activeOpacity={0.7} style={styles.base} onPress={onPress}>
        {url ? (
          <Image url={url} resizeMode="cover" />
        ) : (
          // Don't use this, instead use an svg icon please.
          <Image containerStyle={styles.uploadIcon} url={uploadIconUrl} resizeMode="contain" />
        )}
      </TouchableOpacity>
      <TextInput
        style={[styles.input, focus && styles.focused]}
        placeholder={"File name..."}
        clearButtonMode="while-editing"
        value={name}
        onChangeText={setName}
        autoCorrect={false}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
      />
    </Fragment>
  )
}

export default InputField

const BG_COLOR = "rgba(240, 242, 245, 1)"
const BORDER_COLOR = "rgba(22, 42, 76, 0.7)"
const FOCUSED_COLOR = "rgba(55, 107, 251, 1)"
const ICON_SIZE = 32

const styles = StyleSheet.create({
  base: {
    alignItems: "center",
    backgroundColor: BG_COLOR,
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    height: 120,
    justifyContent: "center",
    overflow: "hidden",
    width: "100%",
  },
  focused: { borderBottomColor: FOCUSED_COLOR, borderBottomWidth: 3 },
  input: {
    backgroundColor: BG_COLOR,
    borderBottomColor: BORDER_COLOR,
    borderBottomWidth: 2,
    height: 32,
    paddingHorizontal: 5,
    width: "100%",
  },
  uploadIcon: { height: ICON_SIZE, width: ICON_SIZE },
})

Image with caption

We use this component for listing purposes so I want to list all the images with an overlay caption that can be a hashtag.

import React from "react"
import { StyleSheet, View, Text } from "react-native"
import Image from "../Image"

const ImageWithCaption = ({ style, url, caption, onPress }) => {
  return (
    <View style={[styles.base, style]}>
      <Image url={url} resizeMode="cover" onPress={onPress} />
      <View style={styles.caption}>
        <Text style={styles.captionText} numberOfLines={1} ellipsizeMode="clip">
          {"#" + caption.split(" ")[0].toUpperCase()}
        </Text>
      </View>
    </View>
  )
}

export default ImageWithCaption

const BORDER_COLOR = "rgba(46, 56, 47, 0.2)"
const CAPTION_BG_COLOR = "rgba(255, 255, 255, 0.6)"
const CAPTION_TEXT_COLOR = "rgba(46, 56, 47, 0.8)"

const styles = StyleSheet.create({
  base: {
    borderColor: BORDER_COLOR,
    borderRadius: 3,
    borderWidth: StyleSheet.hairlineWidth,
    height: 144,
    overflow: "hidden",
    width: 126,
  },
  caption: {
    backgroundColor: CAPTION_BG_COLOR,
    borderBottomRightRadius: 3,
    borderTopRightRadius: 3,
    bottom: 15,
    left: 0,
    paddingHorizontal: 12,
    paddingVertical: 4,
    position: "absolute",
  },
  captionText: {
    color: CAPTION_TEXT_COLOR,
    fontSize: 10,
    lineHeight: 12,
  },
})

Please just keep in mind to use SVG icons instead of the image I am using I was feeling lazy to set up icons support so I went with the easy path.
If you need to get the URI, width, or height of an image shipped with code locally (asset) you can use this Image.resolveAssetSource method.

Full screen view with and zoom feature

This is the most interesting and exciting component to work with even though I am using a third-party library to get the gesture of the pan zoom it's still very fun to have the image covering the whole screen and you can pinch-zooming in and out with your two fingers

import React, { useState } from "react"
import { Dimensions, Modal, StyleSheet, View, Text, StatusBar } from "react-native"
import ImageZoom from "react-native-image-pan-zoom"
import Image from "../Image"

const ImageViewer = ({ url, visible, title, onClose }) => {
  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
  const screenWidth = Dimensions.get("window").width
  const screenHeight = Dimensions.get("window").height

  const calculateImageSize = ({ nativeEvent }) => {
    let width = nativeEvent.width
    let height = nativeEvent.height

    // If image width is bigger than screen => zoom ratio will be image width
    if (width > screenWidth) {
      const widthPixel = screenWidth / width
      width *= widthPixel
      height *= widthPixel
    }

    // If image height is still bigger than screen => zoom ratio will be image height
    if (height > screenHeight) {
      const HeightPixel = screenHeight / height
      width *= HeightPixel
      height *= HeightPixel
    }

    setImageSize({ height, width })
  }

  return (
    <Modal visible={visible} onRequestClose={onClose} statusBarTranslucent animationType="slide">
      <StatusBar barStyle="light-content" />
      <View style={styles.header}>
        <Text style={styles.BackText} onPress={onClose}>
          {"< Back"}
        </Text>
        <Text numberOfLines={1} ellipsizeMode="middle" style={styles.headerText}>
          {title}
        </Text>
      </View>
      <ImageZoom
        style={styles.container}
        cropWidth={screenWidth}
        cropHeight={screenHeight}
        imageWidth={imageSize.width}
        imageHeight={imageSize.height}
        maxOverflow={0}
      >
        <Image url={url} resizeMode="contain" loaderSize="large" onLoad={calculateImageSize} />
      </ImageZoom>
    </Modal>
  )
}

export default ImageViewer

const BG_COLOR = "rgba(0, 0, 0, 1)"
const OVERLAY_COLOR = "rgba(0, 0, 0, 0.5)"
const TEXT_COLOR = "rgba(255, 255, 255, 1)"

const styles = StyleSheet.create({
  BackText: {
    color: TEXT_COLOR,
    fontSize: 16,
    fontWeight: "500",
    lineHeight: 24,
  },
  container: { backgroundColor: BG_COLOR },
  header: {
    alignItems: "flex-end",
    backgroundColor: OVERLAY_COLOR,
    flexDirection: "row",
    height: 70,
    justifyContent: "space-between",
    left: 0,
    paddingBottom: 8,
    paddingHorizontal: 20,
    position: "absolute",
    right: 0,
    top: 0,
    zIndex: 1,
  },
  headerText: {
    color: TEXT_COLOR,
    flex: 1,
    fontSize: 16,
    lineHeight: 24,
    paddingLeft: 12,
    paddingRight: 6,
  },
})

The important part here is the image size because we want it to be shown in a full-screen mode completely without losing the aspect ratio and the user can zoom in and out.

Get the actual width height of the image from the onLoad event.
While the width of the screen is smaller than height for mobile, start with checking if the image width is wider than the screen, then calculate the ratio that should be multiplied by and multiply both width and height.
After we already solved the width part we recheck the height if it is still bigger than the screen height we do the same of the previous step using height ratio this time.

Uploading files in react native

Nader Alfakesh — Tue, 29 Jun 2021 06:29:32 +0000

I've been working with react native for one year now, and I really love it.
Today was the first time I had to upload files to our back-end server.
Normally when I encounter something I don't know my first instinct is to search for it in the official documentations unfortunately I couldn't find anything helpful.

Without using third party library:

Prepare file as form data:

If you picked a file using document picker,image picker or camera and you pass it down as file object.

const data = new FormData();
  data.append('file', {
    name: file.name,
    type: file.type,
    uri: Platform.OS === 'ios' ? 
         file.uri.replace('file://', '')
         : file.uri,
  });

Notice that on ios you need to prefix file path with 'file://' to be able to access files.

Upload the file to the server as Post request with proper headers:

Using Axios :

await Axios.post("https://upload-service-url", data, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

Using fetch :

await fetch("https://upload-service-url", {
  method: "post",
  body: data,
  headers: {
    "Content-Type": "multipart/form-data; ",
  },
});

Using react-native-fs library:

Library repo
This nice library give you access to native files system so you can manipulate files and directories.

Why to use this library if I can do it without library?
I would say the main reason is to have the ability to show determinate progress indicator using the progress callback

import { uploadFiles, DocumentDirectoryPath } from "react-native-fs";

var files = [
  {
    name: "file",
    filename: "file.jpg",
    filepath: DocumentDirectoryPath + "/file.jpg",
    filetype: "image/jpeg",
  },
];

uploadFiles({
  toUrl: "https://upload-service-url",
  files: files,
  method: "POST",
  headers: {
    Accept: "application/json",
  },
  //invoked when the uploading starts.
  begin: () => {},
  // You can use this callback to show a progress indicator.
  progress: ({ totalBytesSent, totalBytesExpectedToSend }) => {},
});

Important note:

If you are using react native debugger to try inspecting network requests and you get errors from back-end service.
It is because currently the debugger does'nt suppot the formData as mentioned in there documentations under 'Limitations'
react-native-debugger