.overrides is not allowed in preset options React Native

Question

I am new to react native and installed react native navigation 2, however, the app builds successfully but it shows me below error on an emulator.

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{
  "type": "TransformError",
  "lineNumber": 0,
  "errors": [
    {
      "description": "/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/index.js: [BABEL] /Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/index.js: .overrides is not allowed in preset options",
      "lineNumber": 0
    }
  ],
  "name": "SyntaxError",
  "message": "/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/index.js: [BABEL] /Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/index.js: .overrides is not allowed in preset options",
  "stack": "Error: [BABEL] /Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/index.js: .overrides is not allowed in preset options\n    at Object.keys.forEach.key (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/validation/options.js:71:13)\n    at Array.forEach (<anonymous>)\n    at validate (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/validation/options.js:69:21)\n    at instantiatePreset (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/full.js:242:36)\n    at cachedFunction (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/caching.js:42:19)\n    at loadPresetDescriptor (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/full.js:233:45)\n    at config.presets.map.descriptor (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/full.js:68:19)\n    at Array.map (<anonymous>)\n    at recurseDescriptors (/Users/ankitsharma/Documents/Work/FITAAS/MAIN/FittassApp2/FittasApp/node_modules/@babel/core/lib/config/full.js:66:38)"
}
processBundleResult
    BundleDownloader.java:285
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:163
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1162
run
    ThreadPoolExecutor.java:636
run
    Thread.java:764

My android/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
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8

}
    defaultConfig {
        applicationId "com.fittasapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        missingDimensionStrategy "RNN.reactNativeVersion", "reactNative56"
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
   configurations.all {
    resolutionStrategy.eachDependency { DependencyResolveDetails details ->
        def requested = details.requested
        if (requested.group == 'com.android.support' && requested.name != 'multidex') {
            details.useVersion "${rootProject.ext.supportLibVersion}"
        }
    }
}

    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    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]
            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 {
    compile project(':react-native-navigation')

    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-navigation')
    implementation 'com.android.support:design:25.4.0'
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
}

// 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'
}

and android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "27.0.3"
        minSdkVersion = 19
        compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
    }
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        mavenCentral()
        mavenLocal()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven { url 'https://jitpack.io' }
    }
}


task wrapper(type: Wrapper) {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

subprojects { subproject ->
    afterEvaluate {
        if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
           android {
                variantFilter { variant ->
                   def names = variant.flavors*.name
                   if (names.contains("reactNative51") || names.contains("reactNative55")) {
                       setIgnore(true)
                   }
                }
            }
       }
   }
}

package.json

{
  "name": "FittasApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android": "cd ./android && ./gradlew app:assembleDebug && ./gradlew installDebug"
  },
  "dependencies": {
    "@babel/runtime": "^7.1.2",
    "react": "^16.4.1",
    "react-native": "^0.56.1",
    "react-native-navigation": "^2.0.2575",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "^2.1.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "^0.47.0",
    "react-test-renderer": "16.5.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Index.js

import { Navigation } from "react-native-navigation";
import App from './App';

Navigation.registerComponent("navigation.playground.WelcomeScreen", () => App);

Navigation.events().registerAppLaunchedListener(() => {
      Navigation.setRoot({
        root: {
          component: {
            name: "navigation.playground.WelcomeScreen"
          }
        }
      });
    });

I have tried many things but failed.

I had to upgrade to React Native 0.57 to resolve this, as per https://stackoverflow.com/a/52736255/293280. — Joshua Pinter, Apr 03 '19 at 04:52

Blackfaded · Answer 1 · 2018-10-09T21:24:36.793

0

I ran into the same issue and found the solution:

Delete your "metro-react-native-babel-preset": "^0.47.0", "react-navigation" and replace the content of your .babelrc to

{
  "presets": [
    "react-native"
  ],
  "env": {
    "development": {
     "plugins": [
     "transform-react-jsx-source"
     ]
    }
  }
}

After that downgrade react native to 0.55.4" and update your android/build.gradleto missingDimensionStrategy "RNN.reactNativeVersion", "reactNative55"

Here are my working initial dependencies

"dependencies": {
  "react": "16.5.0",
  "react-native": "0.55.4",
  "react-native-navigation": "^2.0.2577"
},
"devDependencies": {
  "babel-jest": "23.6.0",
  "babel-preset-react-native": "^2.1.0",
  "jest": "23.6.0",
  "react-test-renderer": "16.5.0"
}

edited Oct 09 '18 at 21:24

answered Oct 09 '18 at 20:50

Blackfaded

291
2
10

I already solved it by installing a fresh React Native using `react-native init`. Thanks for your help – Ankit S. Oct 10 '18 at 05:50
Did it work with react-native-navigation 2? Because with react-native 0.56 I'm getting errors in the metrobundler. – Blackfaded Oct 10 '18 at 07:23
yes. it is but I am still getting some kind of warning regarding metro bundler. – Ankit S. Oct 10 '18 at 07:50
2

@Ankit can you post the the configuration you used to get it working without downgrading? thanks! – babaloo Oct 24 '18 at 07:14

.overrides is not allowed in preset options React Native

1 Answers1