Error: Looks like you forgot to wrap your root component with `Provider` component from `react-native-paper`.

[uncedric]

I'm getting the following error when I try to render the component as in the demo code:

Error: Looks like you forgot to wrap your root component withProvidercomponent fromreact-native-paper.

I'm using the following libraries:

"expo": "~46.0.16",
"react-native": "0.69.6",
"react-native-paper": "5.5.2",

Let me know if I should provide more information.

[srivastavaanurag79]

if your index.tsx or index.jsx is your root file, you need to wrap your <App/> inside Provider from react-native-paper. as shown in example index.tsx or you can through react native paper docs Setup your React Native Paper

Usage Wrap your root component in Provider from react-native-paper. If you have a vanilla React Native project, it's a good idea to add it in the component which is passed to AppRegistry.registerComponent. This will usually be in the index.js file. If you have an Expo project, you can do this inside the exported component in the App.js file.

Example:

import * as React from 'react';
import { AppRegistry } from 'react-native';
import { Provider as PaperProvider } from 'react-native-paper';
import { name as appName } from './app.json';
import App from './src/App';

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

AppRegistry.registerComponent(appName, () => Main);

The PaperProvider component provides the theme to all the components in the framework. It also acts as a portal to components which need to be rendered at the top level.

If you have another provider (such as Redux), wrap it outside PaperProvider so that the context is available to components rendered inside a Modal from the library:

import * as React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { Provider as StoreProvider } from 'react-redux';
import App from './src/App';
import store from './store';

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