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 favor of color prop in various components (c3bf6b0)

TODO

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 old behaviour

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)

TODO

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