WhoBuilt

React Native Paper v.5 - Update Overview

Jul 7, 2022· 38 min· 4.2K views·Watch on YouTube

Speakers

Łukasz Walczak, React Native Paper contributor and software engineer at Callstack, discusses Paper v5, Material You, and the library’s update process with host Łukasz Chludziński on React Universe On Air.

React Native Paper and its growth

Walczak describes React Native Paper as a cross-platform collection of customizable, production-ready React Native components based on Google’s Material guidelines. He says downloads grew from 200,000 per month to more than 400,000, or nearly four million per year. The team has also added customization options, fixed bugs, improved accessibility, and introduced components.

Supporting Material Design 2 and 3

Material Design 3, also called Material You, adds a new visual style and features designed around personal needs. Paper v5 supports both Material Design 2 and 3, so teams can adopt the new version while retaining the older design. Users can switch between versions, light and dark modes, and three platforms in the example app.

Planning the v5 update

The team aimed to keep the implementation in existing files and add the new style layer within the existing approach. A four-person internal workshop compared components across Material Design versions using documentation and a Figma kit, then set implementation principles. Design tokens name recurring decisions such as colors and typography, giving the codebase a shared source of truth for theming and future changes.

Migrating and exploring components

The migration guide starts with updating the theme. To keep Material Design 2, users set the theme’s `version` to `2`; Material You is the v5 default, with a new color palette structure. Users also need to review changed, renamed, and deprecated component props. In the demo, Walczak shows differences in bottom navigation, floating action buttons, and the collapsed drawer; some animations were recreated by observing Google apps.

Takeaways

  • Supporting old and new design versions in one release lets users adopt updates while continuing to receive fixes.
  • Use named design tokens for recurring visual choices so theming and later design changes have a shared source of truth.
  • Plan a library-wide update by comparing components against the new specification and agreeing on implementation rules first.
  • Before upgrading, update the theme and check component APIs for renamed or deprecated props.
  • A component showcase app can help teams compare themes, modes, and design versions before committing to an upgrade.

Mentioned in this talk

Search inside this talk

What was claimed 9

  • built
    main contributor; released version 5
    “currently our main contributor to Paper. He has just released version 5”
    YouTube
    Unverified1 source· Talk
  • built
    “an amazing UI kit library homegrown here at Callstack”
    YouTube
    Verified2 sources· Talk
  • role at
    Łukasz Walczak is software engineer at Callstack Team
    “I’m a software engineer at Callstack”
    YouTube
    Unverified1 source· Talk
  • metric
    Paper: More than 400,000 monthly downloads; almost four million downloads per year
    “monthly downloads have increased from 200,000 to more than 400,000. Currently, we have almost four million downloads per year”
    YouTube
    Unverified1 source· Talk
  • feature
    Paper: Cross-platform UI kit library with customizable, production-ready React Native components following Google’s Material guidelines
    “a cross-platform UI kit library containing a collection of customizable, production-ready components”
    YouTube
    Unverified1 source· Talk
  • feature
    Paper: Components support customization through theming and style props
    “There are still two ways to do that: theming and style props”
    YouTube
    Unverified1 source· Talk
  • feature
    Paper: Components support screen readers and right-to-left languages
    “We take care of compatibility with screen readers and right-to-left languages”
    YouTube
    Unverified1 source· Talk
  • feature
    Paper: Supports Material Design 2 and Material Design 3 in version 5
    “Paper would certainly support Material You”
    YouTube
    Unverified1 source· Talk
  • built
    “React Native Paper Example, by Callstack”
    YouTube
    Unverified1 source· Talk

Related talks