David says React Native Paper is a cross-platform component library that implements Material Design for iOS, Android, and web. He began contributing while seeking a React Native role at Callstack, and says the library’s consistent design patterns distinguish it from libraries with looser design guidelines.
Dive Into React Native Paper UI Kit
Speakers
David, a Callstack software developer and React Native Paper maintainer, joins the host on React Native Show to discuss Paper’s design, customization, performance, and cross-platform support.
Paper’s animations use React Native’s Animated library, with most running on the native thread. The team considered Reanimated but expected little performance gain. David says Material Design publishes animation specifications, though some components required reverse engineering.
Developers can customize the whole library through themes, including colors, fonts, and animation durations, or adjust individual components with React Native styles. A Babel plugin can remove unused component imports for Metro. Some teams also fork Paper to build libraries suited to their needs.
The Material Design 2.0 update changed existing components and required a major release. The team worked on a separate branch and provided a migration guide. David says the team was improving documentation and React Navigation guides, and was developing a Select component for Android and iOS as well as web.
Paper began with support for Android and iOS, then added web through React Native Web. David estimates that more than 95% of its components support web and says components should be reliable across all three platforms.
Takeaways
- Choose a UI library whose design guidelines match the product’s needs; Paper emphasizes consistent Material Design patterns.
- Use themes for app-wide visual changes and component styles for targeted adjustments.
- Check platform support for the specific components your app needs; Paper’s web coverage was not complete at the time of the episode.
- For major component changes, a separate development branch and a migration guide can help users upgrade.
- Budget time for documentation and contribution paths alongside new component work.
Mentioned in this talk
Search inside this talk
What was claimed 12
- role at
“He’s a lead engineer on React Native Paper and leads the entire project.”
YouTube Unverified1 source· Talk
- usesPaper uses Animated API
“all of the animations are implemented with this library”
0:40inReact Native Paper With Truly Native-looking AnimationsYouTube Verified2 sources· Talk
- role at
“I work at Callstack as a software developer.”
YouTube Unverified1 source· Talk
- works at
“I work at Callstack as a software developer.”
YouTube Unverified1 source· Talk
- built
“I decided to contribute to one of their open-source projects... That’s how I ended up contributing to React Native Paper.”
YouTube Unverified1 source· Talk
- featurePaper: Cross-platform UI component library implementing Material Design for iOS, Android, and web
“React Native Paper is a cross-platform UI component library that implements Material Design in a very strict way.”
YouTube Unverified1 source· Talk
- metricPaper: More than two million downloads in the past year
“In the past year, there have been more than two million downloads.”
YouTube Unverified1 source· Talk
- metricPaper: More than 200,000 monthly downloads
“We have more than 200,000 monthly downloads.”
YouTube Unverified1 source· Talk
- featureReanimated: Version 2 uses Turbo Modules under the hood and has a simpler, imperative API
“It’s written with Turbo Modules under the hood. Compared with version 1, the API is much simpler and imperative.”
YouTube Unverified1 source· Talk
- featurePaper: Supports customization through themes and styles
“We support two ways of doing it: theming and styles.”
YouTube Unverified1 source· Talk
- featurePaper: A Select component was in development
“We’re currently working on a Select component.”
YouTube Unverified1 source· Talk
- featurePaper: More than 95% of components support web
“I think more than 95% of components do.”
YouTube Unverified1 source· Talk
