Android Studio Symbols Support

[cortinico]

tl;dr: From React Native 0.71, you'll be able to open Android project with New Architecture inside Android Studio and have proper autocompletion. This was a broken developer experience flow with the New Architecture in .68 .69 and .70 that is now fix.

Hi all,
Similarly to my other post, I'd like to showcase a change that it’s lined up to be shipped with .71 Fix for Red Symbols on Android Studio.

What are red symbols?

Red symbols are a term used in the IDE ecosystem to refer to classes/types/references which fails to be correctly discovered and are showed in red in the IDE.

When you're is experiencing a red symbol, you might still be able to build from the Command Line, but the IDE experience will be extremely degraded. The autocompletion will not work, and it will be impossible to use the built-in debugger, etc.

See the screenshots to understand what Red Symbols are:

Who is going to benefit from this?

You will benefit from this fix if you're writing library or apps with Android platform/native code (Java/Kotlin/C++).

While most of the time you might be using VS Code to write JS/TS code, once you need to interact with Android you'll most likely use Android Studio or IntelliJ IDEA.

Writing Java/Kotlin/C++ code without autocompletion from the IDE is a frustrating experience. Sadly this was happening as soon as you turned on the New Architecture, which might entice you away from using it at all.

From this user report by @friyiajr:

When trying to code in Android Studio, pretty much all imports from React-Native say that they cannot be found after updating to React-Native 0.69.0. [...] Still, its very annoying if you want to write any custom TurboModules code.

This is now fully fixed and you'll be able to use IDE autocompletion with New Architecture in .71 🎉

Please note that React Native .71 will require Android Studio Doplhin or above to work correctly (previous versions of Android Studio will warn you that you need to update).

On top of this, React Native contributors that are using Android Studio will also benefit from this change, which landed in main ~2 months ago already.

The technicalities

This was possible thanks to two changes:

• A series of refactoring inside the core of react-native.
• The moving of artifacts to Maven Central - See RFC: out-of-NPM package solution for React Native Artifacts #508 for more context on this.

The reason why Android Studio was raising red symbols for all the React Native classes (errors like cannot find React Activity), was that we were storing mixed sources inside the ReactAndroid/src/main/java folder.

Historically, we used to have folders inside src/main/java that contained mixed Java and C++ code. This is pretty common as Android needs JNI to communicate between Java and C++.

Internally at Meta, we rely on Buck to generate Android Studio projects which are able to resolve symbols correctly, even for folder with mixed sources.

In OSS we rely on Gradle and the Android Studio source discovery mechanism. Android Studio relies on the assumption that src/main/java will contain only Java/Kotlin code. All the C++ code should be place inside src/main/jni or src/main/cpp.

By having mixed sources, Android Studio was assuming src/main/java contained only C++ code which was not the case, and terminated symbols resolution for all the code inside the framework (classes like ReactActivity and so on).

We ended up re-shufflying our code setup to make sure folder inside src/main/java contains only JVM code to make sure Android Studio resolves symbols correctly.

---

We're happy to collect feedback on this specific change here and answer questions/follow-up if there are any.