Running the React Native App in Linux

I am trying to run the ReactNative client in an emulator on my laptop running Manjaro (an Arch Linux based distro). I am following the instructions in build.md, but on running npm run start-android with the emulator running I get the following output in the terminal:

[madguy@NoMansLand ReactNativeClient]$ npm run start-android

> Joplin@0.8.0 start-android /home/madguy/work/joplin_gsoc/joplin/ReactNativeClient
> react-native run-android

warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-push-notification: https://github.com/zo0r/react-native-push-notification#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-camera (to unlink run: "react-native unlink react-native-camera")
  - react-native-document-picker (to unlink run: "react-native unlink react-native-document-picker")
  - react-native-file-viewer (to unlink run: "react-native unlink react-native-file-viewer")
  - react-native-fs (to unlink run: "react-native unlink react-native-fs")
  - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")
  - react-native-image-resizer (to unlink run: "react-native unlink react-native-image-resizer")
  - react-native-push-notification (to unlink run: "react-native unlink react-native-push-notification")
  - react-native-quick-actions (to unlink run: "react-native unlink react-native-quick-actions")
  - react-native-securerandom (to unlink run: "react-native unlink react-native-securerandom")
  - react-native-sqlite-storage (to unlink run: "react-native unlink react-native-sqlite-storage")
  - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")
  - react-native-version-info (to unlink run: "react-native unlink react-native-version-info")
  - rn-fetch-blob (to unlink run: "react-native unlink rn-fetch-blob")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1235 file(s) to forward-jetify. Using 8 workers...
info Starting JS server..

And the emulator shows nothing

While running npm run start shows:
[madguy@NoMansLand ReactNativeClient]$ npm run start

> Joplin@0.8.0 start /home/madguy/work/joplin_gsoc/joplin/ReactNativeClient
> node node_modules/react-native/local-cli/cli.js start --reset-cache

warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-push-notification: https://github.com/zo0r/react-native-push-notification#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚                                                                              β”‚
β”‚  Running Metro Bundler on port 8081.                                         β”‚
β”‚                                                                              β”‚
β”‚  Keep Metro running while developing on any JS projects. Feel free to        β”‚
β”‚  close this tab and run your own Metro instance if you prefer.               β”‚
β”‚                                                                              β”‚
β”‚  https://github.com/facebook/react-native                                    β”‚
β”‚                                                                              β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

Looking for JS files in
   /home/madguy/work/joplin_gsoc/joplin/ReactNativeClient 

warning: the transform cache was reset.
Loading dependency graph, done.

And the emulator still shows nothing.

Can someone please help me out?

@tessus, can you help me out with this?

(Moved thread to Development)

I’m doing my development on macOS. The Linux I have available, is a headless server without DE, nor X11 or any other form of UI. I exclusively use the terminal version of Joplin on Linux.

Therefore my knowledge of the dev environment on Linux for the desktop and mobile apps is basically non-existent.

But there might be similarities which could help in narrowing down this problem.

When I start react-native run-android, all components are started automatically: the compile run, the metro server, the emulator. In the past, I had to start the emulator manually.

I’m missing the output where it tells you which emulator is used. Did you start the emulator by yourself?

At the end you should see something like this:

> Task :app:installDebug
04:46:38 V/ddms: execute: running am get-config
04:46:40 V/ddms: execute 'am get-config' on 'emulator-5554' : EOF hit. Read: -1
04:46:40 V/ddms: execute: returning
Installing APK 'app-debug.apk' on 'Nexus_5X_API_29_x86(AVD) - 10' for app:debug
04:46:40 D/app-debug.apk: Uploading app-debug.apk onto device 'emulator-5554'
04:46:41 D/Device: Uploading file onto device 'emulator-5554'
04:46:41 D/ddms: Reading file permision of /Users/tessus/data/work/joplin/ReactNativeClient/android/app/build/outputs/apk/debug/app-debug.apk as: rw-r--r--
04:46:42 V/ddms: execute: running pm install -r -t "/data/local/tmp/app-debug.apk"
04:46:44 V/ddms: execute 'pm install -r -t "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
04:46:44 V/ddms: execute: returning
04:46:44 V/ddms: execute: running rm "/data/local/tmp/app-debug.apk"
04:46:45 V/ddms: execute 'rm "/data/local/tmp/app-debug.apk"' on 'emulator-5554' : EOF hit. Read: -1
04:46:45 V/ddms: execute: returning
Installed on 1 device.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings

BUILD SUCCESSFUL in 34s
317 actionable tasks: 13 executed, 304 up-to-date
info Connecting to the development server...
8081
info Starting the app on "emulator-5554"...
Starting: Intent { cmp=net.cozic.joplin/.MainActivity }

What is your output?

I did start the emulator by myself, So I will try running the command without the emulator running and report back.

I’ll be heading to bed, so don’t think I’ve abandoned you.

Ah, right. There is an 11 hour time zone difference

No, even without the emulator running, the output remains the same.
Btw, you use react-native run-android. Does that mean you have installed react-native globally?

Please when you ran react-native run-android did it install the app???

Before running react-native run-android start your emulator then run adb devices to see if your emulator is connected. when the app installs, do react-native start. Then open the app and double tap R on your keyboard to reload the app

How are you running react-native start-android? As far as I know you have to install the react-native-cli globally to run the previous command

Yeah you must set up react-native on your machine which involves installing the react-native-cli

No the app doesn’t install

Have you followed the react-native setup ?

Yes I have followed the instructions on that page

Yes, react-native-cli@2.0.1.

@benndip to whom was the question directed? You either have to click the reply for a specific post or mention the person you are addressing.

When I run it, the app gets automatically installed.

This is all that I get:

[madguy@NoMansLand ReactNativeClient]$ react-native run-android
warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-push-notification: https://github.com/zo0r/react-native-push-notification#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-camera (to unlink run: "react-native unlink react-native-camera")
  - react-native-document-picker (to unlink run: "react-native unlink react-native-document-picker")
  - react-native-file-viewer (to unlink run: "react-native unlink react-native-file-viewer")
  - react-native-fs (to unlink run: "react-native unlink react-native-fs")
  - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")
  - react-native-image-resizer (to unlink run: "react-native unlink react-native-image-resizer")
  - react-native-push-notification (to unlink run: "react-native unlink react-native-push-notification")
  - react-native-quick-actions (to unlink run: "react-native unlink react-native-quick-actions")
  - react-native-securerandom (to unlink run: "react-native unlink react-native-securerandom")
  - react-native-sqlite-storage (to unlink run: "react-native unlink react-native-sqlite-storage")
  - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")
  - react-native-version-info (to unlink run: "react-native unlink react-native-version-info")
  - rn-fetch-blob (to unlink run: "react-native unlink rn-fetch-blob")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1235 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...

And no emulator runs nor does an app gets installed

This problem still persists in a fully updated Manjaro 19.0.2.

[deepmaj@DeepLaptop ReactNativeClient]$ npm run start-android

> Joplin@0.8.0 start-android /home/deepmaj/work/joplin_gsoc/joplin/ReactNativeClient
> react-native run-android

warn The following packages use deprecated "rnpm" config that will stop working from next release:
  - react-native-push-notification: https://github.com/zo0r/react-native-push-notification#readme
Please notify their maintainers about it. You can find more details at https://github.com/react-native-community/cli/blob/master/docs/configuration.md#migration-guide.
error React Native CLI uses autolinking for native dependencies, but the following modules are linked manually: 
  - react-native-camera (to unlink run: "react-native unlink react-native-camera")
  - react-native-document-picker (to unlink run: "react-native unlink react-native-document-picker")
  - react-native-file-viewer (to unlink run: "react-native unlink react-native-file-viewer")
  - react-native-fs (to unlink run: "react-native unlink react-native-fs")
  - react-native-image-picker (to unlink run: "react-native unlink react-native-image-picker")
  - react-native-image-resizer (to unlink run: "react-native unlink react-native-image-resizer")
  - react-native-push-notification (to unlink run: "react-native unlink react-native-push-notification")
  - react-native-quick-actions (to unlink run: "react-native unlink react-native-quick-actions")
  - react-native-securerandom (to unlink run: "react-native unlink react-native-securerandom")
  - react-native-sqlite-storage (to unlink run: "react-native unlink react-native-sqlite-storage")
  - react-native-vector-icons (to unlink run: "react-native unlink react-native-vector-icons")
  - react-native-version-info (to unlink run: "react-native unlink react-native-version-info")
  - rn-fetch-blob (to unlink run: "react-native unlink rn-fetch-blob")
This is likely happening when upgrading React Native from below 0.60 to 0.60 or above. Going forward, you can unlink this dependency via "react-native unlink <dependency>" and it will be included in your app automatically. If a library isn't compatible with autolinking, disregard this message and notify the library maintainers.
Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
Jetifier found 1235 file(s) to forward-jetify. Using 8 workers...
info Starting JS server...

Please can someone help me out? I am being unable to do any development/bug fix which involves the android client thanks to this…

It’s the complete output?

You can also try to build and run manually:

  • Start the emulator
  • cd android && ./gradlew installDebug
  • cd ReactNativeClient && npm start

Yes that is all the output that is produced. I will try the manual build you suggested.