arrow icon

React Native Paper 4.0 - What’s New?

Download your copy of the
Ultimate Guide to React Native Optimization

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more


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 covering all of the breaking changes.

A full changelog can be found here.


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.

Dawid Urbaniak
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.