> ## Documentation Index
> Fetch the complete documentation index at: https://committ.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# January 15th, 2026

> React Native Internals: A Deep Dive into MainActivity.kt

## Not "Vibe Coding" — Actual Understanding

Today wasn't about "vibe coding" or guessing. It was about actually sitting down and trying to understand **The Machine**. We stopped treating React Native as magic and peeled back the layers to see how the engine starts and how all the things connect.

We spent the entire session dissecting **this specific code block** (`MainActivity.kt`), line by line, to understand the lifecycle of a React Native app on Android.

### The Code We Dissected

```kotlin theme={null}
import android.os.Build
import android.os.Bundle

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate

import expo.modules.ReactActivityDelegateWrapper

class MainActivity : ReactActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    // Set the theme to AppTheme BEFORE onCreate to support
    // coloring the background, status bar, and navigation bar.
    // This is required for expo-splash-screen.
    setTheme(R.style.AppTheme);
    super.onCreate(null)
  }

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  override fun getMainComponentName(): String = "main"

  /**
   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
   */
  override fun createReactActivityDelegate(): ReactActivityDelegate {
    return ReactActivityDelegateWrapper(
          this,
          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
          object : DefaultReactActivityDelegate(
              this,
              mainComponentName,
              fabricEnabled
          ){})
  }

  /**
    * Align the back button behavior with Android S
    * where moving root activities to background instead of finishing activities.
    */
  override fun invokeDefaultOnBackPressed() {
      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
          if (!moveTaskToBack(false)) {
              // For non-root activities, use the default implementation to finish them.
              super.invokeDefaultOnBackPressed()
          }
          return
      }
      super.invokeDefaultOnBackPressed()
  }
}
```

## 🔍 The Journey: Questions & Breakthroughs

We restructured the entire learning path into a **Self-Questioning Journey**, mapping high-level guesses to deep architectural reality.

### 1. The Startup (OS Layer)

* **Question:** Does the parent create the activity and load the JS?
* **Concept:** `super.onCreate(null)` is the "Power Switch."
* **Insight:** `setTheme` runs native code instantly to show the splash screen. `super.onCreate` reserves the physical window and initiates the Hermes engine startup.

### 2. The Handshake (Identification)

* **Question:** How does the OS know which JS file to run?
* **Concept:** The `getMainComponentName` method returns a "Key" (String) that must match the AppRegistry key in JS.
* **Code:** `override fun getMainComponentName(): String = "main"`
* **Insight:** Expo Router implicitly registers `index.tsx` as `"main"`. This string is the bridge header.

### 3. The Manager (Delegate Pattern)

* **Question:** Who manages the engine and the UI?
* **Concept:** The `ReactActivityDelegate`. It is the "Manager" hired by the Activity.
* **Insight:** The Delegate has three jobs:
  1. Create the `ReactRootView` (native container).
  2. Start the Hermes Runtime.
  3. Load the Root Component into the view.

## The Mental Model: "Brain vs. Body"

We solidified the ultimate analogy:

* **Hermes** is the **Thinking Brain** (Logic, State, Calculus).
* **The Bridge** is the **Nervous System** (Signals).
* **Android** is the **Physical Body** (Rendering pixels, handling touches).

## Summary

We moved from "React Native is magic" to "React Native is a conversation between a JS engine and an Android host."
We now know exactly what happens between the icon tap and the first pixel appearing on screen.