Getting Started with Latest Performance Optimization

Expo SDK 55: The Performance Revolution

Released in February 2026, Expo SDK 55 is more than a minor update—it's a major breakthrough for mobile app performance. The most significant change is that Hermes V1 is now the default JavaScript engine. This means all Expo apps automatically benefit from substantial performance improvements.

Compared to traditional JavaScript engines, Hermes V1 offers significantly faster execution and reduced memory consumption. This is particularly impactful on low-spec Android devices. Additionally, new features like Expo Observe, EAS build caching, and the upgraded react-native-screens enhance both development experience and app quality.

Hermes V1 Engine: Performance Gains and Implementation

Real Benefits of Hermes V1

Hermes V1 delivers major improvements across multiple dimensions:

Improvement	Effect
Execution Speed	15-25% faster than previous engines
Memory Usage	~30% reduction in initialization memory
App Startup	500ms to 1 second faster startup time
ES6 Support	Full support for async/await, const/let, and class syntax

Hermes V1 works by precompiling JavaScript to bytecode, minimizing runtime parsing overhead. This approach is especially powerful on resource-constrained Android devices.

Standard Configuration in Expo SDK 55

With Expo SDK 55, Hermes V1 is automatically enabled. Verify your Expo version:

expo --version
# Output example: 52.0.0 (SDK 55 compatible)

You can also explicitly configure Hermes in app.json:

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "usesCleartextTraffic": false,
            "enableHermes": true
          },
          "ios": {
            "deploymentTarget": "13.0"
          }
        }
      ]
    ]
  }
}

After enabling Hermes, APK size typically reduces by 2-3MB thanks to bytecode optimization.

EAS Build Caching: 3x Development Speed Increase

Time Savings with Caching

EAS build caching reuses previous build results when dependencies and configurations remain unchanged. The impact is dramatic:

Initial build: 10-15 minutes
With cache: 3-5 minutes (70% reduction)

For CI/CD pipelines with frequent builds, this translates to tens of hours saved monthly.

Configuration and Usage

EAS caching is available by default in EAS Build v2+. To maximize efficiency:

# eas.json configuration example
{
  "build": {
    "production": {
      "node": "20.10.0",
      "npm": "10.2.4",
      "cache": {
        "cacheDisabled": false,
        "customPaths": [
          ".next",
          "build",
          "dist"
        ]
      }
    }
  }
}

Use commands to leverage caching:

eas build --platform ios --cache
eas build --platform android --cache

Cache persists for 14 days, making it effective for rebuilds within that window.

Modal Improvements and react-native-screens 4.23.0

Why Modal Optimization Matters

Rork apps frequently use modals (bottom sheets, dialogs, navigation stacks). With react-native-screens 4.23.0, native screen lifecycle management improves dramatically:

Reduced jank during modal transitions
Eliminated memory leaks
Smooth animations

Implementation Example: Bottom Sheet

Here's a modern bottom sheet implementation using react-native-screens:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import BottomSheet from '@gorhom/bottom-sheet';
 
const Stack = createNativeStackNavigator();
 
export default function ModalScreen() {
  const [isOpen, setIsOpen] = React.useState(false);
  const snapPoints = React.useMemo(() => [200, 400], []);
 
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            presentation: 'modal',
            animationEnabled: true,
            cardStyle: { backgroundColor: 'transparent' },
          }}
        >
          <Stack.Group>
            <Stack.Screen name="Home" component={HomeScreen} />
          </Stack.Group>
          <Stack.Group
            screenOptions={{
              presentation: 'transparentModal',
              cardOverlayEnabled: true,
              cardStyle: { backgroundColor: 'rgba(0,0,0,0.5)' },
            }}
          >
            <Stack.Screen name="Modal" component={ModalContent} />
          </Stack.Group>
        </Stack.Navigator>
      </NavigationContainer>
      
      {isOpen && (
        <BottomSheet snapPoints={snapPoints} onClose={() => setIsOpen(false)}>
          <View style={{ flex: 1, padding: 16 }}>
            <Text>Bottom sheet content</Text>
          </View>
        </BottomSheet>
      )}
    </GestureHandlerRootView>
  );
}

With version 4.23.0, modal stack memory management is automated, preventing leaks even with multiple nested modals.

Expo Observe: Production Performance Monitoring

What is Expo Observe?

Expo Observe (in private preview) monitors real-world app performance through a real-time dashboard, collecting:

Frame rate (FPS)
Memory usage trends
CPU and battery consumption
Network request latency
Custom metrics

Enabling and Configuring Expo Observe

Initialize Expo Observe by registering your project with EAS Account:

eas update:configure
expo prebuild --clean

Then initialize the SDK in your app code:

import { useExpoObserve } from 'expo-observe';
 
export default function App() {
  React.useEffect(() => {
    // Start performance monitoring
    const observer = useExpoObserve();
    
    // Record custom metrics
    observer.recordMetric('user_action_duration', 1250);
    observer.recordMetric('api_response_time', 350);
    
    return () => observer.cleanup();
  }, []);
 
  return <MainApp />;
}

Data uploads to the EAS Dashboard, allowing you to track performance trends over any time period.

Android Blur Optimization: RenderNode API Adoption

Background Blur Processing Evolution

For glassmorphism effects in Rork apps, Expo SDK 55 now leverages the RenderNode API on Android 12+, eliminating complex framebuffer operations and enabling GPU optimization.

Performance improvement:

Environment	Processing Time	Memory
Previous Approach	16ms/frame	4.5MB
RenderNode API	4ms/frame	1.2MB

Implementation Example

Using expo-blur with the latest approach:

import { BlurView } from 'expo-blur';
import { View, Text, StyleSheet } from 'react-native';
 
export default function BlurExample() {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/bg.jpg' }}
        style={styles.backgroundImage}
      />
      
      <BlurView intensity={90} style={styles.blurContainer}>
        <View style={styles.content}>
          <Text style={styles.title}>Modal Content</Text>
          <Text>Fast rendering for smooth UI</Text>
        </View>
      </BlurView>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backgroundImage: {
    position: 'absolute',
    width: '100%',
    height: '100%',
  },
  blurContainer: {
    width: '85%',
    height: '60%',
    borderRadius: 16,
    overflow: 'hidden',
  },
  content: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 8,
  },
});

Backward compatibility is maintained on Android 12 and below with traditional rendering.

Best Practices: Unified Optimization Strategy

Multi-Layer Optimization Architecture

Here's how to leverage all Expo SDK 55 features together:

Build Layer: EAS caching accelerates development cycles
Runtime Layer: Hermes V1 improves execution performance
UI Layer: Modal and blur optimization reduces jank
Monitoring Layer: Expo Observe tracks production performance

Implementation checklist:

// Complete app.json configuration
{
  "expo": {
    "name": "MyRorkApp",
    "version": "1.0.0",
    "sdkVersion": "55",
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "enableHermes": true,
            "buildToolsVersion": "34.0.0"
          },
          "ios": {
            "deploymentTarget": "13.0"
          }
        }
      ]
    ],
    "experiments": {
      "isModulesFunctionsEnabled": true
    }
  }
}

Looking back

Expo SDK 55 integrates Hermes V1, EAS build caching, react-native-screens 4.23.0, android-blur optimization, and Expo Observe into a comprehensive performance platform. Development speed and production quality can now coexist, making SDK 55 essential for medium to large Rork app projects.

Implementing the multi-layer optimization strategy progressively will substantially improve your users' experience.

Getting Started with Latest Performance Optimization Techniques in Expo SDK 55