[Tutorial] Build Rocket.Chat.React Native in Android studio

[yoshida-git-ai]

Well, I'm building a React native project for the first time
Completed setting of some environments such as Node on Windows
New project and Metro launch successfully in powershell
reference:

Next step
Actually import the project in Android studio
Which is your first choice then? (Gradle?)

Then execute some npx commands
I get some errors

First I want to know how to complete the default build
I want to launch APK on my smartphone
I'll then look into the white label

[dnlsilva]

You can run it in different ways:
The simplest is using yarn or npm, running the code: yarn android or npm start android.
In android studio you will need to select the android folder and android studio will do the rest. Then just press play.

However, I recommend that you read the react native documentation, as it will explain more details on how to generate the keys or run them on your own device.
https://reactnative.dev/docs/environment-setup

Our project doesn't have so many particularities to the point of having its own documentation, following the official react native documentation will give you a guide on what to do.

[yoshida-git-ai]

Redevelopment of development environment on Windows

npm run build
npm start

That's the result of the React logo spinning in the browser
I'm sure the development environment will be completed

I copied the contents of "Rocket.Chat.ReactNative-4.26.0" to that project folder
And again, when I do npm run build, I get an error

-　
PS C:\Users\yoshida\Desktop\Android\reacttest\yoshidatest> npm run build
npm ERR! Missing script: "build"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\yoshida\AppData\Local\npm-cache_logs\2022-05-25T06_02_18_705Z-debug-0.log
-　

I haven't checked the log yet, but is the method different?
This is the result of building in the terminal

I'm going to try it in Android studio

[dnlsilva]

You are testing different things, this is react web, react web is different from react native.

[yoshida-git-ai]

Thank you for the difference between React Web and React Native
I made some reconfirmations

From the terminal
React start
Metro start
Emulator error

"Haxm-7.6.5-setup.exe" has been installed

Looking for a solution

PS C:\Users\yoshida\Desktop\Android\reacttest\yoshidatest2\AwesomeTSProject> npx react-native run-android info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. Jetifier found 936 file(s) to forward-jetify. Using 8 workers... info JS server already running. �w�肳�ꂽ�p�X��������܂���B info Launching emulator... error Failed to launch emulator. Reason: No emulators found as an output of emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...

ERROR: JAVA_HOME is set to an invalid directory: C:\Program Files\Android\Android Studio\jre\bin

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

at makeError (C:\Users\yoshida\Desktop\Android\reacttest\yoshidatest2\AwesomeTSProject\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:174:9)
at C:\Users\yoshida\Desktop\Android\reacttest\yoshidatest2\AwesomeTSProject\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:278:16
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async runOnAllDevices (C:\Users\yoshida\Desktop\Android\reacttest\yoshidatest2\AwesomeTSProject\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
at async Command.handleAction (C:\Users\yoshida\Desktop\Android\reacttest\yoshidatest2\AwesomeTSProject\node_modules\@react-native-community\cli\build\index.js:192:9)

info Run CLI with --verbose flag for more details.`

[yoshida-git-ai]

afterwards
Install Gradle on Windows

USB connection of android device

And "npx react-native start" and "npx react-native run-android"

The result looks like this
Display of "BUILD SUCCESSFUL in 7s"
The emulator is not enough from the terminal, but is the environment construction on Windows completed?

I have no problem if I can build Rocket.Chat.React Native in Android studio

[yoshida-git-ai]

Launch Metro in the terminal
"npx react-native run-android" in Android studio

Looks similar result

Am I missing some environment variables? ??

I did it from the windows settings screen without using the shell

[yoshida-git-ai]

I was setting Linux from the middle lol
I set Windows and Android again

"Welcome to React Native" on a USB-connected Android device

I'm going to try building Rocket.Chat

BUILD SUCCESSFUL in 43s 37 actionable tasks: 37 executed info Connecting to the development server... 8081 info Starting the app on "7289dcf9"... Starting: Intent { cmp=com.awesomeproject/.MainActivity }

[yoshida-git-ai]

btw, a project where I see "Welcome to React Native" on a USB connection

Put the file copied from "React Native" in \android in it.

Is the process correct?

I'm working on this page to make it an APK
https://reactnative.dev/docs/integration-with-existing-apps#3-configure-permissions-for-development-error-overlay

Editing permissions is difficult. I don't know which file to edit.

[yoshida-git-ai]

Generate APK for initial react-native project

`cd android

.\gradlew

`

Then install it on your smartphone via Google Drive

It boots but looks like this
Do I need one of the settings?

First of all, I would like to know the correct APK generation method for the "initial react-native project".
After that I also used it in the process of building Rocket.Chat.ReactNative

[yoshida-git-ai]

I've tried several methods but I get an error like this

What does "Main Application" mean?

Do I need to change any settings to build the Git source?

`FAILURE: Build failed with an exception.

• Where:
  Script 'C:\Users\yoshida\Desktop\Android\v4260\YoshidaChatProject\node_modules\react-native-unimodules\gradle.groovy' line: 118

• What went wrong:
  A problem occurred evaluating project ':app'.

You need to have MainApplication in your project

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.`

[yoshida-git-ai]

It looks like the build of v4.26 was successful

But where is the apk?

Most are the default settings.

`> Configure project :rn-root-view
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed in version 5.0 of the Android Gradle plugin.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display more information.

Task :help

Welcome to Gradle 6.7.

To run a build, run gradlew ...

To see a list of available tasks, run gradlew tasks

To see a list of command-line options, run gradlew --help

To see more detail about a task, run gradlew help --task

For troubleshooting, visit https://help.gradle.org

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

BUILD SUCCESSFUL in 1m 33s
1 actionable task: 1 executed
`

[yoshida-git-ai]

android> ./gradlew assembleDebug

Error related to icon when doing this

`* What went wrong:
Execution failed for task ':app:processE2eFossDebugResources'.

A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
Android resource linking failed
C:\Users\yoshida\Desktop\Android\v4260\Rocket.Chat.ReactNative-4.26.0\android\app\build\intermediates\packaged_manifests\e2eFossDebug\AndroidManifest.xml:60: AAPT: error: resource mipmap/ic_launcher (aka chat.rocket.reactnative
:mipmap/ic_launcher) not found.
`

I confirmed that there was an icon. But error

What is the solution to this?

android \ app \ src \ main \ res

[yoshida-git-ai]

hummm

I did some things
-Create release-key.keystore and move to the android / app folder.

-Edit gradle.properties
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****

-Edit build.gradle
... android { ... defaultConfig { ... } signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } } buildTypes { release { ... signingConfig signingConfigs.release } } } ...

But such an error
What other settings do I need?

`* What went wrong:
Execution failed for task ':app:processBugsnagE2eFossReleaseManifest'.

Bugsnag: Your AndroidManifest.xml is missing one or more of
apiKey/versionCode/buildUuid/versionName/package, which are required to upload to bugsnag.
apiKey=null
versionCode=999999999
buildUUID=cab97efa-35e1-4c9d-bcb6-9d81b16ec03d
versionName=4.26.0
applicationId=chat.rocket.reactnative
Manifest file = C:\Users\yoshida\Desktop\Android\603\Rocket.Chat.ReactNative-4.26.0\android\app\build\intermediates\merged_manifest\e2eFossRelease\processBugsnagE2eFossReleaseManifest\out\AndroidManifest.xml
`

[yoshida-git-ai]

Rocket.Chat.ReactNative-4.26.0 \ android \ app \ build \ generated \ assets \ react \ e2eFoss \ release

An "App Bundle" was generated here.

How is the generation of apk without going through the store (play)?

[yoshida-git-ai]

"App.bundle" was not recognized by Google Play.

You need ".apk" or ".abb".

What version did the build confirm to be successful?

Quite difficult

I need someone's help

[yoshida-git-ai]

Rocket.Chat.ReactNative-4.26.0
Rocket.Chat.ReactNative-4.22.0
I've tried various methods with the two versions, but a build error

Is there a version that does not produce the error that includes the gradle setting?

[yoshida-git-ai]

Consumed a day by bugsnag
Is there a way to get rid of it?

[yoshida-git-ai]

I haven't slept for a week

But rechecking the SDK and Gradle versions, the error changed a bit

What kind of error is this? (scans.gradle)
I need help

1 script failure
A problem occurred evaluating root project 'RocketChatRN'.
Could not find method android() for arguments [build_3alshyfqcdxy66ds8hixkzlco$_run_closure1@5bbf4023] on root project 'RocketChatRN' of type org.gradle.api.Project.

[yoshida-git-ai]

Does APK generation for Debug require source changes even if my settings are correct?
Or is my setting not good?

#############################################################################
WARNING WARNING WARNING WARNING WARNING WARNING WARNING WARNING WARNING

Debug level logging will leak security sensitive information!

https://docs.gradle.org/6.9.2/userguide/logging.html#sec:debug_security
#############################################################################