Ryan Brockhoff
Ryan Brockhoff

Reputation: 706

React Native: TypeError: Undefined is not a Function. Evaluating( r.render() )

screenshot

Conditions:

Error occurs when opening up installed App (Android, with VS Code. Not Android Studio)

I ran ./gradlew assembleRelease and ./gradlew installRelease. Build is successful. I did not recently install anything. Was successfully build apk file and running installed. Then I brought in react-native-elements and used their {Icon}. But that has been removed since. And doubtfully the cause of the issue.

Error is located on line 66 of my android.bundle file.

Error on NPM START

When I run npm start for the emulator, I receive the following error: React Native Version Mismatch. Javascript: 0.57.2. Native: 0.55.4. I have tried multiple times to update to 0.57.2 and replace all occurrences where I call for 0.55.4. I did update my build.gradle file to reflect 0.57.2.

Steps to Resolve:

I have deleted node_modules folder and package lock file and reinstalled via npm i. Tried a few maven configurations. And have updated my bundle manually via:

react-native bundle --platform android --dev false --entry-file App.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

I have tried to include all files you would likely ask for. Any help is greatly appreciated. Happy to provide any information that would help resolve this bug.

Package.JSON

{
  "name": "blok",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject",
    "test": "jest"
  },
  "dependencies": {
    "babel-preset-react-native": "^5",
    "expo": "^30.0.1",
    "jest": "^23.6.0",
    "react": "16.3.1",
    "react-native": "^0.57.2",
    "react-native-animatable": "^1.3.0",
    "react-native-fbsdk": "^0.8.0",
    "react-native-router-flux": "^4.0.5",
    "react-redux": "^5.0.7",
    "react-router-native": "^4.3.0",
    "redux": "^4.0.0",
    "remote-redux-devtools": "^0.5.13"
  },
  "jest": {
    "preset": "react-native"
  },
  "devDependencies": {
    "babel-preset-react-native": "^5",
    "schedule": "^0.4.0"
  }
}

build.gradle (root)

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

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.4'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

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


 // url "$rootDir/../node_modules/react-native/android"

build.gradle (android/app)

apply plugin: "com.android.application"

import com.android.build.OutputFile


project.ext.react = [
    entryFile: "App.js",
    bundleAssetName: "index.android.bundle",
    bundleInRelease: true,
]

apply from: "../../node_modules/react-native/react.gradle"

def enableSeparateBuildPerCPUArchitecture = false

def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 28
    buildToolsVersion "28.0.3"

    defaultConfig {
        applicationId "com.blok"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode 2
        versionName "2.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

    signingConfigs {
    release {
        storeFile file(BLOK_RELEASE_STORE_FILE)
        storePassword BLOK_RELEASE_STORE_PASSWORD
        keyAlias BLOK_RELEASE_KEY_ALIAS
        keyPassword BLOK_RELEASE_KEY_PASSWORD
    }
}
    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"
            signingConfig signingConfigs.release
        }
    }
    // 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 fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    // compile("com.facebook.react:react-native:0.57.2") { force = true }
    compile "com.facebook.react:react-native:+" // From node_modules'
    
}


task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

MainApplication.java

package com.blok;

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

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 true;
      // return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "App";
      // return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

gradle.properties

android.enableAapt2=false

Upvotes: 3

Views: 2235

Answers (1)

Carlos A. Lozano
Carlos A. Lozano

Reputation: 56

I got the same error in react-native 0.57.3. To fix this error: I had to install metro-react-native-babel-preset and changing in .babelrc and babel.config.js:

const presets = ['react-native', '@babel/preset-flow'];

to

const presets = ['module:metro-react-native-babel-preset', '@babel/preset-flow'];

Upvotes: 1

Related Questions