How to Upgrade to React Native 0.85 and Leverage the New Animation Backend

By ● min read

Introduction

React Native 0.85 brings a major overhaul to animation performance with a shared animation backend, along with key improvements to developer tooling and security. This guide walks you through upgrading your project, enabling the new animation backend, animating layout props with native driver, migrating the Jest preset, and optionally configuring Metro TLS. By following these steps, you'll harness the latest features while avoiding common pitfalls.

What You Need

• An existing React Native project (or a new one)
• Node.js version that is not end-of-life (v16 or later recommended; see Step 1 for details)
• React Native CLI or Expo (if using Expo, wait for SDK support)
• Basic familiarity with React Native development
• Optional: Metro bundler for TLS configuration

Step 1: Upgrade Your Project to React Native 0.85

Before you can enjoy the new features, you must upgrade your project to version 0.85. Use the React Native Upgrade Helper or run the following commands:

1. Check Node.js version: Ensure you are using a supported version (Node 16+). Version 0.85 drops support for End-of-Life Node.js versions (13, 15, etc.).
2. Upgrade the React Native package: Run npx react-native upgrade 0.85.0 (or replace with the latest 0.85.x patch).
3. Handle breaking changes:
   • Jest Preset Moved: The Jest preset is now a separate package @react-native/jest-preset. Remove the old preset reference from jest.config.js and install: npm install --save-dev @react-native/jest-preset. Update your config to require '@react-native/jest-preset'.
   • StyleSheet.absoluteFillObject Removed: Use StyleSheet.absoluteFill (the object) instead of absoluteFillObject.
   • Other changes: Review the full changelog for any deprecations in third-party libraries.
4. Test your app: Run npx react-native run-ios and run-android to verify the upgrade.

Step 2: Enable the New Animation Backend (Experimental)

The new shared animation backend is experimental in 0.85.1 (released shortly after 0.85.0). To opt in:

1. Ensure you are on 0.85.1 or later. Check your version: react-native -v.
2. Enable the experimental channel: Follow the instructions at React Native Experimental Animation Backend. Typically, this involves setting a flag or using a specific metro config.
3. Verify activation: Build and run your app. If animations work, the backend is active.

Step 3: Animate Layout Props with Native Driver

With the new backend, you can now animate Flexbox and position props (like width, height, margin, padding) using the native driver. Previously, these required JavaScript driver. Here's how:

1. Use Animated and useAnimatedValue: Import useAnimatedValue from React Native.
2. Create an animated value: const width = useAnimatedValue(100);
3. Animate with native driver: In your animation call, set useNativeDriver: true. For example:

   Animated.timing(width, {
     toValue: 300,
     duration: 500,
     useNativeDriver: true,
   }).start();

4. Apply to an Animated.View: Use the animated value in style: .
5. Test on both platforms: Run on iOS and Android to ensure smooth native-driven layout animation.

Step 4: Migrate to the New Jest Preset Package

The Jest preset is no longer part of the main React Native package. To continue using Jest with your project:

1. Install the dedicated package: npm install --save-dev @react-native/jest-preset.
2. Update your Jest configuration: In jest.config.js, replace preset: 'react-native' with preset: '@react-native/jest-preset'.
3. Remove the old preset dependency: If you had react-native/jest-preset installed as a separate dependency, remove it.
4. Run tests: npm test to confirm everything works.

Step 5: (Optional) Configure Metro TLS for Secure Development

Metro now accepts a TLS configuration to enable HTTPS/WSS during development. This is useful for testing secure features locally.

1. Create or modify metro.config.js: Add a tls property to the config:

module.exports = {
  tls: {
    cert: './path/to/cert.pem',
    key: './path/to/key.pem',
  },
};

2. Place certificates: Obtain or generate valid TLS certificates.
3. Start Metro with HTTPS: Run npx react-native start --port 8081 --ssl or your custom script.
4. Update your app: Ensure your app connects to https://localhost:8081 for the dev server.

Step 6: Take Advantage of DevTools Improvements

React Native 0.85 enhances DevTools with multiple CDP connections and native macOS tabs.

• Multiple CDP connections: Now you can connect DevTools, VS Code, and AI agents simultaneously. No more session conflicts.
• Request payload previews on Android: Network panel now shows request bodies again.
• Native tabs on macOS: If you have multiple DevTools windows, use Window > Merge All Windows to group them into tabs.

To use these features, simply open DevTools as usual (Ctrl+Shift+D or from the developer menu). No extra configuration needed.

Tips for a Smooth Upgrade

• Back up your project before starting the upgrade.
• Test all animations after enabling the new backend; some third-party animation libraries may need updates.
• Jest preset migration: If you have custom jest mock files that rely on the old preset path, update them to use the new package.
• Node.js version: Use Node 18 or 20 for best compatibility.
• Metro TLS: Only configure if you need HTTPS locally – it's not required for most development.
• Check the changelog for any other breaking changes that may affect your project.