React Native 0.85: Key Updates and Migration Guide

From Xshell Ssh, the free encyclopedia of technology

React Native 0.85 has arrived with exciting enhancements, including a revamped animation engine, important deprecations, and better developer tooling. This article answers common questions about the new release, covering the new animation backend, Jest preset changes, Metro TLS support, DevTools improvements, and what you need to know about breaking changes. Whether you're upgrading an existing project or starting fresh, these insights will help you navigate the update smoothly.

What is the new animation backend in React Native 0.85 and why was it introduced?

React Native 0.85 introduces a Shared Animation Backend, developed in collaboration with Software Mansion. This new internal engine powers how animations are applied for both the Animated library and Reanimated. By moving the core animation update logic into React Native's core, Reanimated gains performance improvements that were previously impossible. The unified approach ensures that the update reconciliation process is thoroughly tested and remains stable with future React Native versions. With this backend, you can now animate layout props—such as Flexbox and position properties—using the native driver in Animated, a limitation that previously existed. To start using it, enable the experimental channel in React Native 0.85.1 (coming soon). The new backend makes animations smoother and more consistent across platforms.

React Native 0.85: Key Updates and Migration Guide

How do I animate layout props with the new backend?

With the new animation backend in React Native 0.85, animating layout props becomes straightforward. You can use the Animated API with the native driver on properties like width, height, margin, and top. For example, to animate a view's width from 100 to 300:

  • Import Animated, Button, View, and useAnimatedValue from React Native.
  • Initialize an animated value with useAnimatedValue(100).
  • Create a toggle function that calls Animated.timing with useNativeDriver: true.
  • Apply the animated value to the style of Animated.View.

This removes previous restrictions where the native driver couldn't handle layout properties. The change leads to fluid, high-performance animations without JS thread bottlenecks. More examples are available in the react-native/packages/rn-tester/js/examples/AnimationBackend/ directory.

What happened to the Jest preset in React Native 0.85?

In React Native 0.85, the Jest preset has been moved to a dedicated package. This is a breaking change that requires updating your project configuration. Previously, the preset was bundled within the react-native package; now you must install the separate @react-native/jest-preset package and adjust your Jest setup accordingly. The move allows for faster iteration and versioning of testing utilities independent of React Native core. To migrate, update your package.json or jest.config.js to reference the new preset. Check the official migration guide or release notes for exact steps. This change ensures better isolation and clearer dependency management for testing tools.

What are the key improvements in React Native DevTools for 0.85?

React Native 0.85 brings several notable enhancements to the developer tools:

  • Multiple CDP connections: The DevTools now support simultaneous Chrome DevTools Protocol connections. This means you can have React Native DevTools, VS Code, and AI agents connected at once without interfering with each other, enabling richer, composable workflows.
  • Native tabs on macOS: The desktop app has been updated to compile for macOS 26, and now offers system-level tab handling. Users can access this via Window > Merge All Windows when multiple DevTools windows are open.
  • Request payload previews restored: On Android, the Network Panel again shows request body previews after a previous regression was fixed.

These improvements streamline debugging and make the development experience more efficient and flexible.

How does Metro TLS support work in React Native 0.85?

React Native 0.85 adds TLS support to the Metro dev server. You can now provide a TLS configuration object to enable HTTPS during development. This also secures WebSocket connections used for Fast Refresh (WSS). Setting up TLS is essential for testing features that require secure contexts, such as Service Workers or certain browser APIs. To configure, add a tls option in your Metro configuration file (e.g., metro.config.js). This feature improves security and aligns development environments more closely with production setups.

What other breaking changes should I be aware of when upgrading to React Native 0.85?

Beyond the Jest preset move, React Native 0.85 includes a few other breaking changes:

  • Dropped support for EOL Node.js versions: Older, end-of-life Node.js releases are no longer supported. Ensure you're using a maintained version (v18 or later recommended).
  • StyleSheet.absoluteFillObject removed: This deprecated utility has been removed. Use StyleSheet.absoluteFill or manual positioning instead.
  • Other minor breaking changes: Check the full release notes for any API deprecations that may affect your codebase.

It's crucial to review your project for these changes during upgrade to avoid runtime errors. The React Native team provides migration guides to assist with the transition.