The 'Image' component does not have a propType defined for the native prop 'RCTImageView.overlayColor' with a native type of 'number'

Greetings, I am encountering an issue while attempting to run my react native application on Android. The app has been functioning flawlessly on iOS for several months, but this is our first endeavor at utilizing it on Android. We are using react-native .19. Despite numerous attempts such as restarting the packager multiple times and rebooting Android Studio, the error persists. Additionally, I have gone to the extent of deleting the entire node_modules folder and reinstalling everything, with no success.

'Image' has no propType for native prop 'RCTImageView.overlayColor' of native type 'number'

Settings.gradle

rootProject.name = 'MassTuning'

include ':app'
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons//Users/kvieira/code/masstuning/node_modules/react-native-vector-icons/android')
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')
include ':react-native-image-picker'
project(':react-native-image-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-image-picker/android')
include ':react-native-mail'
project(':react-native-mail').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mail/android')
include ':react-native-admob'
project(':react-native-admob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-admob/android')

build.gradle

apply plugin: "com.android.application"

import com.android.build.OutputFile

/**
 * The react.gradle file registers two tasks: bundleDebugJsAndAssets and bundleReleaseJsAndAssets.
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"]
 * ]
 */

apply from: "react.gradle"

/**
 * Set this to true to create three separate APKs instead of one:
     *   - A universal APK that works on all devices
     *   - 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 23
        buildToolsVersion "23.0.1"

        defaultConfig {
            applicationId "com.masstuning"
            minSdkVersion 16
            targetSdkVersion 22
            versionCode 1
            versionName "1.0"
            multiDexEnabled true
            ndk {
                abiFilters "armeabi-v7a", "x86"
            }
        }
        splits {
            abi {
                enable enableSeparateBuildPerCPUArchitecture
                universalApk true
                reset()
                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
                }
            }
        }
    }

    configurations.all {
      resolutionStrategy {
        force 'com.google.android.gms:play-services-ads:8.4.0'


}
}

dependencies {
    compile project(':react-native-admob')
    compile project(':react-native-mail')
    compile project(':react-native-image-picker')
    compile project(':react-native-maps')
    compile project(':react-native-linear-gradient')
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:0.19.+"

}

MainActivity.java

package com.masstuning;

import com.facebook.react.ReactActivity;
import com.sbugert.rnadmob.RNAdMobPackage;
import com.chirag.RNMail.RNMail;
import com.imagepicker.ImagePickerPackage;
import com.AirMaps.AirPackage;
import com.BV.LinearGradient.LinearGradientPackage;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "MassTuning";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

   /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.asList(
        new MainReactPackage(),
        new RNAdMobPackage(),
        new RNMail(),
        new ImagePickerPackage(),
        new AirPackage(),
        new LinearGradientPackage());
    }
}

Answer №1

Problem resolved! Upgrading to react version 20 fixed the issue for good.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why am I receiving the error message 'Uncaught TypeError: results is not a function' while utilizing the map function?

Struggling to grasp the concept of the map function and puzzled by why my output is showing [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined], even though I've provided the correct this value as per the documenta ...

Tips for transferring the ngRepeat "template" to an ngDirective with transclude functionality

Example: http://plnkr.co/edit/TiH96FCgOGnXV0suFyJA?p=preview In my ng-directive named myDirective, I have a list of li tags generated using ng-repeat within the directive template. My goal is to define the content of the li tag as part of the myDirective ...

Determine if an object has been submitted in a MEAN / AngularJS application

I am working with an AngularJS frontend and using Express, Node, and MongoDB on the backend. My current setup is as follows: // my data to push to the server $scope.things = [{title:"title", other properties}, {title:"title", other properties}, {titl ...

Generate a hyperlink that launches the correct mapping application on all devices, providing directions to the desired destination

It seems that finding an excellent cross-device article is harder than anticipated. I have been trying to create a link that will either open the mobile device's browser and navigate to Google Maps or directly launch a maps app (Apple Maps or Google M ...

What changes can I expect for my app after the Device Reset Date?

My Apple developer subscription is set to expire soon, so I just renewed it. However, I noticed that the Device Reset Date still shows as August 27, 2016. This is my first time renewing my membership and I'm not sure what steps I should take with my a ...

After a short delay, make sure to open a new tab when clicking to bypass any popup blockers without relying on Ajax technology

Before you downvote, please consider my rationale. I am in the process of developing a web-based educational project that includes an art section. When a user clicks on a button, an element containing a picture of an art piece appears. I then want to open ...

What is the process of setting up a subelement in a Vue array?

I am currently working on incorporating an array read feature using Vue.js: {{ this.locations[this.record.carton.LocationID - 1].Location }} Although the code functions properly during runtime, it throws an error upon initial loading: app.js:55125 [Vue wa ...

Loop variables undergoing change

I am currently working on a loop that fetches data from an API and then processes it to populate a simple array with the retrieved information. Promise.all(promises.map(obj => API.functionName(obj))).then((response) => { var index = startingDate; ...

This code is only functional on JSFiddle platform

I encountered an issue with my code recently. It seems to only work properly when tested on jsfiddle, and I can't figure out why it's not functioning correctly on codepen or when run from local files. Why is this code specific to jsfiddle? When ...

Determine the frequency of a word in Java programming language

Ticket Type Priority Assigned Incident 3 - Medium Acknowledgement Service Request 3 - Medium Assigned Problem 2 - High Assigned Incident 3 - Medium Assigned Service Request 3 - Medium Closed Incident 3 - Medium Assigned Service ...

JavaScript Canvas - Preserve Image Transparency

I have been trying to download a snapshot of a canvas using the code below: var strMime = "image/png"; var canvas = document.getElementsByTagName('canvas')[0]; var link = document.createElement("a"); link.href = canvas.toDataURL( ...

Can you explain the purpose of using the 'apply' method in this particular implementation of memoization in JavaScript?

_.memoize = function(func) { var cache = []; return function(n){ if(cache[n]){ return cache[n]; } cache[n] = func.apply(this,arguments); return cache[n]; } }; I'm curious about the usage of 'this' in func.appl ...

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

What is the best way to transform a BLOB Buffer into a Base64 string using Swift?

I am facing an issue where I have stored a base64 string as a BLOB in Swift, but now I am struggling to figure out how to convert the buffered blob back into a UIImage. When storing it, Blob converts it into buffer, here is what I did: let image: UII ...

Making HTTP requests with axios in Node.js based on multiple conditions

I'm facing an issue with making get calls using axios to both activeURl and inactiveURl. The goal is to handle error messages from the activeUrl call by checking data from the inactiveUrl. However, I keep receiving error messages for the inactiveURL e ...

Similar to session_start() and $_SESSION in Node.js/Express

I'm on a quest to discover the equivalent of session_start() and $_SESSION in Node.js/Express so I can store the current user's id in the session. Most tutorials and videos recommend using express-session, but I've come across a warning: ...

How should v-select, item-text, and item-value be correctly utilized?

When I make an API call, the response is returned. from another perspective. I store the result of the API call in a variable called result = [];. To create a dropdown list, I use v-select with :items="result". If I want the services.name to ...

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

Variations in how words are organized within a sentence

Can you help me devise an algorithm to identify all possible combinations of word groupings in a sentence without changing the order of the words? For example, for the sentence "the test case phrase," the various combinations would include: ['the te ...

Implementing hashing with resumable.js

Looking for a way to include hashing in resumable.JS by utilizing the "fileAdded" event hook. Any suggestions on how to add hash to each chunk? ...