6629
Environment & Energy

React Native 0.85: Your Top Questions Answered

Posted by u/Buconos · 2026-05-03 15:35:23

React Native 0.85 has arrived, packed with a reworked animation engine, refined developer tools, and necessary breaking changes. This update marks a big leap forward for both performance and cross-platform consistency. Below, we tackle the most pressing questions about this release, from the new shared animation backend to the shifting of the Jest preset. Whether you're upgrading an existing project or starting fresh, these answers will help you navigate the changes and leverage the new capabilities.

What is the new animation backend in React Native 0.85?

React Native 0.85 introduces the Shared Animation Backend, a joint effort with Software Mansion. This new internal engine powers how animations are applied under the hood for both the Animated API and the Reanimated library. By moving the core animation update logic directly into React Native's core, Reanimated can now achieve performance improvements that were previously impossible. Additionally, the reconciliation process for updates becomes more thoroughly tested and remains stable across future React Native versions. For developers using Animated, the biggest win is the ability to animate layout props (like width, height, and Flexbox properties) with the native driver — a limitation that has now been eliminated. This means smoother animations without the overhead of the JavaScript thread, bringing a more responsive user experience to both iOS and Android.

React Native 0.85: Your Top Questions Answered

How can I animate layout props with native driver now?

With the new animation backend, animating layout props using the native driver in Animated is straightforward. The key change is that you can now set useNativeDriver: true on animations that modify Flexbox or position properties. For example, you can expand a view's width from 100 to 300 over 500 milliseconds like this:

import { Animated, Button, View, useAnimatedValue } from 'react-native';

function MyComponent() {
  const width = useAnimatedValue(100);
  const toggle = () => {
    Animated.timing(width, {
      toValue: 300,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };
  return (
    <View style={{flex: 1}}>
      <Animated.View style={{width, height: 100, backgroundColor: 'blue'}} />
      <Button title="Expand" onPress={toggle} />
    </View>
  );
}

This code snippet directly applies the native animation to the width property. No more workarounds needed – just set useNativeDriver: true and enjoy the performance boost. You can find more examples in the react-native/packages/rn-tester/js/examples/AnimationBackend/ directory.

What improvements were made to React Native DevTools?

React Native DevTools gained three notable enhancements in version 0.85. First, multiple CDP connections are now supported simultaneously. This means you can have React Native DevTools, VS Code, and an AI agent all connected at once without one session interrupting another – enabling richer, composable tooling workflows. Second, on macOS, the desktop app now compiles for macOS 26 and includes system-level tab handling. Power users can merge all DevTools windows into a single tabbed interface via Window > Merge All Windows. Third, the request payload preview in the Network Panel has been restored on Android after a regression. You can now inspect the body of network requests again, making debugging network issues much easier. These improvements make the development experience smoother and more flexible, especially when working with multiple tools.

How does Metro TLS support work in this release?

Metro, the JavaScript bundler for React Native, now accepts a TLS configuration object. This enables you to serve the development server over HTTPS and support WSS (WebSocket Secure) for Fast Refresh during development. To set it up, you pass a TLS config to the Metro server, typically in your metro.config.js file. This is especially useful for teams that need to test features like secure WebSocket connections or serve the app over a secure context, which is often required for certain browser APIs. The implementation is straightforward: you provide a standard Node.js TLS options object with key and cert paths. Once configured, all traffic between the Metro server and your app runs over an encrypted channel, aligning development with production security standards.

Why was the Jest preset moved to a separate package?

In React Native 0.85, the Jest testing preset has been extracted into its own dedicated package. Previously, the preset was bundled within react-native itself. This change is part of a broader effort to decouple testing infrastructure from the core framework. By moving the preset to a separate package (likely named something like @react-native/jest-preset), the team can release updates to the testing configuration independently, without requiring a full React Native release. It also reduces the core bundle size for those who don't use Jest. To adopt the new preset, you'll need to update your jest.config.js or package.json to reference the new package instead of the old path. This is a breaking change, so make sure to adjust your configuration when upgrading to 0.85.

What other breaking changes should I be aware of?

Along with the Jest preset move, React Native 0.85 drops support for end-of-life Node.js versions (those no longer maintained by the Node.js foundation). You'll need Node.js 18 or later to run the React Native CLI and bundler. Additionally, StyleSheet.absoluteFillObject has been removed. To achieve the same absolute fill behavior, use StyleSheet.absoluteFill instead, or manually apply {position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}. There are also a few other minor breaking changes listed in the release notes – check the official changelog for the full list. These changes may require updates to existing code, so run your tests and check for deprecation warnings before deploying to production.

How can I opt into the new animation backend?

The new shared animation backend is currently available as an experimental feature. To enable it, you need to activate the experimental channel of React Native. The exact steps are described in the React Native documentation page on the experimental channel. Note that this feature will only be available starting with React Native 0.85.1, which is expected shortly after the 0.85.0 release. Once you are on 0.85.1, you can opt in by following the instructions for enabling experimental flags. The team recommends testing the new backend on non-critical projects first to ensure compatibility with your existing codebase. The performance benefits are significant, especially when animating layout props, so it's worth trying out. However, because it's experimental, expect potential API changes in future releases.