DEV Community: Nader Alfakesh

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