Registry / web-framework / react-native-paper

react-native-paper

library5.15.1jsnpmunverified

React Native Paper is an actively maintained cross-platform UI kit library for React Native, currently at version 5.15.1. It provides a comprehensive collection of customizable and production-ready components that strictly adhere to Google's Material Design guidelines, including full support for Material Design 3 (MD3). The library offers robust theming capabilities, allowing developers to easily adapt the visual style of their applications. It maintains a regular release cadence with frequent bug fixes and minor versions introducing new features or deprecations. Key differentiators include its deep integration with Material Design principles, its platform adaptation for both iOS and Android, and its comprehensive theming system, making it a strong choice for building consistent and aesthetically pleasing React Native applications.

web-framework

npm install react-native-paper

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-PAPER

react-native-paper

web-frameworkjavascriptv5.15.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Provider

✓ import { Provider } from 'react-native-paper'

✗ const { Provider } = require('react-native-paper')

The top-level component that should wrap your entire app to enable theming and context.

Button

✓ import { Button } from 'react-native-paper'

✗ import Button from 'react-native-paper/lib/components/Button'

Most components are named exports. Direct path imports are generally discouraged and prone to breaking changes.

MD3LightTheme, useTheme

✓ import { MD3LightTheme, Provider, Text, useTheme } from 'react-native-paper'

✗ import { DefaultTheme } from 'react-native-paper' // Deprecated for MD3

Since v5, MD3LightTheme/DarkTheme are the recommended theme objects. `useTheme` is the hook for accessing theme context.

Demonstrates a basic React Native Paper application with theming using PaperProvider, Appbar, Text, and Button components.

import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import { Button, MD3LightTheme, PaperProvider, Text, Appbar } from 'react-native-paper'; const theme = { ...MD3LightTheme, colors: { ...MD3LightTheme.colors, primary: '#673ab7', accent: '#ff4081', }, }; export default function App() { const [count, setCount] = React.useState(0); return ( <PaperProvider theme={theme}> <Appbar.Header> <Appbar.Content title="My Paper App" /> </Appbar.Header> <View style={styles.container}> <Text variant="headlineMedium">Count: {count}</Text> <Button mode="contained" onPress={() => setCount(c => c + 1)} style={styles.button} > Increment </Button> <Button mode="outlined" onPress={() => setCount(0)} style={styles.button} > Reset </Button> </View> </PaperProvider> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16, backgroundColor: theme.colors.background, }, button: { marginVertical: 8, width: 200, }, });

Debug

Known issues

deprecatedThe `createMaterialBottomTabNavigator` utility has been deprecated in `react-native-paper@5.14.0`. It is no longer actively maintained or recommended for new projects.

fix

Migrate to `@react-navigation/bottom-tabs` version `7.x` or later, combined with `BottomNavigation.Bar` for Material Design styling. Refer to the official documentation example for details.

affects: >=5.14.0

gotchaSupport for `transformOrigin` on `TextInput` components was temporarily unstable and removed in `v5.14.3` due to various label rendering issues. This might affect custom animations or styling that relied on `transformOrigin`.

fix

If you experienced issues with TextInput labels, ensure you are on `v5.14.3` or higher where the problematic `transformOrigin` usage was reverted. Avoid using `transformOrigin` directly on `TextInput` components.

affects: 5.14.0 - 5.14.2

gotchaThe internal use of `findNodeHandle` was removed in `v5.14.2`. While this typically affects library internals, it might indicate changes in how certain components interact with the native view hierarchy, potentially impacting highly customized or native-module-integrated components.

fix

Ensure your project is compatible with `react-native` versions supported by `react-native-paper v5.14.2+`. Review any custom components or native module integrations that might implicitly rely on `findNodeHandle`.

affects: >=5.14.2

gotchaVersion `5.14.1` introduced explicit support for `react-native` 0.77.0 and `@react-native-vector-icons` 12.x. Using significantly older or newer versions of these peer dependencies may lead to unexpected visual glitches or runtime errors.

fix

Always align your `react-native` and `@react-native-vector-icons` versions with those recommended or explicitly supported by the current `react-native-paper` version to ensure stability and correct rendering.

affects: >=5.0.0

Errors

Common errors & fixes

Menu briefly flashes on first open

An intermittent rendering issue affecting the `Menu` component's initial appearance.

fix

Upgrade to `react-native-paper@5.15.1` or newer, as this bug was addressed in that release.

Error on width change of AnimatedFAB when label is empty string

A specific bug where the `AnimatedFAB` component would throw an error when its `label` prop was an empty string and its width changed.

fix

Update to `react-native-paper@5.14.2` or later, which contains a fix for this issue.

TextInput label not animating or incorrectly positioned (especially 'outlined' or 'flat' variants)

Issues with `transformOrigin` internally applied to `TextInput` components were causing label rendering glitches.

fix

Ensure you are using `react-native-paper@5.14.3` or newer, where the problematic `transformOrigin` usage was reverted to resolve these issues.

Surface component styling incorrect when `flex` property is set

A bug in `Surface` component's styling where the `flex` prop was not correctly applied or interfered with other styles.

fix

Upgrade to `react-native-paper@5.14.1` or later, as this specific issue regarding `Surface` styling with `flex` was resolved.

Upgrade

Version history

5.15.1latest on npm

Audit

Dependencies

reactrequiredCore React library required by React Native.

react-nativerequiredCore React Native framework for mobile development.

react-native-safe-area-contextrequiredProvides safe area insets to components, crucial for modern UI layouts.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/callstack/react-native-paper ↗

packagehttps://www.npmjs.com/package/react-native-paper ↗

homepagehttps://callstack.github.io/react-native-paper/ ↗