{"id":11788,"library":"react-native-paper","title":"Material Design for React Native","description":"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.","status":"active","version":"5.15.1","language":"javascript","source_language":"en","source_url":"https://github.com/callstack/react-native-paper","tags":["javascript","android","ios","react native","component library","ui kit","material design","bootstrap","typescript"],"install":[{"cmd":"npm install react-native-paper","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-paper","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-paper","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core React library required by React Native.","package":"react","optional":false},{"reason":"Core React Native framework for mobile development.","package":"react-native","optional":false},{"reason":"Provides safe area insets to components, crucial for modern UI layouts.","package":"react-native-safe-area-context","optional":false}],"imports":[{"note":"The top-level component that should wrap your entire app to enable theming and context.","wrong":"const { Provider } = require('react-native-paper')","symbol":"Provider","correct":"import { Provider } from 'react-native-paper'"},{"note":"Most components are named exports. Direct path imports are generally discouraged and prone to breaking changes.","wrong":"import Button from 'react-native-paper/lib/components/Button'","symbol":"Button","correct":"import { Button } from 'react-native-paper'"},{"note":"Since v5, MD3LightTheme/DarkTheme are the recommended theme objects. `useTheme` is the hook for accessing theme context.","wrong":"import { DefaultTheme } from 'react-native-paper' // Deprecated for MD3","symbol":"MD3LightTheme, useTheme","correct":"import { MD3LightTheme, Provider, Text, useTheme } from 'react-native-paper'"}],"quickstart":{"code":"import * as React from 'react';\nimport { View, StyleSheet } from 'react-native';\nimport { Button, MD3LightTheme, PaperProvider, Text, Appbar } from 'react-native-paper';\n\nconst theme = {\n  ...MD3LightTheme,\n  colors: {\n    ...MD3LightTheme.colors,\n    primary: '#673ab7',\n    accent: '#ff4081',\n  },\n};\n\nexport default function App() {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <PaperProvider theme={theme}>\n      <Appbar.Header>\n        <Appbar.Content title=\"My Paper App\" />\n      </Appbar.Header>\n      <View style={styles.container}>\n        <Text variant=\"headlineMedium\">Count: {count}</Text>\n        <Button \n          mode=\"contained\"\n          onPress={() => setCount(c => c + 1)}\n          style={styles.button}\n        >\n          Increment\n        </Button>\n        <Button \n          mode=\"outlined\"\n          onPress={() => setCount(0)}\n          style={styles.button}\n        >\n          Reset\n        </Button>\n      </View>\n    </PaperProvider>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    padding: 16,\n    backgroundColor: theme.colors.background,\n  },\n  button: {\n    marginVertical: 8,\n    width: 200,\n  },\n});","lang":"typescript","description":"Demonstrates a basic React Native Paper application with theming using PaperProvider, Appbar, Text, and Button components."},"warnings":[{"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.","message":"The `createMaterialBottomTabNavigator` utility has been deprecated in `react-native-paper@5.14.0`. It is no longer actively maintained or recommended for new projects.","severity":"deprecated","affected_versions":">=5.14.0"},{"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.","message":"Support 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`.","severity":"gotcha","affected_versions":"5.14.0 - 5.14.2"},{"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`.","message":"The 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.","severity":"gotcha","affected_versions":">=5.14.2"},{"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.","message":"Version `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.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to `react-native-paper@5.15.1` or newer, as this bug was addressed in that release.","cause":"An intermittent rendering issue affecting the `Menu` component's initial appearance.","error":"Menu briefly flashes on first open"},{"fix":"Update to `react-native-paper@5.14.2` or later, which contains a fix for this issue.","cause":"A specific bug where the `AnimatedFAB` component would throw an error when its `label` prop was an empty string and its width changed.","error":"Error on width change of AnimatedFAB when label is empty string"},{"fix":"Ensure you are using `react-native-paper@5.14.3` or newer, where the problematic `transformOrigin` usage was reverted to resolve these issues.","cause":"Issues with `transformOrigin` internally applied to `TextInput` components were causing label rendering glitches.","error":"TextInput label not animating or incorrectly positioned (especially 'outlined' or 'flat' variants)"},{"fix":"Upgrade to `react-native-paper@5.14.1` or later, as this specific issue regarding `Surface` styling with `flex` was resolved.","cause":"A bug in `Surface` component's styling where the `flex` prop was not correctly applied or interfered with other styles.","error":"Surface component styling incorrect when `flex` property is set"}],"ecosystem":"npm"}