React Native Paper 4.0 - What’s New?

Authors
Łukasz Walczak
Software Engineer
@
Callstack
No items found.

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
line with text input

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.

custom animations 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.

Table of contents
Launching or scaling an open-source project?

We help teams bring new open-source projects to life and grow them within the React Native space.

Let’s chat
Link copied to clipboard!
//
Insights

Learn more about

Open Source

Here's everything we published recently on this topic.

Sort
No items found.
//
Open Source

We can help you move
it forward!

At Callstack, we work with companies big and small, pushing React Native everyday.

React Native Development

Hire expert React Native engineers to build, scale, or improve your app — from day one to production.

React Development

Develop high-performance React applications with advanced patterns and scalable architectures.

React Compiler Implementation

Use React Compiler to achieve instant performance benefits in your existing applications.

React Native Trainings

Equip your team with React Native skills through tailored training sessions.