React Native 0.85: Key Updates and Developer FAQ

React Native 0.85 introduces several significant changes that developers need to know about. This release brings a new animation backend, moves the Jest preset to a dedicated package, improves DevTools, adds TLS support for Metro, and includes breaking changes like dropped Node.js support and removal of StyleSheet.absoluteFillObject. Below, we answer the most common questions about this update.

What is the New Animation Backend in React Native 0.85?

React Native 0.85 introduces the Shared Animation Backend, developed in partnership with Software Mansion. This is a new internal engine that powers how animations are applied under the hood for both Animated and Reanimated. Previously, the animation update logic was handled separately by each library. Now, that logic has been moved into React Native core. This centralization allows Reanimated to achieve performance improvements that were not possible before, and ensures the update reconciliation process is thoroughly tested and stable across future React Native updates. The new backend also enables a long-awaited feature: animating layout props (like flexbox and position) with the native driver in Animated. To try it, you need to enable the experimental channel starting from React Native 0.85.1.

React Native 0.85: Key Updates and Developer FAQ

How does the new animation backend improve performance?

By moving the main animation update logic to React Native core, the new backend eliminates duplication and streamlines the reconciliation process. This allows Reanimated to tap into the core's optimized infrastructure, resulting in smoother animations and reduced overhead. The performance gains are most noticeable in complex animation sequences or when multiple animations run simultaneously. Additionally, because the core team now maintains the shared engine, future updates to React Native will maintain backward compatibility with Reanimated without breaking changes. Developers can expect fewer frame drops and more predictable behavior, especially on lower-end devices. The collaboration with Software Mansion ensures that the implementation aligns with the needs of the animation community while staying tightly integrated with the framework.

How can I animate layout props with native driver now?

Previously, the useNativeDriver: true option in Animated could not be used for layout properties like width, height, margin, or flex. With the new animation backend in 0.85, this limitation is removed. You can now animate flexbox and position props directly with the native driver. Here is a simple example using useAnimatedValue:

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 enables highly performant animations driven by the native UI thread, avoiding JavaScript thread bottlenecks. More examples can be found in react-native/packages/rn-tester/js/examples/AnimationBackend/.

Why was the Jest preset moved to a new package?

In React Native 0.85, the Jest preset has been extracted from the main react-native package into a dedicated package: @react-native/jest-preset. This is a breaking change intended to reduce the core package's dependency footprint and to allow the preset to evolve independently. Developers who use Jest for testing must update their configuration to import from the new package. Specifically, replace preset: 'react-native' with preset: '@react-native/jest-preset' in your Jest configuration file. The move also aligns with modern package modularity practices, making it easier to maintain and version the preset separately from React Native's core releases. For most projects, the update is straightforward, but it is important to apply it to avoid test failures after upgrading to 0.85.

What are the major breaking changes in this release?

React Native 0.85 introduces several breaking changes:

These changes aim to modernize the framework, improve performance, and reduce maintenance overhead. Make sure to test your app thoroughly after upgrading.

What improvements were made to React Native DevTools?

React Native DevTools have received several notable upgrades in 0.85:

These improvements make the development experience more seamless and flexible.

How does Metro TLS support work and why is it important?

React Native 0.85 allows the Metro dev server to accept a TLS configuration object, enabling HTTPS (and secure WebSocket for Fast Refresh) during local development. To enable it, you pass a tls option in your Metro config with key/certificate files. This is important for teams that require encrypted connections during development, especially when testing features like service workers, secure cookies, or mixed content. It also aligns with modern security practices and simplifies debugging HTTPS-related issues. The feature does not affect production builds—it's purely for the development server. Enabling TLS is optional; if you don't configure it, Metro continues to use HTTP as before.

Tags:

Recommended

Discover More

Securing Your Remote Desktop Connection: A Step-by-Step Guide for Windows UsersHow to Decide If the Lenovo Legion Tab (5th-gen) Is Worth Your Investment5 Essential Insights on Evolving Beyond Bots vs. Humans DetectionNASA Appoints Brian Hughes to Lead Launch Operations Across SpaceportsLayerZero Concedes Fault in $292M Kelp DAO Bridge Hack – Sole Validator Setup Blamed