Skip to content

Migration guide for 4.0

Mateusz Kosoń edited this page Jul 3, 2020 · 6 revisions

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 adjusting components appearance accordingly. We also extend theme customization ability to work with TypeScript.

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 are accepted 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 with TypeScript

Up until now, theme extending didn't work with TypeScript. With the new feature, we can use global augmentations to specify the new custom properties that we want to be 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:

Features:

  • create Checkbox.Item component (2900b04)

Checkbox

Bug fixes:

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

CardTitle

Bug fixes:

MenuItem

Bug fixes:

Button

Bug fixes:

FABGroup

Bug fixes:

TextInput

Features:

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:

Icon

Bug fixes:

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

Menu

Bug fixes:

MenuExample

Bug fixes:

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:

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:

Docs

Features:

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

Accessibility

Features:

  • change acccessibilityStates to accessibilityState (#1938) (87fcb50)
Clone this wiki locally