Category Archives: Uncategorized

index=4 count=5 addInArray AddViewInner error React Native maps

React Native apps will fail in Android if you use the react-native-maps module improperly.

The problem is documented:

Components that aren’t declared by this library (Ex: Markers, Polyline) must not be children of the MapView component due to MapView’s unique rendering methodology. Have your custom components / views outside the MapView component and position absolute to ensure they only re-render as needed. Example: Bad:

  <View style={StyleSheet.absoluteFillObject}>
    <MapView style={StyleSheet.absoluteFillObject}>
      <View style={{ position: 'absolute', top: 100, left: 50 }}/>
    </MapView>
  </View>

Good:

  <View style={StyleSheet.absoluteFillObject}>
    <MapView style={StyleSheet.absoluteFillObject} />
    <View style={{ position: 'absolute', top: 100, left: 50 }}/>
  </View>

When you do things the wrong way, you’ll get a RedBox error. The error can have different formats depending on what your code looks like. It might say

index=4 count=3
addInArray
ViewGroup.java

addViewInner
ViewGroup.java

addView
ViewGroup.java

addFeature
AirMapView.java

manageChildren
NativeViewHierarchyManager
...

The initial error message may also say “The specified child already has a parent. You must call removeView() on the child’s parent first”. The stack trace will be similar, but not identical.

The documentation explains how to fix this problem: simply move the improper components outside of MapView. I’ve got a YouTube video that shows the issue, and a simple project at github that demos the error and the fix. I hope this blog post helps you fix your React Native bug!

I’ve got a working React Native app checked into github that demos the issue and the fix. There’s also a YouTube video.

I hope this blog post helps you fix your React Native bug!

If you found this interesting, click the subscribe button below! I write a new post about once a week.

instant run button gone in Android Studio

I’ve been following a slightly out-of-date Android course in order to polish my Android skills. In the course, the instructor discusses the “instant run” button to hot swap code while debugging your app. This button has a lightning bolt icon in the menu.

That didn’t look familiar! When I tried to follow along, I found that my version of Android Studio (3.6) doesn’t have that lightning bolt. I don’t know why they got rid of that lightning bolt, since I think that was a good, easy to recall icon. However, the feature itself is not gone. Now, it looks like a stacked set of horizontal lines. This says nothing to me (it looks kind of like a formatting button – a sheet of paper with lines of text, perhaps).

Anyway, when you hover over it, you’ll see the text “Apply Code Changes”. Here’s a screenshot with the old version on top, and the newer version at the bottom:

Android Studio 3.6 Apply Code Changes button
Apply Code Changes in Android Studio (aka Hot Code Swap)

If you found this interesting, click the subscribe button below! I write a new post about once a week.

editing React files in VS Code results in a Parsing error

Yesterday, I wrote about how I’ve tentatively switched over from Sublime Text editor to VS Code for my projects. Later, I started working on a JavaScript file, and realized that I was missing Sublime’s linter. So I turned on linting in VS Code by following the instructions in the VS Code marketplace for Dirk Bauemer’s ESLint.

Immediately, I got a complaint when I viewed a React file with an import statement at the top, like this:

import React from "react";
...

The word import had a squiggly red line under it. When I hovered over that, I saw the error message “Parsing error: The keyword ‘import’ is reserved eslint”. Like this:

Parsing error: the keyword 'import' is reserved

I found a git issue comment which explained how to fix it (for me! YMMV). Here’s how I did it.

First, I had to install ESLint-plugin-React: npm install -g eslint-plugin-react --save-dev

Then, I had to edit my VS Code json.settings. Here’s how: From the top menu, click File > Preferences > Settings. Your User and Workspace Settings area opens up, and there’s a handy search box at the top. Type in eslint and you’ll see a bunch of search results, including some links to “Edit in settings.json“. Click that link, and your settings.json file opens up. This is just a text file! For me, it is located under my home directory, in .config/Code/User/settings.json (I’m using Ubuntu 16.04). I got confused when I noticed that there was a settings.json file under the node_modules directory for my React project, as well (./node_modules/detect-port-alt/.vscode/settings.json). Don’t get distracted by additional files with that name. Just use the file which is shown by VS Code using the above procedure.

My json.settings originally looked like this:

{
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.insertSpaces": false,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "eslint.trace.server": "messages",
    "eslint.options" : {
        "useEslintrc": false
    }
}

All I had to do was add a new sub-option under eslint.options, as described in the git comment, like this:

{
    "editor.formatOnPaste": true,
    "editor.formatOnType": true,
    "editor.insertSpaces": false,
    "editor.detectIndentation": false,
    "editor.wordWrap": "on",
    "eslint.trace.server": "messages",
    "eslint.options" : {
        "useEslintrc": false,
        "parserOptions": {
            "ecmaVersion": 7,
            "sourceType": "module",
            "ecmaFeatures": {
                "jsx": true,
            }
        }
    }
}

VoilĂ ! The linting error went away immediately; I didn’t have to reload the project or restart VS Code.

If you found this interesting, click the subscribe button below! I write a new post about once a week.