This is my problem.
A problem occurred configuring project ':react-native-vector-icons'.
Could not resolve all dependencies for configuration ':react-native-vector-icons:classpath'.
Could not load module metadata from C:\Users\erick.gradle\caches\modules-2\metadata-2.71\descriptors\com.android.tools.build\gradle-api\3.3.1\fc7e8eef251519086b6ee9788cba4dd2\descriptor.bin
Please refer to this to see if there are any missing parts.
Edit android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
Edit android/settings.gradle to look like this (without the +):
+ include ':react-native-vector-icons'
+ project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
Edit android/app/build.gradle (note: app folder) to look like
this:
dependencies {
+ implementation project(':react-native-vector-icons')
}
Edit your MainApplication.java (deep in
android/app/src/main/java/...) to look like this (note two places to
edit):
package com.myapp;
+ import com.oblador.vectoricons.VectorIconsPackage;
....
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new VectorIconsPackage()
);
}
}
in React Native > 0.60, you do not need to link packages manually. All you need is install your package and run link command. for react-native-vector-icons, remove any code and files you added to android or ios manually, or run react-native unlink react-native-vector-icons.
Remember that for ios, you need to get the last update of cocopods. if you have problem again, in ios folder run pod install command.
I hope this can help you.
Related
My react native project build fails somehow because of this error:
Execution failed for task ':app:mergeDebugNativeLibs'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.MergeNativeLibsTask$MergeNativeLibsTaskWorkAction
> 2 files found with path 'lib/arm64-v8a/libfbjni.so' from inputs:
- C:\Users\Antonio\.gradle\caches\transforms-3\7cca348744e25f57fc2d9f871aa73c9a\transformed\jetified-react-native-0.71.0-rc.0-debug\jni\arm64-v8a\libfbjni.so
- C:\Users\Antonio\.gradle\caches\transforms-3\08b0f5c7017bf081f79b63ea5b053dc0\transformed\jetified-fbjni-0.3.0\jni\arm64-v8a\libfbjni.so
If you are using jniLibs and CMake IMPORTED targets, see
https://developer.android.com/r/tools/jniLibs-vs-imported-targets
Anybody got a clue what could cause the build to fail? I haven't edited any build file and/or removed/installed/upgraded new packages thanks
For me this worked (after reading Tony's link), my version of react was 0.66.0
Changed this file android\app\build.gradle
implementation "com.facebook.react:react-native:+" // From node_modules
to
implementation "com.facebook.react:react-native:0.66.0!!" // From node_modules
Short answer:
in your android/app/build.gradle
change
implementation 'com.facebook.react:react-native:+'
to ---> (replace 0.67.2 with your current react native version)
implementation 'com.facebook.react:react-native:0.67.2!!'
Long answer:
This is happening because all the templates reference the React Native dependency by range, like implementation 'com.facebook.react:react-native:+'. Usually this dependency gets resolved from the local Maven repo in ./node_modules/react-native/android but since it has been published to Maven Central it's now grabbing the very latest RC.
You can resolve this problem by forcing the React Native dependency to the version you expect with something like this implementation 'com.facebook.react:react-native:0.67.2!!' in your app's Gradle file. The !! is shorthand for restricting Gradle from upgrading if your project or its transitive dependencies depend on a newer version.
work for me, if your react native application version >= 0.63 you can update the patch version which should fix your problem.
link: https://github.com/facebook/react-native/issues/35210#:~:text=We%20have%20prepared%20releases%20for%20all%20the%20main%20versions%20of%20react%2Dnative%20with%20an%20hotfix%3A
if not just go to android/build.gradle and then in the allprojects object add the following code with the current version of react native in package.json
configurations.all {
resolutionStrategy {
force 'com.facebook.react:react-native:CURRENT_VERSION_OF_REACT_NATIVE'
}
}
Here's a workaround to fix this problem if you are not using latest version of react-native.
https://github.com/facebook/react-native/issues/35210
Go to android folder -> build.gradle file -> inside allprojects object and add following code. Add react native version from node_modules -> react-native -> package.json // "version": "0.68.2".
configurations.all {
resolutionStrategy {
force 'com.facebook.react:react-native:0.68.2'
}
}
See fb/rn#35204
This is the Official recommended fix!
Found through this issue: https://github.com/facebook/react-native/issues/35210.
Copied from this PR here
For my RN 0.66.0 project I only had to add theses lines:
allprojects {
repositories {
exclusiveContent {
// Official recommended fix for Android build problem with React Native versions below 0.71
// https://github.com/facebook/react-native/issues/35210
// TODO: remove this exclusiveContent section when we upgrade to React Native 0.71 (or above)
// copied from https://github.com/Scottish-Tech-Army/Volunteer-app/pull/101/commits/40a30310ee46194efbaf1c07aef8a0df70231eeb
filter {
includeGroup "com.facebook.react"
}
forRepository {
maven {
url "$rootDir/../node_modules/react-native/android"
}
}
}
}
}
I had the same issue. There is a new patch for react-native now so update it in your package.json.
Mine is
"react-native": "^0.70.3"
and I changed it to
"react-native": "^0.70.5"
which worked for me
The answer lies here depending on the version of your react native. Patches are available for RN version 0.63 and up
https://github.com/facebook/react-native/issues/35210
Tips:
Don't just update react-native package, do an npm install
Clean gradle before running the app
Only add the code below IF your react native version is < 0.63
def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())
allprojects {
configurations.all {
resolutionStrategy {
// Remove this override in 0.65+, as a proper fix is included in react-native itself.
force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
}
}
}
i install react navigation version 6 and i want to use drawer navigation in project
for that install all packages of drawer navigation and make changes in
babel.congile file = plugins: ["react-native-reanimated/plugin"],
Second change in MainActivity.java file
"import android.os.Bundle;"
"import com.facebook.react.bridge.JSIModulePackage"
"import com.swmansion.reanimated.ReanimatedJSIModulePackage"
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
#Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
}
also i changes the andrion app buid.gradlew
project.ext.react = [
enableHermes: true, // clean and rebuild if changing
]
when remove all these changes then Project buid succeeded and run
when i use the JS Module Packages then i face the above error
so My React native version 0.67
so any body can helper
hi #waqas i think you are using the latest version of react native reanimated.
please try to downgrade react native reanimated version to
"react-native-reanimated": "^1.13.2",
may be helps this;
Please refer to this GitHub thread https://github.com/facebook/react-native/issues/35210. It worked for me!
The steps I followed:
Deleted node_modules
Changed "react-native" package version (in the package.json file) from "0.70.1" to the latest patch I found in the thread (that was "0.70.5" for me)
Ran npm install to generate again the node_modules folder (you may want to use yarn install if your project is based on yarn packages)
Then cd android && ./gradlew clean
Finally cd .. (back to root folder) and npm run android to build the app.
Note that I followed the instructions for React Native >= 0.63 (version)
Hope this works for somebody else too!
In order for my application to be approved and visible on both of Google PlayStore and Huawei App Gallery, I am currently maintaining two different branches:
Google branch which has react-native-maps installed but no HMS packages.
Huawei branch which has HMS maps installed but not react-native-maps.
I'm aware of the HMS+GMS approach, but from my experience having a module like react-native-maps that relies heavily on GMS made my app hidden from pure HMS devices, even though my app had ways to check and never navigate to screens that rely on GMS.
Both branches have the same code on the JavaScript side except one file which is used to display the map, this file imports from react-native-maps on GMS phones, and from react-native-hms-map for Huawei phones.
My question is: is there a way to dynamically exclude some files and packages in build time based on the product flavor so that I can use one codebase and just ignore some file when building the APK.
Solution:
Managed to come up with a solution that got my app approved and fully visible on app stores through disabling auto linking for react native maps and manually linking it based on the product flavor.
(Code might not be the cleanest but it's behaving as expected, so any cleanup suggestions would be appreciated)
Steps:
1. Disable manual linking for react-native-maps on android
By creating a file named react-native.config.js in the root directory of the project, and added the following
module.exports = {
dependencies: {
"react-native-maps": {
platforms: {
android: null,
}
}
}
}
2. Added product flavors for Google and Huawei
By adding the following to android/app/build.gradle
...
...
android{
...
...
flavorDimensions "provider"
productFlavors {
google {
dimension "provider"
}
huawei {
dimension "provider"
}
}
...
...
}
...
...
3. Added the following to the same android/app/build.gradle file
...
...
dependencies {
...
...
huaweiImplementation 'com.huawei.hms:location:4.0.2.300'
huaweiImplementation 'com.huawei.hms:hwid:4.0.1.300'
googleImplementation project(':react-native-maps')
...
...
}
...
...
4. Added the following into android/settings.gradle
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
5. Created 2 folders inside android/app/src
folders named: huawei and google with the following structure
6. added a java file inside android/app/src/google/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
import com.airbnb.android.react.maps.MapsPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return new MapsPackage();
}
}
7. added a java file inside android/app/src/huawei/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return null;
}
}
8. added the following to android/app/src/main/java/com/appname/MainApplication.java
import static com.appname.MapPackageChecker.getMapPackage;
...
...
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//start of new lines
if(BuildConfig.FLAVOR.equals("google")){
packages.add(getMapPackage());
}
//end of new lines
return packages;
}
...
...
9. Access flavor name from react native code
I decided to use react-native-build-config for this purpose
Example for navigation component:
import googleMapScreen from "./googleMapScreen.js"; //relies on gms maps
import huaweiMapScreen from "./huaweiMapScreen.js"; //relies on hms maps
import BuildConfig from 'react-native-build-config';
const flavor = BuildConfig.FLAVOR
...
...
<Stack.Screen
name="MapScreen"
component={flavor === "huawei" ? huaweiMapScreen : googleMapScreen}
/>
...
...
10. After adding product flavors, we need to make some changes to our commands
yarn react-native run-android
becomes: yarn react-native run-android --variant=huaweiDebug
or: yarn react-native run-android --variant=googleDebug
./gradlew assembleRelease
becomes: ./gradlew assembleHuaweiRelease
or: ./gradlew assembleGoogleRelease
11. For convenience we can add the following to package.json scripts
"scripts":{
"run-huawei": "yarn react-native run-android --variant=huaweiDebug",
"run-google": "yarn react-native run-android --variant=googleDebug",
}
First of all, Huawei does support react-native-maps. Please check here: https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides-V1/integrating-sdk-0000001050034173-V1
When HMS+GMS is the preferred solution, in the code the APP needs to decide whether to use HMS or GMS based on the availability of HMS and GMS services on the device.
. How to decide whether to use HMS or GMS :
Check that GMS is available
There are also some links for your reference:
React Native Application Detect device support GMS or HMS: https://forums.developer.huawei.com/forumPortal/en/topic/0201200045194610058?fid=0101187876626530001
Choice SDK - an open-source GMS-HMS wrapper: https://forums.developer.huawei.com/forumPortal/en/topic/0201555879126330259?fid=0101187876626530001
You may refer to this.
It's configured in hereļ¼
And run the following command:
Hi there I am integrating google pay api using react-native-gpay but I have got an issue
Steps to install react-native-gpay
1- npm i react-native-gpay
2- react-native link react-native-gpay
3- Added in dependency block of android/app/build.gradle compile project(':react-native-gpay')
4- added import com.reactlibrary.RNGpayPackage; in MainActivity.java
5- Replaced getPackages method in MainApplication.java with below code() >
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNGpayPackage()); // added a package in the list returned by getPackages()
return packages;
}
and also imported in MainApplication.java import com.reactlibrary.RNGpayPackage;
6- My settings.gradle
rootProject.name = 'Pmt'
include ':react-native-gpay'
project(':react-native-gpay').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gpay/android')
apply from: file("../node_modules/#react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
I checked on GitHub too to resolve the issue like this
But I couldn't find any answer. I am getting the following issue in my console
* What went wrong:
Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.
> Could not resolve project :react-native-gpay.
Required by:
project :app
> Unable to find a matching configuration of project :react-native-gpay:
- None of the consumable configurations have attributes.
I tried to import OpenCV via native code but that not worked and I also tried react-native-opencv
library but that library doesn't contain all OpenCV methods.
How can I achieve to use OpenCV in my react-native project?
Thanks in advance.
I have been struggling with OpenCV in react-native for a week now and finally got it working. There is this very good article https://brainhub.eu/blog/opencv-react-native-image-processing/ together with this repo https://github.com/brainhubeu/react-native-opencv-tutorial which describes in details on how to do get it running. However I could not make the code from this repo working by following the steps described or following any other tutorial/video I could find. So in case if anyone is facing the same problem you can try this steps that made the app from the mentioned repo working with OpenCV v4.5 on my Android 10 device.
Open terminal and initialize new React-Native project
npx react-native init NAME_OF_YOUR_PROJECT
Navigate to path /main
cd NAME_OF_YOUR_PROJECT/android/app/src/main
Create new folder named jniLibs
mkdir jniLibs
Download and extract latest OpenCV for Android (tested with OpenCV 4.5) from https://opencv.org/releases/
Rename the "sdk" folder in the extracted folder (OpenCV-android-sdk) to "opencv"
Copy content from extracted folder (OpenCV-android-sdk/opencv/native/libs/) to newly created ./jniLibs
cp -r /PATH_TO_EXTRACTED_OPENCV_FOLDER/OpenCV-android-sdk/opencv/native/libs/ ./jniLibs
Open Android Studio and open Android folder of your projects dir
File -> Open -> select */NAME_OF_YOUR_PROJECT/android
Import OpenCV to your project
File -> New -> Import module -> select the folder you renamed to opencv
(IMPORTANT! Some tutorials say to select the "java" folder inside this folder - don't do that)
Under Gradle Scripts: open build.gradle(:opencv) and build.gradle(YOUR_PROJECT_NAME)
Change both to matching numbers - in my case:
minSdkVersion = 21
compileSdkVersion = 29
Add opencv to projects dependencies
File -> Project Structure -> Dependencies -> select app and press the "+" sign (located "underneath All dependencies") -> check the checkbox next to opencv -> press OK
In build.gradle(YOUR_APP_NAME) change version of gradle to 4.1.0
dependencies {
classpath("com.android.tools.build:gradle:4.1.0")
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
Now open build.gradle(Project: NAME_OF_YOUR_PROJECT .app) and change java version in compile options and add packagin option with some pickfirst option. Also enable multidex option and if you wish to use react-native-camera add the missing dimension strategy. Should look something like this:
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
packagingOptions {
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
pickFirst 'lib/arm64-v8a/libc++_shared.so'
}
defaultConfig {
applicationId "com.stackoverflow" // !!! if copy-pasting change applicationId to yours
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
multiDexEnabled true
missingDimensionStrategy 'react-native-camera', 'general'
}
Open build.gradle(:opencv) and enable multidex option in default config. If you wish to use react-native-camera then also add missing dimension strategy. Should look something like this
defaultConfig {
minSdkVersion 21
targetSdkVersion 29
versionCode openCVersionCode
versionName openCVersionName
multiDexEnabled true
missingDimensionStrategy 'react-native-camera', 'general'
externalNativeBuild {
cmake {
arguments "-DANDROID_STL=c++_shared"
targets "opencv_jni_shared"
}
}
}
Also change the version of java in compile options (must be same as in build.gradle(:app). Should look something like this
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
Add the following user permissions to your /PATH_TO_YOUR_PROJECT/android/app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
Open gradle wrapper properties (/PATH_TO_YOUR_PROJECT/android/gradle/wrapper/gradle.properties) and change the version number of gradle
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-all.zip
Go to /YOUR_PROJECT_PATH/android/app/src/main/java/com/ and create reactlibrary folder then create two files inside that folder:
RNOpenCvLibraryModule.java
RNOpenCvLibraryPackage.java
Fill them with the same content as found on this GIT repo https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/android/app/src/main/java/com/reactlibrary
Open MainApplication.java and add this "packages.add(new RNOpenCvLibraryPackage());" to getPackage() method. Should look something like this:
#Override
protected List<ReactPackage> getPackages() {
#SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new RNOpenCvLibraryPackage()); // ADD THIS
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
return packages;
}
Also add this to the onCreate() method:
#Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
if (!OpenCVLoader.initDebug()) { // ADD THIS
Log.d("OpenCv", "Error while init"); // AND THIS
} // DON'T FORGET THE "}"
}
Dont forget to add proper imports in the begining of your "MainApplication.java"
import org.opencv.android.OpenCVLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
Syncronize your project
File -> Syncronize Your Project with Gradle Files
Open the terminal and navigate to your project. Add this packages
cd /PATH_TO_YOUR_PROJECT/
npm i react-native-easy-toast --save
npm i react-native-svg --save
npm install --save react-native-camera#git+https://git#github.com/react-native-community/react-native-camera.git
(Make sure react-native-camera is installed from GIT repo otherwise you will encounter errors)
Create new folder nammed "src" in your PROJECT_PATH and copy the content of this repos ("https://github.com/brainhubeu/react-native-opencv-tutorial/tree/master/src") "src" folder to yours (/PATH_TO_YOUR_PROJECT/src/)
mkdir src
Copy the content of this repos "https://github.com/brainhubeu/react-native-opencv-tutorial/blob/master/App.js" App.js file and replace the content in your App.js file (located in YOUR_PROJECT_PATH)
Start react-native
npx react-native start
Run on Android device
npx react-native run-android
you can use this lib
react-native-opencv3
or you can exploit this project for using native Java and Objective-C bindings for OpenCV in react-native
If someone is still wondering here's the solution. It is quite some work to just set it up. You will have to write your OpenCV code in Java.
https://stackoverflow.com/a/63116300/10333905
sometimes the while trying to import opencv module, you will not proceed after selecting src directory. both next and finish option will be disabled. for this case.
create a folder "opencv" in the android folder and the copy all the files in the opencv sdk folder into this folder.
in setting.gradle add include ":opencv"
sync now.
goto project structure and add in dependency tab click on '+' icon on top app and select the module dependency and then opencv library.
Note:if the opencv is not present in the module dependency then you have copied the files wrongly. check whether the gralde file present in the files you copied