React-native-paper: React native paper require cycle warnings

[khaledBou]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I tried to use react native paper components for my react native applications.
Currently i use "react-native-paper": "^3.9.0",
I launched the application in Android mobile
I got warnings
`[Tue May 05 2020 13:06:41.270] WARN Require cycle: node_modules\react-native-paper\lib\module\components\Checkbox\Checkbox.js -

node_modules\react-native-paper\lib\module\components\Checkbox\CheckboxItem.js -> node_modules\react-native-paper\lib\module\compo
nents\Checkbox\Checkbox.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Tue May 05 2020 13:06:41.272] WARN Require cycle: node_modules\react-native-paper\lib\module\components\FAB\FAB.js -> node_mod
ules\react-native-paper\lib\module\components\FAB\FABGroup.js -> node_modules\react-native-paper\lib\module\components\FAB\FAB.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\RadioButton\RadioButto
n.js -> node_modules\react-native-paper\lib\module\components\RadioButton\RadioButtonItem.js -> node_modules\react-native-paper\lib\
module\components\RadioButton\RadioButton.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\Appbar\Appbar.js -> no
de_modules\react-native-paper\lib\module\components\Appbar\AppbarHeader.js -> node_modules\react-native-paper\lib\module\components\
Appbar\Appbar.js

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Tue May 05 2020 13:06:41.273] WARN Require cycle: node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleBut
ton.js -> node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleButtonRow.js -> node_modules\react-native-paper\l
ib\module\components\ToggleButton\ToggleButton.js`

React Native version:

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 12.35 GB / 23.88 GB
Binaries:
Node: 12.16.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK:
API Levels: 27, 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: 20.0.5594570
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
Languages:
Java: 1.8.0_211 - /c/Program Files/Java/jdk1.8.0_211/bin/javac
Python: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 16.11.0 => 16.11.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
react-native: Not Found

Steps To Reproduce

1. yarn add react-native-paper
2. react-native run-android

Expected Results

I don't want to see warnings about react native paper

[khaledBou]

[MinaroShikuchi]

639

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[ashutoshsinghai]

Require cycle: node_modules\react-native-paper\lib\module\components\Checkbox\Checkbox.js -> node_modules\react-native-paper\lib\module\components\Checkbox\CheckboxItem.js -> node_modules\react-native-paper\lib\module\components\Checkbox\Checkbox.js

Checkbox is not even imported
Still giving the warning for checkbox

[mohamedali-inno]

I m also facing the same the issue.. Did anybody found any answers
s

[prawesshh]

Still facing that issue
Require cycle: node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleButton.js -> node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleButtonRow.js -> node_modules\react-native-paper\lib\module\components\ToggleButton\ToggleButton.js

[vbtux]

I have the same problem

[rasck]

We also get this for components that we do not use:

Unrecognized event: {"type":"client_log","level":"warn","data":["Require cycle: node_modules\\react-native-paper\\src\\components\\Checkbox\\Checkbox.tsx -> node_modules\\react-native-paper\\src\\components\\Checkbox\\CheckboxItem.tsx -> node_modules\\react-native-paper\\src\\components\\Checkbox\\Checkbox.tsx
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle."]}

"expo": "38.0.8",
"react-native-paper": "4.0.0"

Edit:
Upgrading to the latest version of Expo CLI fixed our problem. We upgrade to expo-cli v. 3.22.3

[Gaboso]

I am also getting the same warnings .. without using any of these components

WARN     Require cycle: node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx -> node_modules\react-native-paper\src\components\Checkbox\CheckboxItem.tsx -> node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
WARN     Require cycle: node_modules\react-native-paper\src\components\FAB\FAB.tsx -> node_modules\react-native-paper\src\components\FAB\FABGroup.tsx -> node_modules\react-native-paper\src\components\FAB\FAB.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
WARN     Require cycle: node_modules\react-native-paper\src\components\RadioButton\RadioButton.tsx -> node_modules\react-native-paper\src\components\RadioButton\RadioButtonItem.tsx -> node_modules\react-native-paper\src\components\RadioButton\RadioButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
WARN     Require cycle: node_modules\react-native-paper\src\components\Appbar\Appbar.tsx -> node_modules\react-native-paper\src\components\Appbar\AppbarHeader.tsx -> node_modules\react-native-paper\src\components\Appbar\Appbar.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
WARN     Require cycle: node_modules\react-native-paper\src\components\ToggleButton\ToggleButton.tsx -> node_modules\react-native-paper\src\components\ToggleButton\ToggleButtonRow.tsx -> node_modules\react-native-paper\src\components\ToggleButton\ToggleButton.tsx

"react-native": "0.63.1",
"react-native-paper": "4.0.1"

[davidcort]

The same, warnings every where.

[mayank-budhiraja]

Issue is still here. Any resolutions?

[jlgarnier]

+1
Looks weird to get warning for unused components...

[frankwong]

I had the same issue when I added PaperProvider with nothing else. Then restarting the apps in the emulators made the warnings go away.

Restarted apps using:
yarn android
yarn ios

"dependencies": {
"react": "16.13.1",
"react-native": "0.63.1",
"react-native-paper": "^4.0.1",
"react-native-vector-icons": "^7.0.0"
},

Emulators:
Android 29
IOS 13.1

[satsuya0114]

same issue here ... any solution ?

[madhumurugan89]

getting same issue.. any fix for this ?

[BuddhaNag12]

getting same issue .... 👎

[jauggy]

Same issue

[juato]

same issue +1

[Codefucious]

Also having the same issue here

[karimelsaidy]

same issue with me

[dnyanu181]

same issue with me as well

[andikaMaulana]

same issue +2

[khalilmansouri]

same issue

[ninoespina36]

Same issue here using createMaterialBottomTabNavigator with React Navigation 5

[JossanPetrenko]

same issue

[tonyjara]

The work-around is importing through each component, individually, like this
import Paragraph from 'react-native-paper/lib/commonjs/components/Typography/Paragraph';

[phcbarros]

The same issue but in iOS

System: macOS Catalina
MacBook Pro: 13 inch, 2019
CPU: (1,4 GHz Intel Core 15 Quad-Core
Memory: 8 GB

Node version: v12.13.1

Packages
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-paper": "^4.0.1",

[danial-rashid97]

Same issue :(

[c7nasr]

same here

[anjuman-noor]

same here

[anish0714]

Even Facing Same isssue

[ilhamsa1]

same issue here

[Cygnus2112]

Same.

[jafuve]

If it helps someone. The problem occured when I imported Provider without using it.

import { DefaultTheme, Provider as ProviderPaper } from 'react-native-paper';

By removing the provider, the problem got solved.

import { DefaultTheme } from 'react-native-paper';

[adelalmaleh2]

Why this ticket is closed?

[aakrandan]

I guess it will get automatically closed. I am facing the same issue, any work around?

[react-ram]

any updates on this? please

[Piyush132000]

[Sun Sep 27 2020 09:51:00.611] WARN Require cycle: node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx -> node_modules\react-native-paper\src\components\Checkbox\CheckboxItem.tsx -> node_modules\react-native-paper\src\components\Checkbox\Checkbox.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.[Sun Sep 27 2020 09:51:00.615] WARN Require cycle: node_modules\react-native-paper\src\components\FAB\FAB.tsx -> node_modules\react-native-paper\src\components\FAB\FABGroup.tsx -> node_modules\react-native-paper\src\components\FAB\FAB.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.[Sun Sep 27 2020 09:51:00.616] WARN Require cycle: node_modules\react-native-paper\src\components\RadioButton\RadioButton.tsx -> node_modules\react-native-paper\src\components\RadioButton\RadioButtonItem.tsx -> node_modules\react-native-paper\src\components\RadioButton\RadioButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.[Sun Sep 27 2020 09:51:00.616] WARN Require cycle: node_modules\react-native-paper\src\components\Appbar\Appbar.tsx -> node_modules\react-native-paper\src\components\Appbar\AppbarHeader.tsx -> node_modules\react-native-paper\src\components\Appbar\Appbar.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.[Sun Sep 27 2020 09:51:00.617] WARN Require cycle: node_modules\react-native-paper\src\components\ToggleButton\ToggleButton.tsx -> node_modules\react-native-paper\src\components\ToggleButton\ToggleButtonRow.tsx -> node_modules\react-native-paper\src\components\ToggleButton\ToggleButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.[Sun Sep 27 2020 09:51:00.617] LOG Running "App" with {"rootTag":1}

any one have any answer on it

[MohamedMorsi]

till now no solution found

[adityamallah]

Please Help how it will be fixed?

[tariqj86]

i face the same issue and no solution for that

[codascii]

I replace @react-navigation/material-bottom-tabs by @react-navigation/bottom-tabs and it seems fixed.

[anonewb]

LogBox.ignoreLogs(["Require cycle:"]);

[chobits4]

solved my issue by next:

• Wrap your root component in Provider from react-native-paper

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

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

AppRegistry.registerComponent('main', () => Main);

[samuelseaton]

still having this issue

[makarsky]

Here's how I reproduced the issue.
This is my index.js:

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

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

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

The packager output:

[Fri Nov 20 2020 19:53:34.280]  BUNDLE  ./index.js 

[Fri Nov 20 2020 19:53:37.910]  WARN     Require cycle: node_modules/react-native-paper/src/components/Checkbox/Checkbox.tsx -> node_modules/react-native-paper/src/components/Checkbox/CheckboxItem.tsx -> node_modules/react-native-paper/src/components/Checkbox/Checkbox.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Fri Nov 20 2020 19:53:37.930]  WARN     Require cycle: node_modules/react-native-paper/src/components/FAB/FAB.tsx -> node_modules/react-native-paper/src/components/FAB/FABGroup.tsx -> node_modules/react-native-paper/src/components/FAB/FAB.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Fri Nov 20 2020 19:53:37.940]  WARN     Require cycle: node_modules/react-native-paper/src/components/RadioButton/RadioButton.tsx -> node_modules/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx -> node_modules/react-native-paper/src/components/RadioButton/RadioButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Fri Nov 20 2020 19:53:37.950]  WARN     Require cycle: node_modules/react-native-paper/src/components/Appbar/Appbar.tsx -> node_modules/react-native-paper/src/components/Appbar/AppbarHeader.tsx -> node_modules/react-native-paper/src/components/Appbar/Appbar.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Fri Nov 20 2020 19:53:37.970]  WARN     Require cycle: node_modules/react-native-paper/src/components/ToggleButton/ToggleButton.tsx -> node_modules/react-native-paper/src/components/ToggleButton/ToggleButtonRow.tsx -> node_modules/react-native-paper/src/components/ToggleButton/ToggleButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Fri Nov 20 2020 19:53:37.980]  LOG      Running "BrowserAppRN" with {"rootTag":1}

[ribeirogab]

An alternative solution would be to import the component directly:

import TextInput from 'react-native-paper/src/components/TextInput/TextInput';

with that, the logs stopped.

I hope you correct this mistake, the community has been suffering for more than two years...

[raajnadar]

There is an open PR to fix this issue.. wait for it to get merged.

[smanzini]

Hello everyone,
running on iOS and experiencing the same issue (below) on a few libraries.
Is there any update so far?
thanks
Stefano

Require cycle: node_modules/react-native-paper/src/components/Checkbox/Checkbox.tsx -> node_modules/react-native-paper/src/components/Checkbox/CheckboxItem.tsx -> node_modules/react-native-paper/src/components/Checkbox/Checkbox.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Sat Dec 05 2020 15:29:30.250] WARN Require cycle: node_modules/react-native-paper/src/components/FAB/FAB.tsx -> node_modules/react-native-paper/src/components/FAB/FABGroup.tsx -> node_modules/react-native-paper/src/components/FAB/FAB.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Sat Dec 05 2020 15:29:30.250] WARN Require cycle: node_modules/react-native-paper/src/components/RadioButton/RadioButton.tsx -> node_modules/react-native-paper/src/components/RadioButton/RadioButtonItem.tsx -> node_modules/react-native-paper/src/components/RadioButton/RadioButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Sat Dec 05 2020 15:29:30.260] WARN Require cycle: node_modules/react-native-paper/src/components/Appbar/Appbar.tsx -> node_modules/react-native-paper/src/components/Appbar/AppbarHeader.tsx -> node_modules/react-native-paper/src/components/Appbar/Appbar.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Sat Dec 05 2020 15:29:30.260] WARN Require cycle: node_modules/react-native-paper/src/components/ToggleButton/ToggleButton.tsx -> node_modules/react-native-paper/src/components/ToggleButton/ToggleButtonRow.tsx -> node_modules/react-native-paper/src/components/ToggleButton/ToggleButton.tsx

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
[Sat Dec 05 2020 15:29:30.270] LOG Running "UbiWalkerReactNat" with {"rootTag":41,"initialProps":{}}

[felix-lambert]

Yes we need some updates on this please :)