To Run React Native Application
1. Start METRO bundler from a Terminal
npm start
2. Open another terminal to launch the project on an emulator
npx react-native run-android
Note : It will build the project and launch the emulator, if it error “command failed: ./gradlewarapper: installdebug”
3. To Resolve that issue
1. Open the android folder in android studio
File – Open – Project – Android – Open
2. By default the gradle build running, let it finish
3. File-> Sync project with gradle file (select), it will run , let it finish
4. Menu->Build->Clean Project (let it done)
5. Menu->Build->Rebuild Project
4. Go back to terminal & run
5. npx react-native run-android
Note : We can clean using- cd android && ./gradlew clean
Fixed : React Native new Android Project build issue
II Generate Debug APK File
React Native | How to generate debug APK file and open on your phone without USB cable
commands(in case the article gets taken down):
1:
react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res
2:
cd android
3:
./gradlew assembleDebug (if build error occur , remove the “./”)
4. we can also generate apk through package.json
“generateDebuApk”:”react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res && cd android && gradlew assembleDebug && cd ..”
Note : if assests folder does not exist in “C:\***\****-customer-app\android\app\src\main”.
create the assests folder inside the main “assets”
React Native Generate APK — Debug and Release APK
=========
Ref
1. React-native tutorial # 28 Generate APK file – code step by step
2. Setting up Mac OS for React Native Development – Cryce Truly
Android Build Errors
———————-
There are two grade files –
android/build.grade
app/build.gradle
https://stackoverflow.com/questions/56980369/react-native-android-build-fails-from-lottie-react-native-module
========
We can clean using
cd android && ./gradlew clean
=======
React Native | How to generate debug APK file and open on your phone without USB cable
commands(in case the article gets taken down):
1:
react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res
2:
cd android
3:
./gradlew assembleDebug (if build error occur , remove the “./”)
4. we can also generate apk through package.json
“generateDebuApk”:”react-native bundle –platform android –dev false –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res && cd android && gradlew assembleDebug && cd ..”
Note : if assests folder does not exist in “C:\***\****-customer-app\android\app\src\main”.
create the assests folder inside the main “assets”
=====
Error 2:
Task :lottie-react-native:extractDebugAnnotations FAILED android
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ‘:lottie-react-native:processReleaseResources’.
Solution :
https://airbnb.io/lottie/#/react-native
Android
react-native link lottie-react-native
Did not work this step :
build.gradle :-
dependencies {
…
compile project(‘:lottie-react-native’)
…
}
==============
Error 3 : Build success but loading in mobile getting this red error
com.facebook.react.common.javascriptException: unexpected token’:’
Solution :
1. Add this into .bablerc
{
“presets”: [[“module:metro-react-native-babel-preset”,{
“unstable_disableES6Transforms”: true
}]],
https://github.com/babel/babel/issues/14139#issuecomment-1011836916
2.
npx react-native start –reset-cache
npx react-native run-android
(or)
Try installing the dependencies again. That worked for me-
1.) yarn/npm install
2.) yarn/npm start –reset-cach
================
https://github.com/facebook/react-native/issues/32875
Unhandled JS Exception: Unexpected token Expected a ‘)’ or a ‘ after a parameter declaration.
npx react-native info
Steps to reproduce
step 1: delete file yarn.lock and Podfile.lock
step 2: run ‘yarn install’
step 3: run ‘cd ios and Pod install’
step 4: build app
==============
Error :
Execution failed for task ‘:app:mergeDebugNativeLibs’.
1.check the sdk version min and target in
“android/build.gradle”
buildscript {
ext {
buildToolsVersion = “31.0.0”
supportLibVersion = “28.0.0”
minSdkVersion = 23
compileSdkVersion = 31
targetSdkVersion = 31
}
2.app/build.gradle
============
Error : Build Gradle Error Could not get unknown property ‘compile’
if gradle does not match this error can occur
1. “android/build.gradle”
dependencies {
classpath(‘com.android.tools.build:gradle:4.1.2’)
// compile project(‘:lottie-react-native’)
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
2. “android\gradle\wrapper\gradle-wrapper.properties”
distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-bin.zip
3. In “Android Studio”
a. select “app”
b. File -> Project Structure ->
Android Gradle Plugin Version – 4.1.2
Gradle Version – 6.5
——-
Another solution :
RN 0.64.1 For the dependence, I use
classpath(‘com.android.tools.build:gradle:7.0.0’)
and for the wrapper (gradle-wrapper.properties)
distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-all.zip
—-
Latest Gradle Solution :
https://stackoverflow.com/questions/57116714/android-studio-error-could-not-install-gradle-distribution-from-file-c-users
From Android studio click “In windows”(Ctrl + Alt + s) OR from menu (File > Settings) will open Settings.
Build, Execution, Deployment > Build Tools > Gradle
set Gradle user home to .gradle path folder ex: C:/Users/YOUR_UN/.gradle
The current version is 7.0.2, so these the current auto configured files
gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-7.0.2-bin.zip
build.gradle
classpath “com.android.tools.build:gradle:7.0.2”
———
Note :
File -> Project Structure ->
Android SDK Loation (This location used for new projects and for existing projects that dont have a locale properties file with sdk.dir property)
C:\Users\HP\AppData\Local\Android\Sdk
JDK Loation(The Java Development kit ) you want Gradle to use when building your project
C:\Program Files\Java\jdk-15.0.1
—–
Error :
A problem occurred evaluating settings ‘pqr_1’.
> Could not read script ‘C:\xyz\pqr_main\pqr-customer-app\node_modules\@react-native-community\cli-platform-android\native_modules.gradle’ as it does not exist.
Solution :
npm i @react-native-community/cli-platform-android –save
——
Error :
Error: Unable to resolve module `react-native-localize` from `App\Screens\OrderHistory.js`: react-native-localize could not be found within the project.
Solution :
npm install –save react-native-localize
—
Gradle :
Gradle build tool Tutorial
https://www.tutorialspoint.com/gradle/index.htm
Gradle is an open source and advanced build automation tool. It builds up on ANT, Maven and lvy repositories and supports groovy based Domain Specific Language (DSL) over the XML.
Gradle is groovy based build automation tool. Before you begin this tutorial, we expect that you have knowledge about JAVA and Groovy programming languages
Gradle Wrapper
Gradle Wrapper allows you to execute the Gradle builds on machines, where Gradle is not installed. This is useful for continuous integration of servers.
JDK and Groovy are the prerequisites for Gradle installation.
Difference between clean, gradlew clean
https://stackoverflow.com/questions/34005713/difference-between-clean-gradlew-clean
1) ./gradlew clean
Uses your project’s gradle wrapper to execute your project’s clean task. Usually, this just means the deletion of the build directory.
2) ./gradlew clean assembleDebug
Again, uses your project’s gradle wrapper to execute the clean and assembleDebug tasks, respectively. So, it will clean first, then execute assembleDebug, after any non-up-to-date dependent tasks.
3) ./gradlew clean :assembleDebug
Is essentially the same as #2. The colon represents the task path. Task paths are essential in gradle multi-project’s, not so much in this context. It means run the root project’s assembleDebug task. Here, the root project is the only project.
4) Android Studio –> Build –> Clean
Is essentially the same as ./gradlew clean. See here.
—
You can also use
./gradlew clean build (Mac and Linux) -With ./
gradlew clean build (Windows) -Without ./
it removes build folder, as well configure your modules and then build your project.
i use it before release any new app on playstore.
—
You should use this one too:
./gradlew :app:dependencies (Mac and Linux) -With ./
gradlew :app:dependencies (Windows) -Without ./
The libs you are using internally using any other versions of google play service.If yes then remove or update those libs.
===============
NPM installed location in Windows :
C:\Users\username\AppData\Roaming
============
Error :
More than one file was found with OS independent path ‘lib/x86/libusb.so’