React Native Paper 4.0 - What’s New?

In short

React Native Paper 4.0 introduces significant features and improvements, enhancing the developer experience and aligning with Material Design Guidelines. Notable additions include automatic animation adjustments based on device accessibility settings and a theme management system that adapts to the user's device theme. The library now utilizes Typescript with extended theme interfaces, aiming to enhance bug-catching and facilitate better app development. The update comes with a comprehensive migration guide to streamline the transition for users.

Introduction

I am really happy to announce the new version of React Native Paper today! Our team at Callstack and contributors from the community have been working very hard on delivering new features and improving the developer experience of the library.

In this short article, I want to give you an overview of what’s new and what’s coming up in React Native Paper.

What is React Native Paper?

React Native Paper, or simply Paper as we call it at Callstack, it is a collection of customizable, production-ready, cross-platform components for React-Native, following Google’s Material Design Guidelines.

The library focuses on important concepts that are hard to build from scratch:

platform adaptation
theming
accessibility and right to left languages support

What is new in React Native Paper 4.0?

React Native Paper 4.0 is a new version that is available as of today and you can look at the full Github changelog. I have highlighted some of the most important changes below.

TextInput adornments

Displaying icon or text affix inside TextInput was definitely the most requested feature according to the survey “What do you dislike about React Native Paper” that we did in late 2019.

We’re happy to inform you that this feature is finally shipping as of this release.

line with text input with heart in front

On that occasion, I would like to thank @matkoson and @jbinda for their determination and for shipping this amazing feature.

Disabling animations based on device accessibility settings

React Native Paper is a library that really cares about accessibility. In this release, we wanted to go even further and we implemented a feature that will automatically enable or disable all animations based on the user’s device settings.

Of course, as a developer, you will still be able to override that, but by default, we handle all that hard work for you. Special thanks to @troZee for implementing this.

Automatic theme management based on device settings

When it comes to modern mobile applications, theming is no longer a fancy feature, but it became a kind of a standard. Today’s applications are supposed to support not only the light and dark theme but also custom themes defined by the users of the application. All of it is supported by React Native Paper out of the box.

theme management with react-native-paper

We are happy to inform you that as a part of this release we are shipping a new feature which is an automatic theme management system. Since version 4.0 React Native Paper will check your user’s device theme and based on that it will apply the correct theme for Paper components.

Similarly to animations improvements, this feature works out of the box and it is possible to override it for more advanced usages.

Typescript improvements

Historically, React Native Paper was using Flow as a static type checker. In version 3.0 we decided to migrate the whole codebase to Typescript because it was a tool that most of the community used and we wanted to provide the best experience for developers. We were very happy about that change except for one thing, there was no option to extend theme type by the end developers.

We are extremely happy to announce that this is no longer an issue. As of today, the Theme became an interface instead of type and it is possible to add additional properties thanks to the global-augmentation typescript feature.

We believe this change will help users of our library in catching bugs and building better apps in general.

We also upgraded React-Native types to the latest version across the whole library. The issues with wrong usages of accessibility APIs that were changed in RN 0.60 should be resolved. We hope this change will make the library and your applications more accessible for the users.

Migration guide

To ease the transition to the new version, we prepared a migration guide for 4.0 covering all of the breaking changes. And here's a full changelog.

Summary

To wrap everything up, we are happy that you find our library helpful. Your recognition is the best price we can get for our effort. We hope that the aforementioned upgrades will make your daily work easier than ever before.

Also special thanks to the whole React Native Paper core team and external contributors for their help with making this release happen.