skip to Main Content

I am working on react-native app, for which I am using atom text editor. I am using this https://reactnavigation.org/blog/2017/1/Introducing-React-Navigation for navigation. I installed react-navigation as this says.

npm install –save react-navigation

D:React NativeScheduled>npm install --save react-navigation
[email protected] D:React NativeScheduled
`-- [email protected]
  +-- [email protected]
  +-- [email protected]
  +-- [email protected]
  | `-- [email protected]
  +-- [email protected]
  | `-- [email protected]
  |   `-- [email protected]
  `-- [email protected]

Hope it is installed successfully. Once it is done, I compiled a project which is successful.

D:React NativeScheduled>react-native run-android
Scanning 566 folders for symlinks in D:React NativeSchedulednode_modules (15m
s)
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat install
Debug)...
Observed package id 'add-ons;addon-google_apis-google-22' in inconsistent locati
on 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-google_apis-googl
e-22-1' (Expected 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-go
ogle_apis-google-22')
Observed package id 'add-ons;addon-google_apis-google-23' in inconsistent locati
on 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-google_apis-googl
e-23-1' (Expected 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-go
ogle_apis-google-23')
Observed package id 'add-ons;addon-google_apis-google-22' in inconsistent locati
on 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-google_apis-googl
e-22-1' (Expected 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-go
ogle_apis-google-22')
Observed package id 'add-ons;addon-google_apis-google-23' in inconsistent locati
on 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-google_apis-googl
e-23-1' (Expected 'C:UsersxyzAppDataLocalAndroidSdkadd-onsaddon-go
ogle_apis-google-23')
Incremental java compilation is an incubating feature.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72340Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42340Library UP-TO-DATE
:app:prepareComFacebookFbuiTextlayoutbuilderTextlayoutbuilder100Library UP-TO-DA
TE
:app:prepareComFacebookFrescoDrawee101Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore101Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco101Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline101Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineBase101Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp3101Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0433Library UP-TO-DATE
:app:prepareComFacebookSoloaderSoloader010Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:incrementalDebugJavaCompilationSafeguard UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:transformClassesWithDexForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNative_libsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Google Nexus 6P - 7.0.0 - API 24 - 1440x2560
- 7.0' for app:debug
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 15.101 secs
Running C:UsersxyzAppDataLocalAndroidSdk/platform-tools/adb -s 192.1
68.79.101:5555 reverse tcp:8081 tcp:8081
Starting the app on 192.168.79.101:5555 (C:UsersxyzAppDataLocalAndroi
dSdk/platform-tools/adb -s 192.168.79.101:5555 shell am start -n com.scheduled/
.MainActivity)...
Starting: Intent { cmp=com.scheduled/.MainActivity }

D:React NativeScheduled>

I am restarting react-server with this command, here I am getting a problem UnableToResolveError.

D:React NativeScheduled>react-native start
Scanning 566 folders for symlinks in D:React NativeSchedulednode_modules (15m
s)
 ┌────────────────────────────────────────────────────────────────────────────┐

 │  Running packager on port 8081.                                            │

 │                                                                            │

 │  Keep this packager running while developing on any JS projects. Feel      │

 │  free to close this tab and run your own packager instance if you          │

 │  prefer.                                                                   │

 │                                                                            │

 │  https://github.com/facebook/react-native                                  │

 │                                                                            │

 └────────────────────────────────────────────────────────────────────────────┘

Looking for JS files in
   D:React NativeScheduled

Loading dependency graph...
React packager ready.

Loading dependency graph, done.
error: bundling: UnableToResolveError: Unable to resolve module `react/lib/React
ComponentWithPureRenderMixin` from `D:React NativeSchedulednode_modulesreact
-navigationsrcviewsHeader.js`: Module does not exist in the module map or in
these directories:
  D:React NativeSchedulednode_modulesreactlib
,   D:React Nativenode_modulesreactlib

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start --reset-cache`
.
    at UnableToResolveError (D:/React Native/Scheduled/node_modules/react-native
/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:488:5)
    at p.catch.error (D:/React Native/Scheduled/node_modules/react-native/packag
er/src/node-haste/DependencyGraph/ResolutionRequest.js:366:19)
    at process._tickCallback (internal/process/next_tick.js:103:7)
Bundling `index.android.js`  85.5% (492/532), failed.

I am not sure what went wrong after installation of react-navigation it stuck, it was working before it.

enter image description here

3

Answers


  1. You could use react-native-router-flux package in npm for routing in react-native.

    link : https://www.npmjs.com/package/react-native-router-flux

    Login or Signup to reply.
  2. This happen to me more often and i couldn’t find where is the problem but mostly when i use “babael” it happen.
    rebuilding app will solve the issue .
    and three step as react suggest you will be usful

    1. Clear watchman watches: watchman watch-del-all.
    2. Delete the node_modules folder: rm -rf node_modules && npm install.
    3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start --reset-cache
      .
    Login or Signup to reply.
  3. Same problem with me. Just delete the code of 12 line(witch import ReactComponentWithPureRenderMixin but not exist in react and never used) in yourprojectnode_modulesreact-navigationsrcviewsHeader.js will be fine.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search