React Native 0.85: What's New with Animation and Testing

By • min read

React Native 0.85 brings significant improvements, most notably a brand-new animation engine and changes to the Jest testing setup. This release also enhances developer tooling and introduces Metro TLS support. Below we answer the most pressing questions about what these updates mean for your projects.

What is the new animation backend in React Native 0.85?

The new Shared Animation Backend is an internal engine developed in collaboration with Software Mansion. It powers how animations are applied under the hood for both the existing Animated API and the reanimated library. By centralizing the animation update logic within React Native core, this backend allows Reanimated to deliver performance improvements previously impossible. It also ensures that the update reconciliation process is thoroughly tested and remains stable across future React Native updates. For developers using the Animated API, a key benefit is that you can now animate layout props like width, height, and positioning with the native driver—something that was limited before. This unblocks more performant animations for Flexbox and position properties without falling back to the JavaScript thread.

React Native 0.85: What's New with Animation and Testing

How do I opt into the new animation backend, and where can I find examples?

To try the new backend, you need to enable the experimental channel of React Native. Instructions are available on the React Native docs page. Note that this feature only becomes available starting with React Native 0.85.1, which will be released shortly after 0.85.0. You can explore code examples by looking inside react-native/packages/rn-tester/js/examples/AnimationBackend/ in the repository. These examples demonstrate how to animate layout properties like flex and position using the native driver. Once you opt in, you'll be able to use useNativeDriver: true with Animated.timing for these props, significantly improving animation performance.

Can I now animate layout props with the native driver in React Native 0.85?

Yes! With the new animation backend, the previous limitation that prevented native-driven animations on layout properties like width, height, and flex is lifted. Here's a quick example:

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 smoothly animates the width from 100 to 300 without touching the JavaScript thread, giving you 60fps performance.

What changes were made to the Jest preset in React Native 0.85?

The Jest preset has been moved from its previous location within the React Native package to a dedicated, standalone package. This is a breaking change. If you were using @react-native/jest-preset implicitly, you now need to explicitly install and reference the new package. The standalone package is designed to decouple Jest configuration from the core React Native updates, making it easier to maintain and version independently. To migrate, update your jest.config.js or package.json to point to the new preset package. This change also allows better flexibility when using custom test runners or environments.

What improvements came to React Native DevTools in this release?

React Native DevTools received several key enhancements:

These improvements make debugging more seamless, especially when using multiple tools simultaneously.

How does Metro TLS support work in React Native 0.85?

The Metro dev server now accepts a TLS configuration object, enabling HTTPS (and WSS for Fast Refresh) during local development. This is crucial for testing features that require secure contexts, such as service workers or secure WebSocket connections. To enable TLS, you pass a TLS configuration (e.g., certificate and key) to the Metro server options. This change does not affect production builds—it only applies to the development server. It allows developers to simulate a secure environment without needing a separate proxy or HTTPS setup, making it easier to catch issues related to mixed content or security policies early in the development process.

What other breaking changes should developers be aware of?

Besides the Jest preset relocation, there are a few other breaking changes:

Always test your application thoroughly after upgrading to ensure compatibility.

Recommended

Discover More

Navigating Fedora Community Governance: Lessons from the AI Developer Desktop InitiativeBridging the Digital Divide: 8 Key Insights into IEEE’s Connecting the Unconnected ProgramSafari Technology Preview 240: Key Updates and Bug FixesCanvas Cyberattack Disrupts Final Exams: A Deep Dive into the IncidentPCIe 8.0 Draft Unveiled: 1 TB/s, 0.5V Signaling, and Next-Gen Connectors