0

I am a beginner in React-native and React-native-web. I am currently working on a existing project which uses React-Native-paper and @react-navigation/native library. I am trying to use the existing code/project to run as a Web Application. But when I use following code in App.js I get an error in the Console running the web Application:

import React from 'react';
import {Provider} from 'react-native-paper';
import {NavigationContainer} from '@react-navigation/native';

export const App = props => {
    return (
        <NavigationContainer>
            <Provider>
                <Navigator />
            </Provider>
        </NavigationContainer>
    );
};

The error I am getting is:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.
    at AppContainer (webpack://web_tester/./node_modules/react-native-web/dist/exports/AppRegistry/AppContainer.js?:22:24)

react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (VM231 react-dom.development.js:14906)
    at Object.useContext (VM227 react.development.js:1504)
    at eval (VM252 index.js:83)
    at renderWithHooks (VM231 react-dom.development.js:14985)
    at updateForwardRef (VM231 react-dom.development.js:17044)
    at beginWork (VM231 react-dom.development.js:19098)
    at HTMLUnknownElement.callCallback (VM231 react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (VM231 react-dom.development.js:3994)
    at invokeGuardedCallback (VM231 react-dom.development.js:4056)
    at beginWork$1 (VM231 react-dom.development.js:23959)

I have created a simple git repository to which contains the error. Please take a look at it.

Any insights in any other respects will be helpful. And thanks in advance.

regon
  • 41
  • 1
  • 3

1 Answers1

0

Try to put the react-native-paper provider outside. My app is working fine using react-native and react-native-web using the following code.

I have set up react-native-web via Expo which is the recommended way: as quoted from the react-native-web documentation: "it’s generally recommended that you use Expo."

<PaperProvider theme={theme} settings={settings}>
  <NavigationContainer>
    <RootStackScreens />
  </NavigationContainer>
</PaperProvider>
ChrisW
  • 880
  • 10
  • 16