DEV Community: Arijit das

Stop Struggling with Maps in React Native — Here’s the Complete Guide

Arijit das — Sat, 01 Nov 2025 23:39:23 +0000

☕ How I Actually Got Google Maps Working in React Native (and Why It Took Me Way Longer Than It Should Have)

So last week, I'm building this Coffee Shop Locator app. Simple idea, right? Show users nearby cafés on a map.

I figured I'd just drop in a <MapView> component, maybe add a few markers, and boom—done by lunch.

Yeah... that didn't happen. 😅

Three hours later, I'm staring at a blank gray screen, Googling "why is my react native map not showing" for the hundredth time, and questioning all my life choices.

But I finally got it working. And honestly? Once I understood what was actually happening under the hood, it all made sense.

So here's everything I learned—written for past me, and hopefully helpful for you too.

🧩 Why Maps Aren't Just "Install and Go"

Here's the thing nobody tells you upfront: React Native doesn't come with maps built-in.

When you think "map in my app," you're probably picturing something like Google Maps just... working. But that's not quite how it goes.

Under the hood, maps work completely differently on each platform:

Android uses the Google Maps SDK (native Java/Kotlin stuff)
iOS uses Apple's MapKit (native Swift code)

Your React Native app? That's all JavaScript. The map itself lives in native land.

So you need something that bridges the gap—something that lets you write simple JavaScript like this:

<MapView>
  <Marker coordinate={{ latitude: 28.61, longitude: 77.23 }} />
</MapView>

...and then magically translates that into the actual native code that each platform understands.

That bridge is react-native-maps. And honestly, once I understood this, a lot of the setup headaches made more sense.

🌍 What `react-native-maps` Actually Does

Think of it like a translator at a conference.

You (JavaScript developer) speak one language. The native SDKs (Google Maps, Apple Maps) speak another. react-native-maps sits in the middle and makes sure everyone understands each other.

Without it, you'd be writing separate native modules in Kotlin and Swift yourself. No thanks. 😬

⚙️ The Part Where I Actually Set This Up (Android Edition)

Alright, this is where most tutorials lose me with vague instructions. So I'm gonna walk through exactly what I did, step by step.

🧭 Step 1: Get Your Google Maps API Key

Head over to the Google Cloud Console.

Click "Create API Key" and make sure you enable these three things:

✅ Maps SDK for Android
✅ Maps SDK for iOS
✅ Places API (if you want search/autocomplete later)

Copy that API key. You'll need it in a second.

🔑 Step 2: Tell Android About Your API Key

Open up your Android manifest file:

android/app/src/main/AndroidManifest.xml

Inside the <application> tag, paste this:

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_GOOGLE_MAPS_API_KEY"/>

This is basically how your Android app knows which API key to use when it talks to Google's servers.

⚠️ If you're using Expo and run into issues:
Sometimes Expo gets weird when you manually edit Android files. If your map still won't show up, or Expo throws errors during build, try adding the API key to your app.json instead:

"android": {
  "package": "com.example.coffeemap",
  "config": {
    "googleMaps": {
      "apiKey": "${GOOGLE_MAPS_API_KEY}"
    }
  }
}

I ran into this myself—spent way too long trying to figure out why the manifest approach wasn't working. Turns out Expo sometimes overrides those manual changes during build. Using app.json lets Expo handle it properly.

📝 Pro tip: Don't leave your API key wide open. Go restrict it in the Cloud Console—tie it to your app's package name and SHA-1 fingerprint. (I'll show you how to get those in the next step.)

🔍 Step 3: Get Your SHA-1 Fingerprint

Okay, this part confused me at first. What even is a SHA-1 fingerprint?

Basically, it's a unique digital signature for your app. It comes from the keystore file that signs your APK. When you register your app with Google, they use this fingerprint to verify "yep, this request is really coming from YOUR app."

Each keystore = different SHA-1 = different identity.

Here's how to get it:

📂 Navigate to your Android folder

cd android

💻 Run the signing report

On Windows (Command Prompt or PowerShell):

gradlew signingReport

On macOS or Linux:

./gradlew signingReport

You'll see a bunch of output. Look for something like this:

Variant: debug
SHA1: 12:34:56:AB:CD:EF:98:76:54:32:10:FF:EE:DD:CC:BB:AA:99:88
Package name: com.example.coffeemap

Copy both the SHA-1 and your package name (also called applicationId).

Now go back to Google Cloud Console → Credentials → click on your API key → "Restrict Key" → Android Apps.

Add your package name and SHA-1 there.

⚠️ Important: Make sure you're using the right SHA-1 for your build type! There's one for debug (what you use when testing locally) and one for release (what you use for the Play Store). Use the debug one while you're developing.

🧹 Step 4: Clean Everything and Rebuild

Sometimes Android gets stubborn and caches old stuff. So do this:

cd android
./gradlew clean
cd ..
npx react-native run-android

If the map is still blank (which happened to me), uninstall the app completely from your device/emulator and reinstall it. That finally did the trick for me.

🗺️ The Moment of Truth: A Working Map 🎉

Okay, after all that setup... here's the payoff. This is the simplest version that actually works:

import React from "react";
import { View, StyleSheet } from "react-native";
import MapView, { Marker } from "react-native-maps";

export default function CoffeeMap() {
  return (
    <View style={styles.container}>
      <MapView
        provider="google"
        style={styles.map}
        initialRegion={{
          latitude: 28.6139, // New Delhi
          longitude: 77.2090,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        }}
        onMapReady={() => console.log("✅ Map is ready!")}
      >
        <Marker
          coordinate={{ latitude: 28.6139, longitude: 77.2090 }}
          title="Central Café"
          description="Your daily caffeine fix ☕"
        />
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

When I finally saw that map load with my little red pin on it... honestly, such a satisfying moment. 😊

🧠 Understanding What These Components Actually Do

Once you have a working map, you'll probably want to do more with it. Here's a breakdown of the main components I used:

Component	What It Does	Example
`<MapView>`	The actual map	Base canvas for everything
`<Marker>`	A pin on the map	Mark café locations
`<Callout>`	Info popup when you tap a marker	Show details, ratings, hours
`<Polyline>`	Draw lines on the map	Show routes or paths
`<Circle>`	Highlight a circular area	Show delivery radius, etc.

Let me break down each one a bit more...

🗺️ `<MapView>` — Your Map Canvas

<MapView
  provider="google"
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.7749,
    longitude: -122.4194,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  }}
  showsUserLocation={true}
  onMapReady={() => console.log("Map loaded!")}
/>

Quick tip: The latitudeDelta and longitudeDelta control your zoom level. Smaller numbers = more zoomed in. I usually just play with these values until it looks right.

📍 `<Marker>` — The Pin

<Marker
  coordinate={{ latitude: 37.7749, longitude: -122.4194 }}
  title="Best Bites Restaurant"
  description="Open till 11 PM!"
  pinColor="#FF5733"
/>

You can also use your own custom image instead of the default red pin:

image={require('../assets/restaurant-pin.png')}

I did this for my coffee shops—added little coffee cup icons. Makes it feel more polished.

💬 `<Callout>` — Info Popup

<Marker coordinate={{ latitude: 37.7749, longitude: -122.4194 }}>
  <Callout>
    <View style={{ width: 200, padding: 10 }}>
      <Text style={{ fontWeight: "bold" }}>Best Bites</Text>
      <Text>⭐ 4.5 • Fast Delivery</Text>
    </View>
  </Callout>
</Marker>

This is where you can get creative—show ratings, photos, business hours, whatever makes sense for your app.

🛣️ `<Polyline>` — Draw Routes

<Polyline
  coordinates={[
    { latitude: 37.7749, longitude: -122.4194 },
    { latitude: 37.7849, longitude: -122.4094 },
  ]}
  strokeColor="#007AFF"
  strokeWidth={4}
/>

Perfect for showing delivery routes, walking paths, driving directions—anything that connects point A to point B.

🔵 `<Circle>` — Highlight Areas

<Circle
  center={{ latitude: 37.7749, longitude: -122.4194 }}
  radius={3000} // 3 km radius
  strokeColor="#FF0000"
  fillColor="rgba(255,0,0,0.2)"
/>

I used this to show the delivery range for each café. Users could see at a glance if they're within range.

Perfect ✅ — here’s your updated, human-sounding, emotional, and storytelling-style section rewritten so it fits the Coffee Shop context (instead of the clinic locator).
Everything sounds natural and still feels developer-friendly 👇

🚀 Going Beyond the Basics: Making It Interactive

Here’s where it got fun for me. Just showing a static map felt... boring.
I wanted users to actually interact with it — move things around, see live updates, and feel like they’re really controlling where their coffee is coming from ☕.

So instead of a simple static café map, I built an interactive Coffee Shop Locator — where users can:

✅ Use their current GPS location

✅ Drag the coffee pin to pick their favorite café spot

✅ See live latitude and longitude updates

✅ Watch the map respond in real-time as they explore

Here’s the full code for that magic 👇

import React, { useEffect, useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import MapView, { Marker } from "react-native-maps";
import * as Location from "expo-location";
import Constants from "expo-constants";
import { scale, verticalScale } from "react-native-size-matters";

export default function CoffeeShopMapSelectionScreen() {
  const [region, setRegion] = useState({
    latitude: 20.5937,
    longitude: 78.9629,
    latitudeDelta: 0.05,
    longitudeDelta: 0.05,
  });

  const [loadingLocation, setLoadingLocation] = useState(false);
  const [hasPermission, setHasPermission] = useState(false);

  const googleApiKey = Constants.expoConfig?.extra?.GOOGLE_MAPS_API_KEY;
  console.log("Using API key:", googleApiKey);

  const requestLocationPermission = async () => {
    const { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== "granted") {
      alert("Permission to access location was denied.");
      return;
    }
    setHasPermission(true);
  };

  const fetchCurrentLocation = async () => {
    try {
      setLoadingLocation(true);
      const { coords } = await Location.getCurrentPositionAsync({});
      setRegion((prev) => ({
        ...prev,
        latitude: coords.latitude,
        longitude: coords.longitude,
      }));
    } catch (error) {
      console.log("Error fetching current location:", error);
    } finally {
      setLoadingLocation(false);
    }
  };

  useEffect(() => {
    requestLocationPermission();
  }, []);

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerTitle}>☕ Pick Your Coffee Spot</Text>
        <TouchableOpacity
          onPress={fetchCurrentLocation}
          style={styles.currentLocationBtn}
        >
          {loadingLocation ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <Text style={styles.currentLocationText}>Use Current Location</Text>
          )}
        </TouchableOpacity>
      </View>

      <MapView
        style={styles.map}
        provider="google"
        initialRegion={region}
        onRegionChangeComplete={setRegion}
        showsUserLocation={true}
        onMapReady={() => console.log("✅ Map ready")}
      >
        <Marker
          coordinate={{
            latitude: region.latitude,
            longitude: region.longitude,
          }}
          draggable
          onDragEnd={(e) => {
            const { latitude, longitude } = e.nativeEvent.coordinate;
            setRegion({ ...region, latitude, longitude });
          }}
          pinColor="#b76e79"
          title="Your Coffee Spot"
          description="Drag to adjust location"
        />
      </MapView>

      <View style={styles.locationDetails}>
        <Text style={styles.coordText}>
          🌍 Latitude: {region.latitude.toFixed(6)}
        </Text>
        <Text style={styles.coordText}>
          📍 Longitude: {region.longitude.toFixed(6)}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#fff" },
  map: { flex: 1 },
  header: {
    paddingHorizontal: scale(16),
    paddingVertical: verticalScale(8),
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "#222",
  },
  currentLocationBtn: {
    backgroundColor: "#8B4513",
    paddingHorizontal: scale(12),
    paddingVertical: verticalScale(6),
    borderRadius: 10,
  },
  currentLocationText: {
    color: "#fff",
    fontSize: 14,
    fontWeight: "500",
  },
  locationDetails: {
    backgroundColor: "#F9F9F9",
    paddingVertical: verticalScale(10),
    paddingHorizontal: scale(16),
    borderTopWidth: 1,
    borderColor: "#EAEAEA",
  },
  coordText: {
    fontSize: 14,
    color: "#333",
    marginBottom: 4,
  },
});

💡 What’s Happening Behind the Scenes

Permission Request: The app politely asks for location access using expo-location.
GPS Centering: One tap centers the map right on your current location.
Draggable Pin: Users can drag the pin to choose exactly where their favorite café is.
Live Updates: Latitude and longitude update in real time below the map.

Now, it doesn’t just show a map — it feels alive ☕✨

🎨 Making Your Map Look Less... Generic

One thing I realized pretty quickly—the default Google Maps style is fine, but it doesn't really match every app's vibe.

You can completely customize how your map looks using JSON style files. Dark mode, minimalist, retro, whatever fits your design.

Create a file called map-style.json:

[
  {
    "featureType": "all",
    "elementType": "labels",
    "stylers": [{ "visibility": "off" }]
  }
]

Then apply it:

import mapStyle from '../assets/map-style.json';

<MapView
  customMapStyle={mapStyle}
  style={{ flex: 1 }}
/>

Pro tip: Use the Google Map Styling Wizard to visually design your style. Way easier than hand-writing JSON. You just click around, pick colors, toggle elements on and off, then download the JSON file when you're done.

I made mine slightly darker with muted colors so it didn't compete with my UI elements. Made a huge difference in how professional the app felt.

📍

From coordinates to readable addresses — reverse geocoding made simple

So you've got your map working in React Native. Users can pan around, see their location, maybe drop some markers. That's cool.

But here's what I realized when testing my coffee shop locator—when someone moves the map around, they don't just want to see latitude: 20.5937, longitude: 78.9629. They want to know: "What place am I actually looking at?"

That's where reverse geocoding comes in—converting coordinates back into human-readable addresses.

And honestly? Getting this to work smoothly taught me way more about maps than I expected.

Let me show you what I learned.

⚠️ Quick Fix: If Your Geocoding API Isn't Working

Before we dive in—if you're getting API errors even with the correct SHA-1 configured, here's what saved me hours of debugging:

Go to Google Cloud Console → Credentials → Your API Key → Application restrictions

If you're still in development and things aren't working, temporarily set it to "None".

Sometimes the SHA-1 + package name restrictions get finicky during development (especially with debug vs release builds). Once everything's working, you can lock it down again for security.

🎯 The Fixed Pin Approach (Better UX)

First, a quick design choice that made a huge difference.

Instead of having users drag a marker around (which can feel clunky), I removed the draggable <Marker> completely and added a fixed pin overlay that stays centered on the screen.

The map moves underneath it. Way more intuitive.

Here's the code:

{/* Map Container */}
<View style={styles.mapContainer}>
  <MapView
    style={styles.map}
    provider="google"
    initialRegion={region}
    onRegionChangeComplete={handleRegionChangeComplete}
    showsUserLocation={true}
    mapType="standard"
    onMapReady={() => console.log("✅ Map ready")}
  />

  {/* FIXED PIN OVERLAY - stays in center */}
  <View style={styles.fixedPinContainer}>
    <View style={styles.pinCircle}>
      <View style={styles.pinInnerCircle} />
    </View>
  </View>
</View>

What's happening here?

The <MapView> fills the container, and the pin is positioned absolutely in the center using styles. As users pan the map, the pin never moves—it's always pointing at the center coordinates.

🔄 Reverse Geocoding: Two Ways to Do It

Now for the actual geocoding part.

Every time the user finishes panning, onRegionChangeComplete fires with the new center coordinates. We use those coordinates to fetch the address.

I discovered there are two approaches, and they each have trade-offs.

📱 Method 1: Using Expo Location (Simple & Clean)

import * as Location from "expo-location";

const handleRegionChangeComplete = async (newRegion: any) => {
  setRegion(newRegion);

  try {
    const [place] = await Location.reverseGeocodeAsync({
      latitude: newRegion.latitude,
      longitude: newRegion.longitude,
    });

    console.log("📍 Place from Expo:", place);

    if (place) {
      setAddress(
        `${place.name || ""} ${place.street || ""}, ${place.city || ""}, ${place.region || ""}`
      );
    }
  } catch (error) {
    console.log("Error fetching place:", error);
  }
};

What you get back:

{
  "city": "Wadgaon",
  "country": "India",
  "district": null,
  "formattedAddress": "144, Khattalwada, Wadgaon, Maharashtra 442301, India",
  "isoCountryCode": "IN",
  "name": "144",
  "postalCode": "442301",
  "region": "Maharashtra",
  "street": null,
  "streetNumber": null,
  "subregion": "Nagpur Division",
  "timezone": null
}

✅ Pros:

Super simple—one function call
Already included with Expo (no extra setup)
Clean, structured response
Easy to parse

❌ Cons:

Less detailed—sometimes missing street names or landmarks
No control over result quality
Limited to basic address components

When to use it: If you just need "City, State" or a simple formatted address, this is perfect. No fuss, no API keys to manage.

🌐 Method 2: Using Google Geocoding API (Detailed & Powerful)

const handleRegionChangeComplete = async (newRegion: any) => {
  setRegion(newRegion);

  try {
    const response = await fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${newRegion.latitude},${newRegion.longitude}&key=${googleApiKey}`
    );

    const data = await response.json();
    const bestResult = data.results[0];
    console.log("📍 Best result from Google:", bestResult);

    // Use formatted_address or parse address_components
    setAddress(bestResult.formatted_address);
  } catch (error) {
    console.log("Error fetching place:", error);
  }
};

What you get back:

{
  "address_components": [
    {"long_name": "144", "short_name": "144", "types": ["street_number"]},
    {"long_name": "Khattalwada", "short_name": "Khattalwada", "types": ["sublocality"]},
    {"long_name": "Wadgaon", "short_name": "Wadgaon", "types": ["locality"]},
    {"long_name": "Wardha", "short_name": "Wardha", "types": ["administrative_area_level_3"]},
    {"long_name": "Nagpur Division", "short_name": "Nagpur Division", "types": ["administrative_area_level_2"]},
    {"long_name": "Maharashtra", "short_name": "MH", "types": ["administrative_area_level_1"]},
    {"long_name": "India", "short_name": "IN", "types": ["country"]},
    {"long_name": "442301", "short_name": "442301", "types": ["postal_code"]}
  ],
  "formatted_address": "144, Khattalwada, Wadgaon, Maharashtra 442301, India",
  "geometry": {
    "location": {"lat": 20.5937296, "lng": 78.9629344},
    "location_type": "ROOFTOP"
  },
  "place_id": "ChIJc_ilQQBn0zsRKuQxPq-IF2c",
  "types": ["establishment", "point_of_interest"]
}

✅ Pros:

Extremely detailed—every level of address hierarchy
Returns multiple results (pick the most relevant)
Includes landmarks, establishments, plus codes
More accurate for specific buildings
Full control over what to display

❌ Cons:

Requires API calls (watch your quota)
Response structure is complex to parse
Need to manage API keys

When to use it: When you need precise addresses, landmark names, or want full control over address formatting.

🧩 Understanding `address_components` (The Confusing Part)

When I first saw Google's response, I was like... what is all this?

Here's the deal: Google breaks down every address into granular components—from the smallest detail (building number) to the largest (country).

Each component has types that tell you what kind of address part it is.

Let me decode this for you:

Type	What It Means	Example
`street_number`	Building/house number	`144`
`route`	Street/road name	`MG Road`
`sublocality` / `sublocality_level_1`	Neighborhood/area	`Khattalwada`
`locality`	City/town	`Wadgaon`
`administrative_area_level_3`	District/taluk	`Wardha`
`administrative_area_level_2`	Division (group of districts)	`Nagpur Division`
`administrative_area_level_1`	State/province	`Maharashtra`
`country`	Country	`India`
`postal_code`	ZIP/PIN code	`442301`
`establishment`	Business/landmark	`Café Coffee Day`
`point_of_interest`	Notable location	`Central Park`
`plus_code`	Google's grid-based code	`QPHX+RWG`

🧠 Why Google Returns Multiple Results

Here's something that confused me at first—why does Google return an array of results instead of just one?

Because the same coordinates can represent different levels of specificity:

Exact building (if mapped) → "144, Khattalwada"
Nearest street → "Khattalwada Road"
General area → "Wadgaon, Maharashtra"
Administrative region → "Wardha District"

Google gives you all possible interpretations, ordered by relevance.

Usually, data.results[0] is the most precise. But sometimes you might want a different one—for example:

First result is just a plus code? Skip to the second.
First result is too specific (building name)? Use the third (street name).

That's why having the full array is powerful—you get to choose.

💡 Parsing Smart: Getting What You Actually Need

Don't want the whole mess? Here's how to extract just what matters.

Get Just City and State:

const getSimpleAddress = (addressComponents) => {
  const city = addressComponents.find(c => 
    c.types.includes("locality")
  )?.long_name || "";

  const state = addressComponents.find(c => 
    c.types.includes("administrative_area_level_1")
  )?.long_name || "";

  return `${city}, ${state}`;
};

// Usage
const simpleAddress = getSimpleAddress(bestResult.address_components);
// Output: "Wadgaon, Maharashtra"

Get Full Formatted Address (Easy Mode):

setAddress(bestResult.formatted_address);
// Output: "144, Khattalwada, Wadgaon, Maharashtra 442301, India"

Get Specific Components (Custom):

const getDetailedAddress = (addressComponents) => {
  const street = addressComponents.find(c => 
    c.types.includes("route")
  )?.long_name || "";

  const area = addressComponents.find(c => 
    c.types.includes("sublocality")
  )?.long_name || "";

  const city = addressComponents.find(c => 
    c.types.includes("locality")
  )?.long_name || "";

  return `${street}, ${area}, ${city}`;
};

// Output: "Khattalwada Road, Khattalwada, Wadgaon"

Pick and choose based on your app's needs.

🎯 Which Method Should You Actually Use?

Here's my honest recommendation:

Use Expo Location if:

✅ You want something simple and quick
✅ You're okay with basic info (city, state, postal code)
✅ You don't want to manage API quotas
✅ Your app doesn't need landmarks or precise building names

Use Google Geocoding API if:

✅ You need detailed, precise addresses
✅ You want landmarks and establishment names
✅ You need to customize which address components to show
✅ Your app already uses Google Maps API (you're paying anyway)
✅ You want control over multiple result options

🔥 My Approach: Best of Both Worlds

Here's what I actually do in production—use both methods with Google as primary and Expo as fallback:

const handleRegionChangeComplete = async (newRegion: any) => {
  setRegion(newRegion);

  try {
    // Try Google API first (more detailed)
    const response = await fetch(
      `https://maps.googleapis.com/maps/api/geocode/json?latlng=${newRegion.latitude},${newRegion.longitude}&key=${googleApiKey}`
    );
    const data = await response.json();
    const bestResult = data.results[0];

    // Fallback to Expo Location
    const [place] = await Location.reverseGeocodeAsync({
      latitude: newRegion.latitude,
      longitude: newRegion.longitude,
    });

    console.log("📍 Google result:", bestResult);
    console.log("📍 Expo result:", place);

    // Use Google if available, otherwise Expo
    if (bestResult?.formatted_address) {
      setAddress(bestResult.formatted_address);
    } else if (place) {
      setAddress(place.formattedAddress);
    }
  } catch (error) {
    console.log("Error fetching place:", error);
  }
};

Why this works:

Google gives you rich, detailed info 90% of the time
Expo catches the edge cases when Google fails
Users always see something instead of blank addresses
You're covered even if API limits hit

🚀 Putting It All Together

Here's the complete working example with everything we discussed:

Reverse geocoding sounds complicated, but once you understand the two approaches, it's actually pretty straightforward.

Start with Expo's reverseGeocodeAsync if you're just testing or need basic info. Upgrade to Google's Geocoding API when you need more control and detail.

Final Thoughts

Look, I'm not gonna lie—getting maps working in React Native was more work than I expected. But once I understood the why behind each step, it all clicked.

If you're stuck on a blank gray screen right now, trust me—you're probably just one small config fix away from getting it working. Double-check your API key, your SHA-1, your manifest. Clean and rebuild. Uninstall and reinstall if you have to.

And when it finally loads? When you see that map render with your markers and your custom styling? Honestly, it's worth the hassle.

Good luck. You got this. ☕

Questions? Hit me up in the comments. I'll try to help if I can.

🤖 I Used AI to Learn React Native Deeply — So You Don’t Have To

Arijit das — Tue, 07 Oct 2025 16:39:13 +0000

When I started learning React Native, I often saw tutorials that said “React Native lets you build apps for Android and iOS using JavaScript.”

Cool, but how does it actually work under the hood?

What really happens when I write this:

<Text>Hello</Text>
<Button title="Tap" onPress={() => {}} />

and then see “Hello” and a button show up on my phone screen?

So, I spent time breaking it down with the help of AI — and here’s the full explanation, written in simple human English, step-by-step.

This will help you understand what’s actually happening behind your React Native app — clearly and completely.

🚀 What Actually Happens When You Open the Homepage in React Native

Let’s say your main file is:

/app/index.tsx

<Text>Hello</Text>
<Button title="Tap" onPress={() => {}} />

Let’s peel the entire process — from running the app to seeing real UI and handling taps.

✅ Step 1: You Run the App

You type:

npx expo start

Then press a → the Android emulator opens.

📱 The emulator is just a virtual Android phone running on your computer.

✅ Step 2: Expo Bundles and Sends Your Code

Expo takes all your .tsx and .js files, bundles them into one big optimized JavaScript file,
and sends that file to the emulator.
Inside the emulator / device , there’s a JavaScript engine (called Hermes like a mini-browser brain) that executes this bundled file means it runs your code.

🧠 Think of Hermes as the brain that understands and runs your JavaScript inside the app.

✅ Step 3: React Builds a “Virtual Plan”

Your code says:

“Show text ‘Hello’ and a button.”

React (which lives in the JavaScript engine) doesn’t draw anything yet , it makes an to-do-list.

It first creates a virtual plan in memory — the React element tree:

Create a text that says “Hello”
Create a button that says “Tap”
Put them on the screen

{
  type: 'RCTText',
  props: { children: 'Hello' }
},
{
  type: 'RCTButton',
  props: { title: 'Tap', onPress: () => {} }
}

This is the blueprint of your UI — still in JavaScript memory, not on screen yet.

✅ Step 4: React Native Acts as the Translator 🗣️

Here’s where the magic begins.

Android doesn’t understand JavaScript — it understands Java/Kotlin.

So React Native acts as a translator between these two worlds.

It takes React’s virtual plan and says to Android:

“Hey Android! Please create a native view of type RCTText with text ‘Hello’, and a native button below it.”

This message travels through a direct connection called JSI (JavaScript Interface) — like a walkie-talkie between JavaScript and Android.

JSI (JavaScript Interface) a super-fast C++ bridge that lets JavaScript talk directly to native code.

✅ Step 5: Android Creates Real Native Views

Android receives those messages.

It has a registry mapping React Native component names to Android classes:

React Native Name	Android Class
`RCTText`	`ReactTextView` → extends `TextView`
`RCTView`	`ReactViewGroup` → extends `ViewGroup`
`RCTButton`	`ReactButton` → uses `AppCompatButton`

The Android system (in the emulator) hears this and:

Creates a real TextView (Android’s native text component)
Creates a real Button (Android’s native button)
Puts them on the screen

“Create RCTText with text ‘Hello’”

It runs Java code roughly like:

ReactTextView textView = new ReactTextView(context);
textView.setText("Hello");
parent.addView(textView);

✅ Now you see real Android UI — actual TextView and Button objects drawn by the system.

They are not HTML or web views — they’re real native components.

✅ Step 6: The UI Appears on Screen

Here’s a simplified diagram:

[Your Code: index.tsx]
        ↓
[React builds virtual plan]
        ↓
[React Native sends plan via JSI]
        ↓
[Android creates real native views]
        ↓
✅ “Hello” and a button appear on emulator

So what you see are actual Android-native UI components, controlled by your JavaScript.

✅ Step 7: Interaction — You Tap the Button

You tap the button on the emulator.
Android feels the tap and says:

“Hey JavaScript! The user tapped the button.”
- It sends a message back through the same walkie-talkie (JSI).
Your JavaScript function runs:

() => console.log("Tapped!");

If the function updates state, the cycle repeats ,React creates a new virtual plan, compares it to the old one, and updates only what changed — fast and efficient.

🧩 Where the Mapping Lives

In React Native’s source (already bundled in Expo):

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java

That file registers RCTText and defines how Android should create and update it.

You never touch this — Expo handles it automatically.

You just write <Text> in JS, and the translator handles everything.

🔍 Want to See the Native Views?

Open Android Studio → Layout Inspector while the app runs.

You’ll see something like:

ReactRootView
 └── ReactViewGroup
      └── ReactTextView   ← your <Text>
      └── ReactButton     ← your <Button>

✅ Proof that these are real Android views created by React Native’s translator.

🧱 What You Don’t Need to Worry About (Yet)

JS Thread vs Native Thread — Expo handles the sync.
Bridge vs JSI — You’re already using the new fast one (JSI).
/android folder — ignore it in Expo.
Yoga Layout — it just makes Flexbox (flex: 1) work.

⚡ In One Sentence

You write <Text>Hello</Text> in JavaScript → React builds a virtual plan → React Native (via JSI) tells Android → Android builds a real TextView → You see and interact with it → Events flow back → React updates again.

That’s the entire React Native lifecycle —

no magic, just smart translation between JS and Native worlds.

❓ React Native Deep-Dive — Q&A Section

A collection of simple, clear answers to the most common “how does it really work” questions.

🧩 Q1: Where is the mapping between `<Text>` and Android’s `TextView` defined?

In React Native, <Text> in JavaScript doesn’t directly create Android UI. Internally, React Native uses the name RCTText as a bridge.

The mapping is part of React Native’s Android source code (shipped with the framework), specifically in:

ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTextViewManager.java

🔍 What happens there:

"RCTText" is registered as the internal name React Native uses.
createViewInstance() creates a ReactTextView, which wraps Android’s TextView.
Props like text, color, and fontSize are automatically handled from JS.

✅ So when you write <Text>, React Native uses this mapping to create a real native TextView on Android.

You don’t need to touch this — it’s already part of the framework.

🚫 Q2: What happens if I create a component that doesn’t exist on the native side?

If you write a component in JavaScript that has no corresponding native module, React Native cannot translate it into a real UI element.

At runtime, React Native will throw an error like:

Invariant Violation: Component not found

🔧 Why it happens:

Core components like <Text>, <View>, and <Button> work because React Native already provides native implementations for them.
For custom components, you can either:

1.  Build them using existing core components (pure JS), or

2.  Create a **custom native module** for Android/iOS.

✅ TL;DR: React Native can only render components that have a native mapping. If it doesn’t exist, it fails with an error.

⚙️ Q3: Where does JSI actually stay — in my project folder, in Hermes, or in the device?

JSI (JavaScript Interface) is part of React Native’s native code compiled into the app, not in your project files.

It lives inside the app on the device.

It acts as a bridge connecting:

the JS thread (where Hermes runs your code)
and the native/UI thread (where the OS draws your views).

Through JSI, your JavaScript can call native functions directly and efficiently.

✅ TL;DR: JSI lives inside the app binary on the device, linking JS (Hermes) to native code — it’s not in your /project folder or inside Hermes itself.

🧵 Q4: Are the JS thread and native thread part of the bundle or something else?

No — they are not part of your JS bundle.

🧠 Breakdown:

JS Thread: Created by the Hermes engine at runtime on the device. It runs your JavaScript code.
Native Thread (UI Thread): Created by the OS (Android/iOS). It handles rendering and user interactions.

Your bundle is just your JavaScript code — it runs on the JS thread, which communicates with the native thread via JSI.

✅ TL;DR: Threads exist on the device at runtime, not inside your JS bundle. The bundle just runs on the JS thread.

🧩 Q5: Do the native thread and JSI live inside the project’s `/android` folder or in Hermes?

Neither.

Native Thread: Created by the OS on the device to handle UI and system tasks.
JSI (JavaScript Interface): Part of React Native’s compiled native code, included in the app binary.
Hermes: Only runs your JavaScript code on the JS thread.

JSI connects Hermes (JS) to the native thread, allowing them to talk.

✅ TL;DR: Both JSI and the native thread exist on the device at runtime — not in your project folder or inside Hermes.

💡 Q6: What’s the difference between code in my project (`/app`, `/android`) and what really runs on the device?

Your project files (/app, /android, etc.) contain source code — the code you write in JS, XML, Java, or Kotlin.

What runs on the device is the compiled app binary, which includes:

Your JS bundle, executed by Hermes on the JS thread.
Your native code, compiled for Android/iOS, running on the native thread.

React Native bridges them via JSI, so your JS can control real native UI components.

✅ TL;DR: Source code is your “instructions.” The device runs the compiled JS and native code, connected through JSI.

📦 Q7: When does bundling happen, and how does Hermes get my code?

Bundling happens when you run or build your app — for example, with:

npx expo start

or during a production build.

All your JavaScript files are combined into a single JS bundle, which is then:

Sent to the device/emulator,
Executed by Hermes on the JS thread.

Hermes runs your JS code and communicates with the native world via JSI.

✅ TL;DR: Bundling packages your JS into one file, which Hermes executes at runtime — JSI connects it to native code.

🚨 Fixing Image Asset Issues in OTA Updates for React Native: Overcoming Stale Assets After Updates

Arijit das — Tue, 13 May 2025 16:31:31 +0000

After implementing a manual OTA (Over-The-Air) update system for my React Native app, I ran into a major limitation: images imported via require() don’t update with the JS bundle. React Native statically bundles assets during build time, so even after a successful OTA update, the images remained stale.

To solve this, I created a flexible system where image assets are:

Organized by screen density (drawable-mdpi, hdpi, etc.),
Zipped into a single file,
Hosted on Firebase Hosting,
Downloaded and unzipped at runtime,
Loaded dynamically using file URIs.

Here’s exactly how I did it:

📁 Step 1: Organizing the Asset Bundle (`ota-bundles`)

My folder structure looks like this:

📦ota-bundles/
 ┣ 📂drawable-mdpi/
 ┃ ┣ 📜assets_workoutimage_triceps_tricepdips.webp
 ┃ ┣ 📜node_modules_reactnativecalendars_src_img_down.png
 ┃ ┗ 📜... more images
 ┣ 📂drawable-hdpi/
 ┣ 📂drawable-xhdpi/
 ┣ 📂drawable-xxhdpi/
 ┣ 📂drawable-xxxhdpi/
 ┣ 📜index.android.bundle         ← OTA JS bundle
 ┣ 📜version.json                 ← Version tracking file
 ┣ 📜index.html, 404.html         ← Firebase placeholders
 ┗ 📜ota-bundles.zip              ← Zipped OTA bundle

Inside each drawable-* folder, I placed all relevant image assets including custom app images and auto-extracted images used by third-party libraries (like react-native-calendars, react-navigation, etc.).

📦 Step 2: Zipping the Asset Bundle

Once my folder structure was ready, I zipped the entire ota-bundles folder:

zip -r ota-bundles.zip ota-bundles/

This produced ota-bundles.zip, which contains:

index.android.bundle (JS code),
drawable-* folders (images),
version.json (to detect updates).

This .zip file is what my app will download during an update.

☁️ Step 3: Hosting the Zip File on Firebase Hosting

Firebase Hosting provides a reliable and fast CDN for serving static files.

Setup

Now host the whole ota-bundles.
Run:

firebase deploy --only hosting

After deployment, Firebase gives you a public URL:

   https://your-app.web.app/ota-bundles.zip

This URL is then used in the app to download the update.

📲 Step 4: Downloading & Unzipping the Assets at Runtime

In your React Native app, you handle this zip file using react-native-fs and react-native-zip-archive:

import RNFS from 'react-native-fs';
import { unzip } from 'react-native-zip-archive';

const ZIP_URL = 'https://your-app.web.app/ota-bundles.zip';
const LOCAL_ZIP = `${RNFS.DocumentDirectoryPath}/ota-bundles.zip`;
const EXTRACT_PATH = `${RNFS.DocumentDirectoryPath}/ota-bundles`;

export const downloadAndExtractBundle = async () => {
  // Step 1: Download ZIP
  const downloadRes = await RNFS.downloadFile({
    fromUrl: ZIP_URL,
    toFile: LOCAL_ZIP,
  }).promise;

  if (downloadRes.statusCode === 200) {
    // Step 2: Extract
    const extractedPath = await unzip(LOCAL_ZIP, EXTRACT_PATH);
    await RNFS.unlink(LOCAL_ZIP); // Clean up
    console.log('Assets extracted to:', extractedPath);
  } else {
    console.warn('Failed to download OTA bundle');
  }
};

🖼️ Step 5: Loading Images Dynamically

React Native’s require() doesn’t support dynamic paths. Instead, you use the file:// URI scheme to load images like this:

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import RNFS from 'react-native-fs';

const imagePath = `${RNFS.DocumentDirectoryPath}/ota-bundles/drawable-mdpi/assets_workoutimage_triceps_tricepdips.webp`;

export default function TricepsImage() {
  return <Image source={{ uri: `file://${imagePath}` }} style={styles.image} />;
}

const styles = StyleSheet.create({
  image: {
    width: 120,
    height: 120,
    resizeMode: 'contain',
  },
});

This works across all densities by checking PixelRatio and dynamically selecting the correct drawable-* folder if needed.

Building Your Own OTA Update System for React Native (Post App Center Era)

Arijit das — Wed, 23 Apr 2025 20:30:09 +0000

With Microsoft officially shutting down App Center, many developers like me were left looking for alternatives for pushing Over-The-Air (OTA) updates in React Native. I wanted a solution that gave me full control—something lightweight, self-hosted, and easy to maintain.

So I built my own OTA update mechanism. Here's how I did it, why it works, and how you can do the same.

🧠 First, how does OTA work?

Over-the-Air updates in React Native allow you to update your JavaScript bundle without publishing a new build to the Play Store or App Store. It works like this:

You host a JS bundle and version file on a server.
Your app checks the server to see if a newer version is available.
If yes, it downloads the new bundle and stores it locally.
The app loads this new bundle on the next restart, giving users the updated experience without reinstalling the app.

💡 Why I chose to build my own system

After App Center sunset, I wanted something:

That works offline and online.
Doesn’t rely on third-party services.
Gives full control over updates.
Integrates easily into a React Native CLI app.
Works on Android (and can be extended to iOS later).

✅ Benefits of the custom OTA system

🔧 Complete control over the update process.
💰 Zero cost – hosted the files on Firebase Hosting.
🔄 Instant rollback by reverting the hosted files.
🧪 Easy to test – can simulate updates locally.

📦 What you'll need

Firebase Hosting (or any static hosting solution)
react-native-fs for file handling
react-native-restart to apply updates
axios to fetch remote version data
AsyncStorage to store current version

The Basic OTA Update Flow

Before diving into implementation details, let's understand the core steps for Over-The-Air (OTA) updates in React Native:

Bundle the app - Create a JavaScript bundle containing your latest code changes
Upload the bundle - Send this bundle to a server where your app can access it
Download updates - Have your app check for and download these updates automatically

My Implementation Approach

Step 1: Setting Up the Bundle Structure

I created a dedicated folder called ota-bundles to manage all files needed for OTA updates. This includes:

The JavaScript bundle (index.android.bundle)
A version file (version.json)
Supporting HTML files
Asset directories for images

Here's the version.json file structure:

{
  "version": "1.1.0",
  "timestamp": "2025-04-22T20:34:56Z"
}

Generating the Bundle

To create the bundle, I used the following React Native CLI command:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ota-bundles/index.android.bundle --assets-dest ota-bundles

What this command does:

--platform android: Specifies we're bundling for Android
--dev false: Creates a production-optimized bundle
--entry-file index.js: The root file of our application
--bundle-output: Where to save the generated bundle
--assets-dest: Where to copy all static assets

This generates:

index.android.bundle: The actual JavaScript code bundle
404.html and index.html: Basic HTML files needed for hosting
Various asset folders (drawable-*) containing all images from the app

Step 2: Hosting the Bundle with Firebase

I chose Firebase Hosting for its simplicity, reliability, and free tier. Here's how I set it up:

Install Firebase CLI:

   npm install -g firebase-tools
   firebase login

Initialize Firebase Hosting:

   firebase init hosting

Configuration options I selected:

Public directory: ./ota-bundles (where our bundle is located)
Single-page app: No (since we're not building a web app)
Overwrite index.html: No

Deploy the bundle:

   firebase deploy --only hosting

After successful deployment, Firebase provides a hosting URL where our bundle is accessible (e.g., https://projectname-abcd.web.app).

The Update Manager Implementation

Here's the complete update manager code with explanations:

import AsyncStorage from "@react-native-async-storage/async-storage";
import axios from "axios";
import { Alert } from "react-native";
import RNFS from 'react-native-fs';
import RNRestart from 'react-native-restart';

// Firebase hosting URLs
const FIREBASE_BASE_URL = 'https://projectname-abcd.web.app';
const VERSION_URL = `${FIREBASE_BASE_URL}/version.json`;
const BUNDLE_URL = `${FIREBASE_BASE_URL}/index.android.bundle`;

// Local storage keys and paths
const LOCAL_VERSION_KEY = 'localJsBundleVersion';
const LOCAL_BUNDLE_PATH = `${RNFS.DocumentDirectoryPath}/index.android.bundle`;

export const checkForUpdate = async () => {
    try {
        // Fetch version with cache-busting to ensure fresh check
        const response = await axios.get(VERSION_URL, {
          headers: {
              'Cache-Control': 'no-cache',
              'Pragma': 'no-cache',
              'Expires': '0',
          },
          params: {
              t: Date.now(),  // Timestamp to prevent caching
          }
        });

        console.log('response', response)
        const remoteVersion = response?.data?.version
        const localVersion = await AsyncStorage.getItem(LOCAL_VERSION_KEY);

        console.log('📦 Remote version:', remoteVersion, '| Local version:', localVersion);

        if (localVersion !== remoteVersion) {
            Alert.alert('Update Available', 'New update found. Download now?', [
              { text: 'Cancel', style: 'cancel' },
              {
                text: 'Update',
                onPress: async () => {
                  await downloadBundle(remoteVersion);
                },
              },
            ]);
          }
    } catch (error) {
        console.log('Error fetching remote version:', error);
    }
}

const downloadBundle = async (version) => {
    try {
        console.log('⬇️ Downloading JS bundle...');
        const downloadResult = await RNFS.downloadFile({
            fromUrl: BUNDLE_URL,
            toFile: LOCAL_BUNDLE_PATH,
          }).promise;

          if (downloadResult.statusCode === 200) {
            console.log('✅ Bundle downloaded to:', LOCAL_BUNDLE_PATH);
            await AsyncStorage.setItem(LOCAL_VERSION_KEY, version);
            Alert.alert('Update Ready', 'Restart app to apply update?', [
                {
                  text: 'Restart Now',
                  onPress: () => {
                    RNRestart.Restart();
                  },
                },
              ]);
          } else {
            throw new Error('Download failed with status ' + downloadResult.statusCode)
          }
    } catch (error) {
        console.error('❌ Failed to download bundle:', error);
    }
}

export const loadUpdateIfAvailable = async () => {
    try {
        const exist = await RNFS.exists(LOCAL_BUNDLE_PATH)
        if(exist){
            console.log('📲 Local bundle exists at:', LOCAL_BUNDLE_PATH);
        }
    } catch (error) {
        console.error('❌ Failed to check local bundle:', error);
    }
}

Key Packages and Their Roles

react-native-fs (RNFS):
- Provides filesystem access to read/write the downloaded bundle
- Needed because we can't just fetch the bundle with axios - we need to save it to the device's filesystem
react-native-restart (RNRestart):
- Restarts the app to apply the new bundle
- Required because React Native needs to reload to use the new code
@react-native-async-storage/async-storage:
- Stores the current version number locally
- Helps determine if an update is available
axios:
- Makes HTTP requests to check the version and download the bundle
- More robust than fetch with better error handling

Why Not Just Use Axios?

A simple axios GET request isn't sufficient because:

We need to persist the downloaded bundle to the filesystem
We need to verify the download was successful (status code, file integrity)
We need to manage the local version to prevent re-downloading
We need to handle large file downloads with progress tracking (though not shown here)

Integrating in Your App

In your main App component, you'll want to check for updates when the app starts:

useEffect(() => {
  if (!loading && isAuthenticated && !showSplash) {
    console.log('🔥 App ready – running update check...');
    checkForUpdate(); // safe to show Alert
    loadUpdateIfAvailable();
  }
}, [loading, isAuthenticated, showSplash]);

This ensures:

Updates are checked only after initial loading is complete
The user is authenticated (if your app requires it)
The splash screen is no longer showing (so alerts are visible)

Important Considerations

Testing and Updating Your React Native App with OTA Updates

Initial Setup and Testing

After implementing the OTA update system, here's how to properly test it on a physical device:

Build and Install the APK:

   cd android && ./gradlew assembleRelease

Then install the generated APK on your device (typically found at android/app/build/outputs/apk/release/app-release.apk).

Making Updates and Deploying Changes

When you need to push an update to your app:

Step 1: Clean Previous Bundle

rm -rf ota-bundles/index.android.bundle

This removes the old bundle to ensure we're starting fresh with our new changes.

Step 2: Generate New Bundle

npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file index.js \
  --bundle-output ota-bundles/index.android.bundle \
  --assets-dest ota-bundles \
  --reset-cache

Key flags explained:

--reset-cache: Ensures you're not using any cached code from previous builds
The other flags maintain the same configuration as your initial bundle

Step 3: Update Version Number

Before deploying, update your ota-bundles/version.json:

{
  "version": "1.1.1",
  "timestamp": "2025-04-24T10:00:00Z"
}

Always increment the version number (following semantic versioning) and update the timestamp.

Step 4: Deploy to Firebase

firebase deploy --only hosting

After successful deployment, you'll see output similar to:

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-project/overview
Hosting URL: https://your-project.web.app

Testing the Update Flow

Open your installed app on the physical device
Trigger the update check (either automatically via your useEffect or manually if you have a debug menu)
Verify the update process:
- The app should detect the new version (1.1.1 vs your installed 1.1.0)
- Show the update prompt
- Successfully download the new bundle
- Restart the app when prompted

Verifying the Update

To confirm the update was successful:

Check your console logs for messages like:

   📦 Remote version: 1.1.1 | Local version: 1.1.0
   ✅ Bundle downloaded to: /data/user/0/com.yourapp/files/index.android.bundle

After restart, verify your new changes are visible
Check AsyncStorage to confirm the new version was saved:

   const version = await AsyncStorage.getItem('localJsBundleVersion');
   console.log('Current version:', version); // Should show 1.1.1

done ✅

//this below part is for images

😓 But Then I Faced a New Problem...

Even after the JavaScript bundle updated correctly, I noticed that image assets weren’t updating — they were still showing the old versions from the original build. That’s when I realized:

React Native bundles images statically at build time. OTA updates don’t cover assets like images, icons, etc.

💡 Solution: Download Assets Separately

To solve this, I created a system where image assets are zipped and downloaded alongside the JS bundle, then loaded dynamically at runtime.

👉 Check out how I solved it in detail here:
[🔗 Fixing Image Asset Issues in OTA Updates for React Native
](#)

(Replace the link above with your actual blog anchor or page link)

This next part shows you how to:

Zip your drawable-* folders,
Host them on Firebase,
Download and unzip them during app startup,
Load them with file:// URIs dynamically inside React Native.

How to Implement Redis Caching in Golang for Beginners: A Step-by-Step Guide(Windows Edition)

Arijit das — Sat, 15 Feb 2025 04:15:44 +0000

🚀 How to Integrate Redis Caching in Golang

In this post, I'll walk you through how to set up and use Redis caching in a Golang project. This setup helps in reducing database queries and improving performance by caching frequently requested data.

🔹 Why Use Redis for Caching?

✅ Reduces database load

✅ Improves response time

✅ Easy key-value storage

✅ Supports expiration & invalidation

📌 Step 1: Install Redis Package

We use the go-redis/v9 package to interact with Redis. Install it using:

go get github.com/redis/go-redis/v9

📌 Step 2: Initialize Redis Client

Create a file utils/redis.go and add the following:

package utils

import (
    "context"
    "crypto/tls"
    "log"

    "github.com/redis/go-redis/v9"
)

var (
    RedisClient *redis.Client
    Ctx         = context.Background()
)

// Initialize Redis Connection
func InitRedis() {
    RedisClient = redis.NewClient(&redis.Options{
        Addr:     "127.0.0.1:6379", // Replace with Redis host
        Password: "", // Replace with Redis password
        DB:       0,


    _, err := RedisClient.Ping(Ctx).Result()
    if err != nil {
        log.Fatalf("❌ Failed to connect to Redis: %v", err)
    }
    log.Println("✅ Redis connection established")
}

🔹 If using a local Redis instance, set Addr: "127.0.0.1:6379" and remove TLSConfig.

🔹 For cloud Redis providers (like Aiven, AWS, etc.), use the TLS setup.

📌 Step 3: Implement Caching Functions

Add the following caching functions to manage data in Redis:

package utils

import (
    "encoding/json"
    "errors"
    "log"
    "time"
)

// CacheGet: Fetch data from Redis
func CacheGet(key string, result interface{}) (bool, error) {
    log.Printf("🔍 Checking cache for key: %s", key)

    val, err := RedisClient.Get(Ctx, key).Result()
    if err == redis.Nil {
        return false, errors.New("key does not exist") // Cache miss
    } else if err != nil {
        return false, errors.New("internal server error")
    }

    // Unmarshal JSON into result
    err = json.Unmarshal([]byte(val), result)
    if err != nil {
        return false, err
    }

    log.Printf("✅ Cache hit for key: %s", key)
    return true, nil
}

// CacheSet: Store data in Redis
func CacheSet(key string, value interface{}, expiration time.Duration) error {
    jsonData, err := json.Marshal(value)
    if err != nil {
        return err
    }

    return RedisClient.Set(Ctx, key, jsonData, expiration).Err()
}

// InvalidateCache: Delete a cached key (for updates)
func InvalidateCache(key string) error {
    err := RedisClient.Del(Ctx, key).Err()
    if err != nil {
        log.Printf("❌ Error invalidating cache for key: %s", key)
        return err
    }
    log.Printf("🗑️ Cache invalidated for key: %s", key)
    return nil
}

🔹 CacheGet() → Checks if the key exists, retrieves & unmarshals data.

🔹 CacheSet() → Stores JSON-encoded data with an expiration time.

🔹 InvalidateCache() → Deletes a cache entry (useful when data updates).

📌 Step 4: Use Redis Cache in Database Queries

Modify your database query functions to first check Redis before querying the database:

package services

import (
    "errors"
    "log"
    "time"
    "your_project/utils" // Import utils package
)

var cacheExpiration = 10 * time.Minute // Set cache expiration time

type Category struct {
    ID   int    `json:"id"`
    Name string `json:"name"`
}

func GetAllCategories() ([]Category, error) {
    var categories []Category
    cacheKey := "categories_cache"

    // 1️⃣ Check Redis cache first
    cached, err := utils.CacheGet(cacheKey, &categories)
    if err != nil {
        log.Printf("Redis CacheGet error: %v", err)
    }
    if cached {
        log.Println("✅ Categories fetched from Redis cache")
        return categories, nil
    }

    // 2️⃣ Cache miss → Fetch data from DB
    log.Println("⚠️ Cache miss: Fetching categories from DB")
    query := `SELECT id, name FROM categories`
    rows, err := utils.DB.Query(query)
    if err != nil {
        return nil, errors.New("database error")
    }
    defer rows.Close()

    for rows.Next() {
        var category Category
        if err := rows.Scan(&category.ID, &category.Name); err != nil {
            return nil, errors.New("data scan error")
        }
        categories = append(categories, category)
    }

    // 3️⃣ Store fetched data in Redis
    if err := utils.CacheSet(cacheKey, categories, cacheExpiration); err != nil {
        log.Printf("Redis CacheSet error: %v", err)
    }

    log.Println("✅ Categories cached in Redis")
    return categories, nil
}

🔹 First, check Redis cache using CacheGet().

🔹 If cache miss, query the database.

🔹 Store result in Redis for future use with CacheSet().

📌 Step 5: Invalidate Cache When Data Changes

Whenever new categories are added, remove the outdated cache:

err := utils.InvalidateCache("categories_cache")
if err != nil {
    log.Printf("Error invalidating cache: %v", err)
}

🔹 Use this after adding/updating/deleting data to keep cache fresh.

If you want to test Redis caching locally on Windows, follow these steps:

✅ Step 1: Install & Run Redis Locally

Download Redis for Windows:
- (Redis is not natively supported on Windows)
- Install and run the Redis server.
Start Redis Server:

If you installed Redis using WSL or a Redis-compatible version, start it using:

   redis-server

Check if Redis is Running: Open Command Prompt (cmd) and run:

   redis-cli ping

If Redis is running, it should return:

   PONG

✅ Step 2: Set & Get Keys in Redis (Local Testing)

To manually check your cache for the key categories_cache, use the following commands in Command Prompt:

Open Redis CLI:

   redis-cli

Check if categories_cache exists:

   EXISTS categories_cache

If it returns 1, the key exists. If 0, it's missing.

Get Cached Data:

   GET categories_cache

This should return the cached JSON data.

DEV Community: Arijit das

Stop Struggling with Maps in React Native — Here’s the Complete Guide

☕ How I Actually Got Google Maps Working in React Native (and Why It Took Me Way Longer Than It Should Have)

🧩 Why Maps Aren't Just "Install and Go"

🌍 What react-native-maps Actually Does

⚙️ The Part Where I Actually Set This Up (Android Edition)

🧭 Step 1: Get Your Google Maps API Key

🔑 Step 2: Tell Android About Your API Key

🔍 Step 3: Get Your SHA-1 Fingerprint

📂 Navigate to your Android folder

💻 Run the signing report

🧹 Step 4: Clean Everything and Rebuild

🗺️ The Moment of Truth: A Working Map 🎉

🧠 Understanding What These Components Actually Do

🗺️ <MapView> — Your Map Canvas

📍 <Marker> — The Pin

💬 <Callout> — Info Popup

🛣️ <Polyline> — Draw Routes

🔵 <Circle> — Highlight Areas

🚀 Going Beyond the Basics: Making It Interactive

💡 What’s Happening Behind the Scenes

🎨 Making Your Map Look Less... Generic

📍

⚠️ Quick Fix: If Your Geocoding API Isn't Working

🎯 The Fixed Pin Approach (Better UX)

🔄 Reverse Geocoding: Two Ways to Do It

📱 Method 1: Using Expo Location (Simple & Clean)

✅ Pros:

❌ Cons:

🌐 Method 2: Using Google Geocoding API (Detailed & Powerful)

✅ Pros:

❌ Cons:

🧩 Understanding address_components (The Confusing Part)

🧠 Why Google Returns Multiple Results

💡 Parsing Smart: Getting What You Actually Need

Get Just City and State:

Get Full Formatted Address (Easy Mode):

Get Specific Components (Custom):

🎯 Which Method Should You Actually Use?

Use Expo Location if:

Use Google Geocoding API if:

🔥 My Approach: Best of Both Worlds

🚀 Putting It All Together

Final Thoughts

🤖 I Used AI to Learn React Native Deeply — So You Don’t Have To

🚀 What Actually Happens When You Open the Homepage in React Native

✅ Step 1: You Run the App

✅ Step 2: Expo Bundles and Sends Your Code

✅ Step 3: React Builds a “Virtual Plan”

✅ Step 4: React Native Acts as the Translator 🗣️

✅ Step 5: Android Creates Real Native Views

✅ Step 6: The UI Appears on Screen

✅ Step 7: Interaction — You Tap the Button

🧩 Where the Mapping Lives

🔍 Want to See the Native Views?

🧱 What You Don’t Need to Worry About (Yet)

⚡ In One Sentence

❓ React Native Deep-Dive — Q&A Section

🧩 Q1: Where is the mapping between <Text> and Android’s TextView defined?

🔍 What happens there:

🚫 Q2: What happens if I create a component that doesn’t exist on the native side?

🔧 Why it happens:

⚙️ Q3: Where does JSI actually stay — in my project folder, in Hermes, or in the device?

🧵 Q4: Are the JS thread and native thread part of the bundle or something else?

🧠 Breakdown:

🧩 Q5: Do the native thread and JSI live inside the project’s /android folder or in Hermes?

💡 Q6: What’s the difference between code in my project (/app, /android) and what really runs on the device?

📦 Q7: When does bundling happen, and how does Hermes get my code?

🚨 Fixing Image Asset Issues in OTA Updates for React Native: Overcoming Stale Assets After Updates

📁 Step 1: Organizing the Asset Bundle (ota-bundles)

📦 Step 2: Zipping the Asset Bundle

☁️ Step 3: Hosting the Zip File on Firebase Hosting

Setup

📲 Step 4: Downloading & Unzipping the Assets at Runtime

🖼️ Step 5: Loading Images Dynamically

Building Your Own OTA Update System for React Native (Post App Center Era)

🧠 First, how does OTA work?

💡 Why I chose to build my own system

✅ Benefits of the custom OTA system

📦 What you'll need

🌍 What `react-native-maps` Actually Does

🗺️ `<MapView>` — Your Map Canvas

📍 `<Marker>` — The Pin

💬 `<Callout>` — Info Popup

🛣️ `<Polyline>` — Draw Routes

🔵 `<Circle>` — Highlight Areas

🧩 Understanding `address_components` (The Confusing Part)

🧩 Q1: Where is the mapping between `<Text>` and Android’s `TextView` defined?

🧩 Q5: Do the native thread and JSI live inside the project’s `/android` folder or in Hermes?

💡 Q6: What’s the difference between code in my project (`/app`, `/android`) and what really runs on the device?

📁 Step 1: Organizing the Asset Bundle (`ota-bundles`)