-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Migration guide for 4.0
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.
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" />}
/>;
// ...
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.
TextInput.Affix
TextInput.Icon
Bug fixes:
Features:
- create Checkbox.Item component (2900b04)
Bug fixes:
Bug fixes:
Bug fixes:
Bug fixes:
Bug fixes:
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)
Bug fixes:
Bug fixes:
Bug fixes:
Bug fixes:
Bug fixes:
Bug fixes:
- fix menu example (05504b2)
Bug fixes:
- pass route prop to the touchable (#1904) (bf2d7f3)
- disable tab switching animation by default in bottom navigation (#2017) (5636e41)
Features:
Features:
- automatically handle reduce motion device settings (#1937) (faf6a53)
- handle theme change based on device preferences (#2016) (7d4e006)
Bug fixes:
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)
Bug fixes:
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:
Features:
Features: