The React Native team has officially announced the release of React Native 0.85, a significant update that introduces a revamped animation backend, streamlines the testing ecosystem, and incorporates a host of other improvements and bug fixes. This release marks a pivotal moment for developers, promising enhanced performance, greater flexibility, and a more robust development experience. The centerpiece of this update is the introduction of a new, shared animation backend, a collaborative effort with Software Mansion, aimed at revolutionizing how animations are handled within the framework.
A Powerful New Animation Backend
At the heart of React Native 0.85 lies the groundbreaking Shared Animation Backend. Developed in partnership with Software Mansion, a prominent contributor to the React Native ecosystem, this new internal engine represents a fundamental shift in animation architecture. By centralizing the core animation update logic within React Native itself, this initiative unlocks unprecedented performance gains, particularly for libraries like Reanimated. Previously, certain performance optimizations were bottlenecked by the framework’s internal animation handling. The new backend resolves these limitations, ensuring that Reanimated can now leverage these advancements seamlessly.
This architectural overhaul also guarantees greater stability and predictability for animations. By integrating the animation logic directly into React Native core, the update reconciliation process for animations is now more thoroughly tested and is expected to remain robust even as React Native evolves with future updates. This proactive approach to stability will undoubtedly reduce debugging time and improve the overall reliability of animated user interfaces.
Furthermore, developers using the built-in Animated API will experience a significant boost in capabilities. A long-standing limitation, which prevented layout properties like flexbox and positioning from being animated with the native driver, has been lifted. This means developers can now animate a wider range of UI elements using the performance benefits of native-driven animations, opening up new possibilities for fluid and responsive user experiences.
To help developers explore these new animation capabilities, the React Native team has provided example implementations within the react-native/packages/rn-tester/js/examples/AnimationBackend/ directory on GitHub. To harness the power of this new backend, developers can opt into an experimental channel, as detailed in the official React Native release documentation. It is important to note that this experimental feature will be fully available starting with React Native 0.85.1, an immediate follow-up release, ensuring a smooth transition for early adopters.
Example: Animating Layout Props with Native Driver
The ability to animate layout properties with the native driver is a game-changer. Consider a scenario where a user needs to expand a view to reveal more content. Previously, animating the width or height of a View component using the native driver was not possible, leading to potential performance bottlenecks if the animation relied on the JavaScript thread. With React Native 0.85, this limitation is a thing of the past.
import Animated, Button, View, useAnimatedValue from 'react-native';
function MyComponent()
const width = useAnimatedValue(100); // Initial width
const toggle = () =>
Animated.timing(width,
toValue: 300, // Target width
duration: 500,
useNativeDriver: true, // Now possible for layout props!
).start();
;
return (
<View style= flex: 1 >
<Animated.View
style=
width, // Animated width
height: 100,
backgroundColor: 'blue',
/>
<Button title="Expand" onPress=toggle />
</View>
);
This concise code snippet demonstrates how easily developers can now animate the width property of an Animated.View component using useNativeDriver: true. This signifies a substantial leap forward in creating visually rich and performant applications without compromising on user experience.
Enhancements to React Native DevTools
The developer experience is further amplified by a series of significant improvements to the React Native DevTools. These enhancements aim to provide developers with more intuitive and powerful debugging and inspection capabilities. While specific details of every DevTools improvement were not itemized in the release notes, the inclusion of an image showcasing "DevTools native tabs on macOS" suggests a focus on improving the native integration and user interface of the development tools, potentially leading to a more streamlined workflow for Mac users. These improvements are crucial for efficiently identifying and resolving issues, thereby accelerating the development cycle.
Metro TLS Support for Secure Development
In an effort to bolster the security of the development process, React Native 0.85 introduces TLS support for the Metro dev server. This feature allows developers to configure HTTPS (and WSS for Fast Refresh) during development. This is particularly beneficial for applications that interact with APIs that enforce secure connections, ensuring that developers can accurately test these integrations without encountering certificate errors or security warnings.
The configuration is straightforward, involving the addition of a tls object to the server configuration in metro.config.js.
// metro.config.js
const fs = require('fs');
config.server.tls =
ca: fs.readFileSync('path/to/ca'),
cert: fs.readFileSync('path/to/cert'),
key: fs.readFileSync('path/to/key'),
;For developers looking for a simple way to generate self-signed certificates for local development, the mkcert tool is recommended. It provides a hassle-free method for creating locally trusted certificates, eliminating common browser warnings and simplifying secure development testing. This addition underscores the React Native team’s commitment to providing a secure and robust development environment.
Breaking Changes and Migration Considerations
As with any major software update, React Native 0.85 includes several breaking changes that developers must be aware of during the upgrade process. Proactive communication about these changes allows developers to plan their migrations effectively and minimize potential disruptions.
Jest Preset Relocation
A notable change is the extraction of the React Native Jest preset from the core react-native package into a dedicated package, @react-native/jest-preset. This move aims to reduce the size of the core package and provide greater flexibility for projects in managing their testing configurations. Developers will need to update their jest.config.js file to reflect this change:
// jest.config.js
- preset: 'react-native',
+ preset: '@react-native/jest-preset',This change is a positive step towards modularity, allowing developers to pin specific versions of testing tools independently of the React Native core.
Dropped Support for EOL Node.js Versions
React Native 0.85 has officially dropped support for End-of-Life (EOL) Node.js versions, specifically targeting releases prior to v20.19.4. This decision aligns React Native with modern Node.js development practices and ensures that the framework can leverage the latest features and performance optimizations available in supported Node.js versions. Developers planning to upgrade to 0.85 must ensure they are running a compatible version of Node.js to avoid compatibility issues.
Removal of StyleSheet.absoluteFillObject
The deprecated StyleSheet.absoluteFillObject API has been removed in this release. Developers are now encouraged to use the more explicit StyleSheet.absoluteFill or define their absolute positioning styles directly. This move promotes clearer and more maintainable code, as StyleSheet.absoluteFill is a more idiomatic way to achieve absolute positioning with fill properties.
// Example usage
- const styles = StyleSheet.absoluteFillObject;
+ const styles = StyleSheet.absoluteFill;This deprecation and removal are part of a broader effort to streamline the styling API and eliminate outdated patterns.
Other Breaking Changes
While the release notes did not detail every single breaking change, the announcement indicated that there were other minor adjustments across general, Android, and iOS platforms. Developers are strongly advised to consult the full changelog and utilize the React Native Upgrade Helper tool for a comprehensive understanding of all modifications required for a smooth transition.
Broader Impact and Future Implications
The release of React Native 0.85 signifies a commitment to continuous improvement and innovation within the cross-platform development space. The introduction of the new animation backend, in particular, has far-reaching implications. It not only enhances the performance and stability of animations but also sets a new standard for how animation libraries interact with the core framework. This could pave the way for even more sophisticated and performant animations in future React Native applications.
The streamlining of the Jest preset also points towards a trend of greater modularity and flexibility in the React Native ecosystem. By separating testing utilities into dedicated packages, the core framework becomes leaner, and developers gain more control over their development and testing environments.
The continued focus on DevTools improvements underscores the importance of a seamless developer experience. As applications become more complex, robust and intuitive debugging tools are indispensable. The introduction of TLS support for Metro further demonstrates the React Native team’s attention to the security aspects of development, a crucial consideration in today’s digital landscape.
Upgrading to React Native 0.85
React Native 0.85 is now the latest stable version, with previous versions like 0.82.x moving to an unsupported status. This progression aligns with the React Native release support policy, which aims to ensure that developers are working with actively maintained and secure versions of the framework.
For existing projects, the React Native Upgrade Helper tool remains the most effective resource for understanding and applying the necessary code changes between versions. This web-based tool provides a side-by-side comparison of code modifications, making the upgrade process as straightforward as possible. Developers can access it at https://react-native-community.github.io/upgrade-helper/.
For those looking to start new projects with the latest version, the command npx @react-native-community/cli@latest init MyProject --version latest will initialize a new project with React Native 0.85.
For users of the Expo managed workflow, the upcoming Expo SDK 56 will incorporate React Native 0.85, ensuring that Expo developers can also benefit from these advancements.
Acknowledgements and Community Contribution
The successful release of React Native 0.85 is a testament to the vibrant and dedicated React Native community. The release notes highlight over 604 commits from 58 contributors, underscoring the collaborative nature of open-source development. The React Native team extends its gratitude to all community members who contributed to this release, with special recognition for those who made significant contributions. Additionally, the team acknowledged authors who played a crucial role in documenting the new features for this release post, emphasizing the importance of clear and accessible documentation for the wider developer base. This collective effort ensures that React Native continues to evolve and meet the demands of modern mobile development.
