'com.android.support:support-v4' dependency issue - reactjs

Question

I need to integrate react-native-beacons-manager to my react-native project on PhpStorm, so i installed the library using the command "yarn install react-native-beacons-manager" and then link it to my project using the command "react-native link react-native-beacons-manager". But now, when i try running my build, the following message is shown:
> Android dependency 'com.android.support:support-v4' has different version for the compile (21.0.3) and runtime (26.1.0) classpath. You should manually set the same version via DependencyResolution
app\build.gradle:
apply plugin: "com.android.application"
import com.android.build.OutputFile
project.ext.react = [
entryFile: "index.js"
]
apply from: "../../node_modules/react-native/react.gradle"
/**
* Set this to true to create two separate APKs instead of one:
* - An APK that only works on ARM devices
* - An APK that only works on x86 devices
* The advantage is the size of the APK is reduced by about 4MB.
* Upload all the APKs to the Play Store and people will download
* the correct one based on the CPU architecture of their device.
*/
def enableSeparateBuildPerCPUArchitecture = false
/**
* Run Proguard to shrink the Java bytecode in release builds.
*/
def enableProguardInReleaseBuilds = false
android {
compileSdkVersion rootProject.ext.compileSdkVersion
buildToolsVersion rootProject.ext.buildToolsVersion
defaultConfig {
applicationId "com.mapapp"
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
}
splits {
abi {
reset()
enable enableSeparateBuildPerCPUArchitecture
universalApk false // If true, also generate a universal APK
include "armeabi-v7a", "x86", "arm64-v8a"
}
}
buildTypes {
release {
minifyEnabled enableProguardInReleaseBuilds
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->
// For each separate APK per architecture, set a unique version code as described here:
// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
def versionCodes = ["armeabi-v7a":1, "x86":2, "arm64-v8a": 3]
def abi = output.getFilter(OutputFile.ABI)
if (abi != null) { // null for the universal-debug, universal-release variants
output.versionCodeOverride =
versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
}
}
}
}
dependencies {
implementation project(':react-native-beacons-manager')
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
implementation "com.facebook.react:react-native:+" // From node_modules
implementation project(':react-native-maps')
}
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
settings.gradle:
rootProject.name = 'mapapp'
include ':react-native-beacons-manager'
project(':react-native-beacons-manager').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-beacons-manager/android')
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':app'
MainApplication.java:
package com.mapapp;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.mackentoch.beaconsandroid.BeaconsAndroidPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.airbnb.android.react.maps.MapsPackage;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
#Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
#Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BeaconsAndroidPackage(),
new MapsPackage()
);
}
#Override
protected String getJSMainModuleName() {
return "index";
}
};
#Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
#Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
android\build.gradle:
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
ext {
buildToolsVersion = "28.0.2"
minSdkVersion = 16
compileSdkVersion = 28
targetSdkVersion = 27
supportLibVersion = "28.0.0"
}
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.2.1'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
task wrapper(type: Wrapper) {
gradleVersion = '4.7'
distributionUrl = distributionUrl.replace("bin", "all")
}
My Android version is 8.1.0.
Edit: When i applied the code from abhinandan sharma, the following message was shown:
> Task :app:compileDebugJavaWithJavac FAILED
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainActivity.java:3: error
: cannot find symbol
import com.facebook.react.ReactActivity;
^
symbol: class ReactActivity
location: package com.facebook.react
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainActivity.java:5: error
: cannot find symbol
public class MainActivity extends ReactActivity {
^
symbol: class ReactActivity
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:5: er
ror: cannot find symbol
import com.facebook.react.ReactApplication;
^
symbol: class ReactApplication
location: package com.facebook.react
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:7: er
ror: cannot find symbol
import com.facebook.react.ReactNativeHost;
^
symbol: class ReactNativeHost
location: package com.facebook.react
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:17: e
rror: cannot find symbol
public class MainApplication extends Application implements ReactApplication {
^
symbol: class ReactApplication
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:19: e
rror: cannot find symbol
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
^
symbol: class ReactNativeHost
location: class MainApplication
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:41: e
rror: cannot find symbol
public ReactNativeHost getReactNativeHost() {
^
symbol: class ReactNativeHost
location: class MainApplication
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainActivity.java:11: erro
r: method does not override or implement a method from a supertype
#Override
^
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:19: e
rror: cannot find symbol
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
^
symbol: class ReactNativeHost
location: class MainApplication
C:\Users\Vex\PhpstormProjects\mapapp\android\app\src\main\java\com\mapapp\MainApplication.java:40: e
rror: method does not override or implement a method from a supertype
#Override
^
10 errors

Answer 1

Add this in your build.gradle file
android -> build.gradle
subprojects {
project.configurations.all {
resolutionStrategy.eachDependency { details ->
if (details.requested.group == 'com.android.support'
&& !details.requested.name.contains('multidex') ) {
details.useVersion "26.1.0"
}
}
}
}
Hope it Helps !