Migration guide for 4.0

Changes introduced in react-native-paper 4.0 version

Library level changes

The library takes advantage of the React Native 62 improvements, automatically detecting dark/light theme preference, as well as reduce motion accessibility settings and adjusts components appearance accordingly. We also extend theme customization ability, allowing you to add your own custom properties to it.

Version 4.0 comes also with InputAdornments for TextInput.

All of our Examples have been migrated to React Hooks, as we wanted to reflect the way React Native is currently used.

There's also a ton of improvements in types, accessibility and a lot of bug fixes.

TextInput adornments

This version comes with support for TextInput adornments - Affix and Icon. Both adornment variants can be placed in two available slots: right and left, which come as properties for TextInput.

import { TextInput } from 'react-native-paper';
// ...
        <TextInput
      // ...
          left={
            <TextInput.Icon
              name="heart"
              color={'#ff0000'}
              onPress={() => {}}
            />
          }
          right={<TextInput.Affix text="/100" />}
        />

Extending the theme

Keeping your own properties in the the theme is now fully supported by our library:

import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

const theme = {
  ...DefaultTheme,
  // Specify custom property
  myOwnProperty: true,
  // Specify custom property in nested object
  colors: {
    myOwnColor: '#BADA55',
  }
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

Typescript

By default it won't work well with typescript, but we can take advantage of global augmentations and specify the new properties that we added to the theme:

import * as React from 'react';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import App from './src/App';

declare global {
  namespace ReactNativePaper {
    interface ThemeColors {
      myOwnColor: string;
    }

    interface Theme {
      myOwnProperty: boolean;
    }
  }
}

const theme = {
  ...DefaultTheme,
  // Specify custom property
  myOwnProperty: true,
    // Specify custom property in nested object
  colors: {
    myOwnColor: '#BADA55',
  }
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

As you can see, custom properties e.q. myOwnColor defined in nested object e.g. colors needs to be declared in its own interface. You'll find more information in our example app where we have it implemented.

New Components

• TextInput.Affix
• TextInput.Icon

Component level changes

Snackbar

Bug fixes:

• add wrapperStyle to Snackbar (#1865) (3a00234)

Features:

• create Checkbox.Item component (2900b04)

Checkbox

Bug fixes:

• always display checkbox icon in LTR direction (#1864) (ac3d8ac)

CardTitle

Bug fixes:

• card title with 1 line only (#1809) (a0b1a3e)

MenuItem

Bug fixes:

• fix menu item height (#1847) (cc14479)

Button

Bug fixes:

• fix warning thrown on button animation (#1769) (4b400d6)

FABGroup

Bug fixes:

• prevent FABGroup click when its hidden (#1845) (df28d87)

TextInput

Features:

• add support for affix and icon in textinput (#1651) (bc95ae1)
• focus TextInput on icon/affix press (#1850) (9e2e7f6)
• add proper TS type for TextInput style prop (#1933) (b367993)

TouchableRipple

Bug fixes:

• catch empty touches in TouchableRipple on web (#2029) (b8d5760)

Appbar.Header

Bug fixes:

• don't set statusbar style in Appbar.Header (#1873) (cebf3da)

ActivityIndicator

Bug fixes:

• fix activityindictor crash on android (#1935) (e76e589)

Icon

Bug fixes:

• fix CrossFadeIcon animation when icon passed as a function (#1896) (710d364)

Menu

Bug fixes:

• fix memory leak in Menu hide animation (#1965) (49324a0)

MenuExample

Bug fixes:

• fix menu example (05504b2)

BottomNavigation

Bug fixes:

• pass route prop to the touchable (#1904) (bf2d7f3)
• disable tab switching animation by default in bottom navigation (#2017) (5636e41)

Features:

• add renderTouchable prop to BottomNavigation (#1901) (e11a51a)

Provider

Features:

• automatically handle reduce motion device settings (#1937) (faf6a53)
• handle theme change based on device preferences (#2016) (7d4e006)

RadioButtonItem

Bug fixes:

• use colors.text for RadioButton.Item label (#1871) (132570c)

Features:

• add disable prop to RadioButton.Item (#1900) (e5b2325)
• add color and uncheckedColor prop to RadioButton.Item (#1892) (ce7ad22)
• add prop accessibilityLabel to RadioButtonItem (#1955) (6ea81db)

ButtonExample

Bug fixes:

• use same color for button text and icon (#1894) (3c8a339)

Other

Features:

• add ability to extend theme TS type with custom properties (#2002) (0f8644a)
• add action to check versions of library (#1947) (691376b)
• breaking use src as an entry point for react-native (0830644)
• enforce import type for the type imports (#2026) (f6f79d4)

Bug fixes:

• fix example app on web (#2030) (22f801a)

Docs

Features:

• add info about figma and sketch to the readme (#1988) (03572ac)

Accessibility

Features:

• change acccessibilityStates to accessibilityState (#1938) (87fcb50)