Common React Native Errors I have faced while Learning React Native and how I solved it

Starting or learning new programming language, tool or platform will let you come face to face with similar, unique or completely different type of error messages while developing or building a product.

It is always frustrating to spend countless of hours and sometimes days trying to figure out what is causing an error in your code and how to fix it.

Although, you can get help online or through a mentor but one way to make sure that if you face the same problem again in future that you can remember how you solve it is to document your solution.

These solutions will serve as a reference point or reminder in the future if you have forgotten how you arrived to your solution.

Since I started learning React Native and sharing my journey with you guys, I decided to create this article where I will be documenting from the smallest to the biggest issues and errors I have encountered while working with React Native.

In as much as I know it might help other people, I will also like to encourage you to use the comment box to share the errors you have faced while developing React Native application and how you solved it.

You can send me the information directly through my contact form if you will like me to include it in this articles.

The advantage of have this post is that finding solution to our problem immediately will help us learn faster and also cut down the development time considerably.

Below is some of the issues. This is a work in progress and I will keep updating it.

 

React native Mismatch Error: Javascript version: 0.50.3 Native version 0.49.5

The error message in this situation is easy to understand. This normally happens when you update your react native version or when you use framework or module that contain a lower version of Javascript than react native.

1. One option is to downgrade your React Native version that is compatible with the native version.

2. You can upgrade all your dependencies

 

React native error cannot find module ‘./assets/empty-module.js’

The react native error cannot find module ‘./assets/empty-module.js’ usually occur when the server is not running. You can solve this issue by starting the server using the command – react-native start

 

Packager can’t listen on port 8081 – $ react-native start –port=8088

I experience this error Packager can’t listen on port 8081 – $react-native start-port=8088 because I have an existing connection with a command line interface and I was trying to connect again using another CLI.

This can also happen if another process or software is using that port.

 

Could not delete path

I can’t really remember why I was getting this error. Android Studio is complaining that it cannot delete some files in the build folder.

This can occur when you open this project in android studio and javascript IDE. I usually close the javascript IDE, clean and rebuild my project.

Another option is to delete the build folder and recompile it again.

 

react native could not find com.android.tools.build:gradle:3.0.0

I could not also understand why react native was complaining that it could not find com.android.tool.build:gradle:3.0.0. When I looked at my gradle configuration, everything looks great but I keep getting this issues.

The way I solved it is to add google() in gradle project level under buildScript like below

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

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

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

 

UnableToResolveError: Unable to resolve module ‘AccessibilityInfo’

I am yet to find a solution to this issues.

 

Raw text cannot be used outside of a <Text> tag. Not rendering string: “”

This is another error you might come across when developing react native application. It is very simple error and the description points to what might be the issue.

In my case, I wrote the code below and it throws this error.

render() {
    return (
      <View style={styles.container}>
      <View style={styles.firstrow}> </View>
      </View>
    );
}

The issue if you look critically, is the space between the inner View component. When I removed the space, the code works perfectly.

render() {
    return (
      <View style={styles.container}>
      <View style={styles.firstrow}></View>
      </View>
    );
}

 

Add a Comment