Migration guide for 2.0

Various components were renamed and/or grouped under a namespace

• Toolbar → Appbar.Header
• ToolbarBackAction → Appbar.BackAction
• ToolbarContent → Appbar.Content
• CardActions → Card.Actions
• CardContent → Card.Content
• CardCover → Card.Cover
• DialogActions → Dialog.Actions
• DialogContent → Dialog.Content
• DialogScrollArea → Dialog.ScrollArea
• DialogTitle → Dialog.Title
• DrawerItem → Drawer.Item
• DrawerSection → Drawer.Section
• FABGroup → FAB.Group
• ListAccordion → List.Accordion
• ListItem → List.Item
• ListSection → List.Section
• RadioButtonGroup → RadioButton.Group
• Paper → Surface

SearchBar was removed in favour of Searchbar (8c5bc51)

Udate your imports to use Searchbar instead of SearchBar.

Change this:

import { SearchBar } from 'react-native-paper';

To this:

import { Searchbar } from 'react-native-paper';

React elements are no longer supported in the icon prop (65ad2a0)

If you are passing a React element to the icon prop, change it to a function returning an element instead.

Change this:

<Button
  icon={(
    <Image
      source={require('../assets/chameleon.jpg')}
      style={{ width: 16, height: 16 }}
    />
  )}
>
  Press me
</Button>

To this:

<Button
  icon={({ size, color }) => (
    <Image
      source={require('../assets/chameleon.jpg')}
      style={{ width: size, height: size, tintColor: color }}
    />
  )}
>
  Press me
</Button>

Paper was renamed to Surface (3485402)

Change this:

import { Paper } from 'react-native-paper';

To this:

import { Surface } from 'react-native-paper';

Button was redesigned with API changes (37091c7)

The raised prop has been removed in favour of a mode prop.

If you have raised={true} and primary={true}, update it to mode="contained".

Change this:

<Button raised primary>Click me</Button>

To this:

<Button mode="contained">Click me</Button>

If you have raised={true} and primary={false} (default), update it to mode="outlined".

Change this:

<Button raised>Click me</Button>

To this:

<Button mode="outlined">Click me</Button>

The primary prop has been removed. The text color and the background color is always primary color in mode="text" and mode="outlined" respectively. To change this behaviour, use the color prop to customize the color.

Default margins from various components has been removed (9ad9532)

TODO

The dark prop was dropped in various components (c3bf6b0)

In some components, the dark prop used to control whether the icon will be light or dark. Now you need to use the color prop instead which is more flexible. By default, the color is determined automatically depending on how dark the background color is.

The prop was removed in the following components:

• FAB
• ToolbarAction (now Appbar.Action)
• ToolbarBackAction (now Appbar.BackAction)
• ToolbarContent (now Appbar.Content)

The color prop was removed from DrawerItem (734cd98)

Instead of the color prop, you can now customize theme's primary and text colors to customize drawer item's appearance.

The duration statics in Snackbar were changed (bc5d967)

Snackbar.DURATION_SHORT (2500ms), Snackbar.DURATION_LONG (3500ms) and Snackbar.DURATION_INDEFINITE were removed in favor of Snackbar.DURATION_SHORT (4000ms), Snackbar.DURATION_MEDIUM (7000ms) and Snackbar.DURATION_LONG (10000ms). Either migrate to the new values in your code or pass milliseconds directly to keep the old behavior.

Change this:

<Snackbar visible={this.state.visible} duration={Snackbar.DURATION_SHORT}>Hey there</Snackbar>

To this:

<Snackbar visible={this.state.visible} duration={2500}>Hey there</Snackbar>

Toolbar was split into Appbar and Appbar.Header (d9a3d77)

The difference between Appbar and Appbar.Header is that Appbar.Header applies extra space at the top to compensate for translucent statusbar, while Appbar doesn't apply any tweaks.

If you're using Toolbar, you can replace it with Appbar.Header in your code.

Chip was redesigned with API changes (1d3276a)

TODO

TextInput was redesigned with API changes (f1cde8a)

TODO

Components are no longer wrapped in Portal by default (1c8cf5c)

TODO

The checked prop was removed in favor of a status prop in Checkbox and RadioButton (3b09171)

TODO

The icon and avatar props of ListItem and ListAccordion were replaced with left and right props (27c196f)

TODO