Native Development

🌉 Building Bridges: React Native Native Development

Imagine you’re a translator between two countries that speak different languages. React Native is like JavaScript-land, and your phone’s operating system (iOS/Android) is like Native-land. Sometimes, JavaScript needs to talk directly to Native-land to do special things. That’s what Native Development is all about!

🎯 What You’ll Learn

Think of your phone like a super-powered toolbox. JavaScript can use most tools, but some special tools are locked away in the “Native” section. Today, we’ll learn how to unlock those special tools!

graph TD
    A["JavaScript World"] -->|Bridge| B["Native World"]
    B --> C["Camera"]
    B --> D["Bluetooth"]
    B --> E["Special Sensors"]
    B --> F["Native UI Magic"]

📦 Native Modules Concepts

The Story of the Translator

Imagine you have a friend who only speaks Japanese, and you only speak English. You need a translator to talk to each other, right?

Native Modules are like translators!

• JavaScript = You (speaking English)
• Native Code = Your friend (speaking Japanese/Swift/Kotlin)
• Native Module = The translator between you two

Why Do We Need Them?

Sometimes JavaScript can’t do everything. Your phone has special powers like:

• 📸 Taking photos with the camera
• 📍 Getting exact GPS location
• 📳 Making the phone vibrate
• 🔊 Playing sounds in special ways

These powers live in “Native-land,” and Native Modules help us use them!

Simple Example

// In JavaScript, you just call the module
import { NativeModules } from 'react-native';

// Like asking the translator to speak
const { MyToaster } = NativeModules;
MyToaster.show('Hello from Native!');

What happens behind the scenes:

1. JavaScript says: “Show a toast!”
2. The Bridge carries the message
3. Native code receives it
4. Phone shows the toast! 🍞

🔧 Native Module Methods

Making the Translator Do Stuff

A Native Module can have many methods - like different things you can ask your translator to do.

Think of it like a TV remote:

• Press ▶️ = Play
• Press ⏸️ = Pause
• Press 🔊 = Volume up

Each button is a method!

How Methods Work

graph TD
    A["JavaScript calls method"] --> B["Bridge sends message"]
    B --> C["Native code runs"]
    C --> D["Result comes back"]
    D --> E["JavaScript gets answer"]

Example: A Calculator Module

What you write in JavaScript:

import { NativeModules } from 'react-native';
const { Calculator } = NativeModules;

// Ask native to add numbers
const result = await Calculator.add(5, 3);
console.log(result); // 8

Types of Methods

Real Example: Getting Device Info

// Native method to get battery level
const battery = await DeviceInfo.getBatteryLevel();
console.log(`Battery: ${battery}%`);

Why this needs Native? JavaScript can’t directly ask the phone about its battery. Only Native code can!

📡 Native Module Events

When Native Wants to Talk First

Sometimes, Native-land has news to share with JavaScript-land!

Imagine this:

• You’re waiting for a pizza delivery 🍕
• You don’t call them every second asking “Is it here?”
• They call YOU when it arrives!

That’s what Events do!

How Events Work

graph TD
    A["Something happens in Native"] --> B["Native sends event"]
    B --> C["Bridge carries it"]
    C --> D["JavaScript listener catches it"]
    D --> E["Your code responds"]

Setting Up a Listener

import { NativeEventEmitter, NativeModules } from 'react-native';

const { LocationTracker } = NativeModules;
const emitter = new NativeEventEmitter(LocationTracker);

// Listen for location changes
emitter.addListener('onLocationChange', (location) => {
  console.log('You moved!', location);
});

Common Events You Might Use

Remember to Clean Up!

Like turning off a water tap when you’re done:

useEffect(() => {
  const sub = emitter.addListener('onShake', handleShake);

  // Clean up when done!
  return () => sub.remove();
}, []);

🎨 Native UI Components

When JavaScript UI Isn’t Enough

Sometimes you need special visual things that JavaScript can’t draw. Like a map! 🗺️

Drawing a map with millions of details using JavaScript would be super slow. But Native has special map powers!

The Magic of Native Views

graph TD
    A["React Component"] --> B["Native View Manager"]
    B --> C["Real Native UI"]
    C --> D["Fast & Beautiful!"]

Example: Using a Native Map

In your React component:

import { requireNativeComponent } from 'react-native';

// Get the native map
const NativeMap = requireNativeComponent('MapView');

function MyApp() {
  return (
    <NativeMap
      style={{ flex: 1 }}
      showsUserLocation={true}
      zoomLevel={15}
    />
  );
}

How Props Flow to Native

When you set zoomLevel={15}:

1. React sees the prop
2. Bridge sends zoomLevel: 15 to Native
3. Native map zooms to level 15
4. You see it on screen! ✨

Popular Native UI Components

Handling Native Events in UI

Native UI can send events back too!

<NativeMap
  onRegionChange={(event) => {
    console.log('Map moved!', event.nativeEvent);
  }}
  onMarkerPress={(event) => {
    console.log('Marker tapped!');
  }}
/>

🚀 New Architecture Overview

The Future is Here!

React Native got a major upgrade called the New Architecture. It’s like replacing an old bicycle with a rocket ship! 🚲 → 🚀

The Old Way (Bridge)

graph LR
    A["JavaScript"] -->|Slow Bridge| B["Native"]
    B -->|Slow Bridge| A

Problems:

• Messages wait in line (like a traffic jam)
• Can only send text messages (serialization)
• No direct communication

The New Way (JSI + Turbo Modules + Fabric)

graph LR
    A["JavaScript"] <-->|Direct Talk!| B["Native"]

Benefits:

• Direct communication (no waiting!)
• Share memory (super fast!)
• Synchronous when needed

Three Big Changes

1️⃣ JSI (JavaScript Interface)

Think of it like learning your friend’s language instead of using a translator!

Before: JS → Bridge → Native (slow) After: JS → Direct → Native (fast!)

2️⃣ Turbo Modules

Like Native Modules, but turbocharged! ⚡

// Turbo Module example
import { TurboModuleRegistry } from 'react-native';

const MyTurboModule = TurboModuleRegistry.get('MyModule');

// This is MUCH faster now!
const result = MyTurboModule.calculate(100);

Key Improvements:

• Lazy loading (loads only when needed)
• Type-safe (fewer bugs!)
• Synchronous calls possible

3️⃣ Fabric (New Rendering)

The new way to draw UI on screen!

Should You Use New Architecture?

Migration Path

graph TD
    A["Old Architecture"] --> B["Enable New Arch"]
    B --> C["Update Native Modules"]
    C --> D["Test Everything"]
    D --> E["Deploy! 🎉"]

🎁 Putting It All Together

The Complete Picture

graph TD
    A["Your React Native App"] --> B["JavaScript Code"]
    B --> C{What do you need?}
    C -->|Native Feature| D["Native Module"]
    C -->|Native Event| E["Event Emitter"]
    C -->|Native UI| F["Native Component"]
    D --> G["Bridge/JSI"]
    E --> G
    F --> G
    G --> H["Native iOS/Android"]

Quick Summary

💪 You Did It!

You now understand how React Native talks to the native world! Remember:

1. Native Modules = Your translators to Native-land
2. Methods = Things you can ask Native to do
3. Events = When Native has news for you
4. Native UI = Special visual superpowers
5. New Architecture = The faster future!

You’re not just writing JavaScript anymore—you’re commanding the full power of your phone! 📱✨

🔑 Key Takeaways

• Native Modules are bridges between JavaScript and platform-specific code
• Methods let JavaScript call Native functions (sync or async)
• Events let Native notify JavaScript when things happen
• Native UI Components provide high-performance visual elements
• New Architecture (JSI, Turbo Modules, Fabric) makes everything faster!

Next Step: Try creating your own simple Native Module to see the magic in action! 🌟