Migration guide for 3.0

Changes introduced in react-native-paper 3.0 version

Library level changes

The library was migrated from Flow to TypeScript

From a user perspective, not much has changed. In general, typings are improved, they are more strict.

Migration from MaterialIcons to MaterialCommunityIcons

Due to that change, there are much more icons to use, but the names of the icons can be different between packages. I.e more-vert from MaterialIcons is dots-vertical from MaterialCommunityIcons

Possibility to use custom Icon component

The library uses MaterialCommunityIcons by default, but it is possible to specify a custom Icon component. To use custom icon component setup properly the PaperProvider

import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
// ...

      <PaperProvider
        settings={{
          icon: props => <AwesomeIcon {...props} />,
        }}
      >
        // ...
      </PaperProvider>

Changes to the structure of the fonts object in theme

In version 2.x each property e.g. regular or medium in fonts object was a string and contained information about font family and weight. In version 3.x each property in fonts object is a an object containing fontFamily and fontWeight properties. Thanks to those changes, we can support more granular font definitions in theme.

In v3.x fonts object should have following structure:

    regular: {
      fontFamily: 'System',
      fontWeight: '400',
    },
    medium: {
      fontFamily: 'System',
      fontWeight: '500',
    },
    light: {
      fontFamily: 'System',
      fontWeight: '300',
    },
    thin: {
      fontFamily: 'System',
      fontWeight: '100',
    },

When you pass a font from theme to your custom component make sure to spread it, since font is an object in v3.x

style={{
  ...theme.fonts.regular
}}

Other minor changes

• export useTheme hook
• new dark theme colors, compliant with Material Design Guidelines

New Components

ToggleButton.Row

Component level changes

Appbar

Bug Fixes:

• do not pass any additional props to custom children components

AppHeader

Bug Fixes:

• add elevation to wrapper style on Android

AvatarText

Features:

• add labelStyle prop

Banner

** BREAKING CHANGE**

• change prop image to icon

Features:

• add contentStyle prop

BottomNavigation

Bug Fixes:

• use active instead of text for ripple color

Button

Bug Fixes:

• use own ActivityIndicator instead the one from React-Native
• do not apply elevation on outlined button

Features:

• add labelStyle prop

Card

Bug Fixes:

• fix Card flow type

Card.Title

Features:

• leftStyle and rightStyle

Chip

Bug Fixes:

• update close icon to material community icons
• types correction

Features:

• onLongPress handler
• textStyle prop

CrossFadeIcon

Features:

• add scale property to control cross fade icon animation time

DrawerSection

Bug Fixes:

• fix bug with applying background color

FAB

Bug Fixes:

• always display activity indicator if loading property is set to true

Features:

• support loading indicator for FAB

FAB.Group

Bug Fixes:

• remove StatusBar from FAB Group
• icon type in actions

HelperText

Features:

• add testID prop

IconButton

Bug Fixes:

• fix button scaling

List.Accordion

Features:

• (title|description)numberOfLines prop
• add titleStyle and descriptionStyle props

List.Item

Bug Fixes:

• properly render description prop
• icon spacing

Features:

• add (title|description)numberOfLines prop
• add titleStyle and descriptionStyle props

Menu

Bug Fixes:

• apply animation scale from theme to animations in Menu.
• disable menu interaction while hiding
• reduce menu open delay
• dismiss menu on window layout change
• properly handle back button press in menu
• fix the alignment issue

Features:

• add contentStyle prop
• make the menu keyboard-accessible on web

Modal

Bug Fixes:

• wrap modal children in SafeAreaView
• disable interaction when fading out modal

Features:

• contentContainerStyle prop

RadioGroup

Bug Fixes:

• fix animation

Searchbar

Features:

• inputStyle prop
• custom icon for clear button

Surface

Bug Fixes:

• consistent elevation behavior across platforms

TextInput

Bug Fixes:

• fix adjustsFontSizeToFit does not exist on TextInput error
• fix disappearing placeholder on web
• fix typescript error when setting ref
• pass flattened styles to adjustPadding
• use theme font in TextInputFlat
• fix editable and disable props behavior

Features:

• add ability to change fontSize, height and fontWeight
• allow to make inputs uncontrolled with defaultValue

Typography

Bug Fixes:

• add letter-spacing that follows guidelines