Forem: Dainy Jose

Preparing Your iOS App for the Upcoming SDK Requirements (April 2026)

Dainy Jose — Thu, 16 Apr 2026 12:10:57 +0000

Apple has announced new minimum SDK requirements for App Store submissions starting April 28, 2026. If you're working on an iOS app, it's time to plan your upgrade.

What’s Changing?

All apps submitted to App Store Connect must be built with the latest SDK versions:

iOS / iPadOS → SDK 26 or later
tvOS → SDK 26 or later
visionOS → SDK 26 or later
watchOS → SDK 26 or later

Required Upgrades

To meet these requirements, ensure your development environment is updated:

macOS → Version 26.4 (Tahoe)
Xcode → Version 26

Common Issue After Upgrade

After upgrading, you might encounter a build issue related to the fmt library (v11.0.2) when running the app on a physical device.

This happens because the newer Apple Clang compiler in Xcode 26 has compatibility issues with consteval.

Workaround Fix (Podfile Patch)

Add the following snippet inside your existing post_install do |installer| block in your Podfile:

# Workaround for Xcode 26: newer Apple Clang breaks consteval in fmt 11.0.2
# Patch base.h to disable consteval since the header doesn't check for pre-defined FMT_USE_CONSTEVAL.

fmt_base = File.join(installer.sandbox.root, 'fmt', 'include', 'fmt', 'base.h')
if File.exist?(fmt_base)
  content = File.read(fmt_base)
  unless content.include?('Xcode 26 workaround')
    patched = content.gsub(
      /^(#elif defined\(__cpp_consteval\)\n#  define FMT_USE_CONSTEVAL) 1/,
      "// Xcode 26 workaround: disable consteval\n\\1 0"
    )
    if patched != content
      File.chmod(0644, fmt_base)
      File.write(fmt_base, patched)
    end
  end
end

Final Steps

Add the snippet to your Podfile
Run:

   pod install

Clean and rebuild your project

References

Apple Announcement: https://developer.apple.com/news/?id=ueeok6yw
Expo Issue Thread: https://github.com/expo/expo/issues/44229

Tip: Don’t wait until the deadline. Upgrade early to identify and fix compatibility issues in your dependencies.

✍️ Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).
Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.

💼 Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Implementing Firebase Crashlytics in React Native

Dainy Jose — Sun, 15 Mar 2026 08:19:26 +0000

Firebase Crashlytics is a lightweight, real-time crash reporting tool that helps developers monitor, track, and fix app crashes. Integrating Crashlytics in a React Native app improves app stability and ensures you can react quickly to issues in production.

1. Prerequisites

Before implementing Crashlytics, ensure you have:

A React Native project (bare or Expo managed workflow).
Firebase project created in Firebase Console.
@react-native-firebase/app and @react-native-firebase/crashlytics installed (for bare workflow).

2. Install Dependencies

For React Native bare workflow, install Firebase packages:

npm i @react-native-firebase/app @react-native-firebase/crashlytics

For Expo managed workflow, you can use the bare workflow or expo-firebase-crashlytics (currently requires ejecting to bare workflow for full support).

3. Configure Firebase in Your Project

iOS Setup

Download GoogleService-Info.plist from Firebase Console.
Add it to ios/YourAppName folder.
In Xcode, select your project → Build Phases → Copy Bundle Resources, and ensure GoogleService-Info.plist is included.

Android Setup

Download google-services.json from Firebase Console.
Place it under android/app/.
Modify android/build.gradle:

buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

Modify android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.1.0')
    implementation 'com.google.firebase:firebase-crashlytics'
}

4. Initialize Firebase Crashlytics

In your app’s entry file (App.tsx or index.js):

import crashlytics from '@react-native-firebase/crashlytics';
import React, { useEffect } from 'react';
import { Button, View, Text } from 'react-native';

export default function App() {
  useEffect(() => {
    // Enable Crashlytics collection
    crashlytics().setCrashlyticsCollectionEnabled(true);

    // Log app start
    crashlytics().log('App mounted');
  }, []);

  const testCrash = () => {
    // This will trigger a test crash
    crashlytics().crash();
  };

  const logCustomError = () => {
    crashlytics().recordError(new Error('Custom handled error'));
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Firebase Crashlytics Demo</Text>
      <Button title="Test Crash" onPress={testCrash} />
      <Button title="Log Custom Error" onPress={logCustomError} />
    </View>
  );
}

5. Best Practices

Enable crash reporting in production only:

if (!__DEV__) {
    crashlytics().setCrashlyticsCollectionEnabled(true);
}

Log user-specific info for better context:

crashlytics().setUserId('USER_12345');
crashlytics().setAttributes({ plan: 'premium', region: 'IN' });

Use recordError for handled errors:
Avoid throwing errors for non-critical events; instead, log them for debugging.
Test integration using the crash() method to ensure crashes are visible in Firebase Console.

6. Optional: Handling Unhandled JS Exceptions

React Native allows capturing unhandled JS exceptions and forwarding them to Crashlytics:

import { setJSExceptionHandler } from 'react-native-exception-handler';
import crashlytics from '@react-native-firebase/crashlytics';

const errorHandler = (error, isFatal) => {
  crashlytics().recordError(error);
};

setJSExceptionHandler(errorHandler, true);

7. Monitoring & Analytics

Go to Firebase Console → Crashlytics.
View real-time crash reports.
Identify affected users, device types, OS versions.
Track errors by severity and frequency.

8. Conclusion

Integrating Firebase Crashlytics in React Native is straightforward but highly valuable. It helps:

Quickly identify and fix critical bugs.
Improve app stability for real users.
Track both fatal crashes and handled exceptions.

References

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Real-Time Location Tracking & Live Route Updates in React Native

Dainy Jose — Sun, 07 Dec 2025 15:56:04 +0000

Introduction

In Part 3 we explored how to show nearby places and draw routes.
Now it’s time to go real-time — tracking a moving user (or driver) on the map and updating the route live.

We’ll use:

react-native-maps → to display the route
expo-location → to stream position updates
socket.io / API polling → to broadcast position changes (optional for multi-user scenarios)

Step 1: Basic Setup

npx expo install react-native-maps expo-location
npm install socket.io-client

Step 2: Watch the User’s Location Continuously

import React, { useEffect, useState } from "react";
import { View, StyleSheet } from "react-native";
import MapView, { Marker, Polyline } from "react-native-maps";
import * as Location from "expo-location";

export default function LiveTrackingScreen() {
  const [region, setRegion] = useState<any>(null);
  const [routeCoords, setRouteCoords] = useState<any[]>([]);

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== "granted") return;

      const loc = await Location.getCurrentPositionAsync({});
      const { latitude, longitude } = loc.coords;

      setRegion({
        latitude,
        longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      });

      const sub = await Location.watchPositionAsync(
        {
          accuracy: Location.Accuracy.Highest,
          timeInterval: 3000,
          distanceInterval: 5, // update every 5 m
        },
        (pos) => {
          const { latitude, longitude } = pos.coords;
          setRouteCoords((prev) => [...prev, { latitude, longitude }]);
          setRegion((r) => ({ ...r, latitude, longitude }));
        }
      );

      return () => sub.remove();
    })();
  }, []);

  if (!region) return null;

  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        {routeCoords.length > 0 && (
          <>
            <Polyline coordinates={routeCoords} strokeWidth={4} strokeColor="#007AFF" />
            <Marker coordinate={routeCoords[routeCoords.length - 1]} title="You" />
          </>
        )}
      </MapView>
    </View>
  );
}

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

What this does:

Requests location permission.
Watches position every few seconds/meters.
Draws a live polyline trail of movement.

Step 3: (Optional) Share Location in Real Time

To show another user’s movement (for example, a delivery partner), send location updates through a backend socket:

import io from "socket.io-client";
const socket = io("https://your-backend-url.com");

useEffect(() => {
  if (!routeCoords.length) return;
  const last = routeCoords[routeCoords.length - 1];
  socket.emit("location:update", last);
}, [routeCoords]);

On the receiver side:

socket.on("location:update", (coords) => {
  setDriverLocation(coords);
});

You’ll then render driverLocation as a marker that updates instantly.

Step 4: Smooth Marker Animation

For smoother UX, use react-native-maps-animated-marker or Animated API to interpolate coordinates:

// pseudo
Animated.timing(markerRef, {
  toValue: new AnimatedRegion({ latitude, longitude }),
  useNativeDriver: false,
}).start();

This creates a fluid moving-car effect rather than jumpy updates.

Conclusion

And that’s it — you’ve built a real-time location tracker with live route updates.

Key takeaways:

Use watchPositionAsync for continuous tracking.
Store coordinates to visualize movement with polylines.
Integrate sockets for multi-user real-time sharing.
Animate markers for smooth transitions.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Showing Nearby Places & Routes in React Native Maps

Dainy Jose — Mon, 01 Dec 2025 02:18:54 +0000

Introduction

In Part 1 we integrated maps into React Native, and in Part 2 we built a location picker.

Now, let’s make it smarter — by showing nearby places (like restaurants or stores) and drawing routes between two points.

We’ll use:

react-native-maps for rendering
Google Places API for nearby results
Google Directions API for routing

Step 1: Enable Required APIs

Go to your Google Cloud Console
Enable:

Maps SDK for Android / iOS
Places API
Directions API

Create or reuse an API key and restrict it to your app’s bundle ID or SHA-1.

Step 2: Basic Setup

npx expo install react-native-maps expo-location
npm install axios

Step 3: Fetch Nearby Places

import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import MapView, { Marker, Polyline } from 'react-native-maps';
import * as Location from 'expo-location';
import axios from 'axios';

const GOOGLE_API_KEY = 'YOUR_GOOGLE_MAPS_API_KEY';

export default function NearbyMap() {
  const [region, setRegion] = useState<any>(null);
  const [places, setPlaces] = useState<any[]>([]);
  const [routeCoords, setRouteCoords] = useState<any[]>([]);

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;
      const pos = await Location.getCurrentPositionAsync({});
      const { latitude, longitude } = pos.coords;
      setRegion({
        latitude,
        longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      });
      fetchNearby(latitude, longitude);
    })();
  }, []);

  const fetchNearby = async (lat: number, lng: number) => {
    const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${lat},${lng}&radius=1000&type=restaurant&key=${GOOGLE_API_KEY}`;
    const { data } = await axios.get(url);
    setPlaces(data.results);
  };

  const drawRoute = async (destLat: number, destLng: number) => {
    const url = `https://maps.googleapis.com/maps/api/directions/json?origin=${region.latitude},${region.longitude}&destination=${destLat},${destLng}&key=${GOOGLE_API_KEY}`;
    const { data } = await axios.get(url);
    const points = decode(data.routes[0].overview_polyline.points);
    setRouteCoords(points);
  };

  // Polyline decoding helper
  const decode = (t: string) => {
    let points = [];
    for (let step = 0, lat = 0, lng = 0; step < t.length;) {
      let b, shift = 0, result = 0;
      do { b = t.charCodeAt(step++) - 63; result |= (b & 31) << shift; shift += 5; } while (b >= 32);
      lat += (result & 1) ? ~(result >> 1) : (result >> 1);
      shift = result = 0;
      do { b = t.charCodeAt(step++) - 63; result |= (b & 31) << shift; shift += 5; } while (b >= 32);
      lng += (result & 1) ? ~(result >> 1) : (result >> 1);
      points.push({ latitude: lat / 1e5, longitude: lng / 1e5 });
    }
    return points;
  };

  if (!region) return <Text>Loading map...</Text>;

  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        {places.map((p, i) => (
          <Marker
            key={i}
            coordinate={{
              latitude: p.geometry.location.lat,
              longitude: p.geometry.location.lng,
            }}
            title={p.name}
            onPress={() => drawRoute(p.geometry.location.lat, p.geometry.location.lng)}
          />
        ))}
        {routeCoords.length > 0 && (
          <Polyline coordinates={routeCoords} strokeWidth={4} strokeColor="#007AFF" />
        )}
      </MapView>
    </View>
  );
}

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

What this does:

Detects your location
Fetches nearby restaurants within 1 km
Draws a route when you tap a marker

Step 4: Optimize UX

Use a bottom sheet to show place details.
Add filters for different types (cafe, hospital, etc.).
Cache responses for smoother panning.

Conclusion

With just a few APIs, you’ve now added intelligent location awareness to your app — users can view nearby places and get directions instantly.

Key takeaways:

Always restrict your API key.
Decode Google’s polyline for routes.
Combine Places + Directions APIs for real-time navigation features.

What’s Next

Next, I’ll explore “Building Real-Time Location Tracking in React Native” — ideal for delivery or event apps.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Building a Location Picker in React Native Maps (with Draggable Marker & Address Lookup)

Dainy Jose — Sun, 23 Nov 2025 17:59:06 +0000

Introduction

In my previous post, I covered how to integrate Google Maps and display the user’s live location.

Now let’s take it one step further — by creating a location picker where users can drag a marker or move the map to select an address. This feature is perfect for checkout pages, delivery address setup, or event creation screens.

Step 1: Setup

We’ll continue using:

npx expo install react-native-maps expo-location

Optional (for reverse geocoding):

npx expo install expo-location

Step 2: Display the Map with a Draggable Marker

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import * as Location from 'expo-location';

export default function LocationPicker() {
  const [region, setRegion] = useState(null);
  const [address, setAddress] = useState('');

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') return;

      const current = await Location.getCurrentPositionAsync({});
      const { latitude, longitude } = current.coords;
      setRegion({
        latitude,
        longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      });
      getAddress(latitude, longitude);
    })();
  }, []);

  const getAddress = async (lat: number, lng: number) => {
    const [place] = await Location.reverseGeocodeAsync({ latitude: lat, longitude: lng });
    if (place) {
      setAddress(`${place.name || ''}, ${place.city || ''}, ${place.region || ''}`);
    }
  };

  const onMarkerDragEnd = (e: any) => {
    const { latitude, longitude } = e.nativeEvent.coordinate;
    setRegion({ ...region, latitude, longitude });
    getAddress(latitude, longitude);
  };

  if (!region) return <Text>Loading map...</Text>;

  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        <Marker
          coordinate={region}
          draggable
          onDragEnd={onMarkerDragEnd}
          title="Selected Location"
        />
      </MapView>
      <View style={styles.infoBox}>
        <Text style={styles.label}>Selected Address:</Text>
        <Text style={styles.address}>{address || 'Move marker to select'}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
  infoBox: {
    position: 'absolute',
    bottom: 40,
    left: 20,
    right: 20,
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 10,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 6,
  },
  label: { fontWeight: '600', marginBottom: 4 },
  address: { fontSize: 14, color: '#333' },
});

What this does:

Displays your current location.
Lets you drag the marker to a new position.
Updates the address in real time.

Step 3: Use Map Pan Instead of Marker Drag

If you prefer to keep the marker fixed and move the map instead:

<MapView
  style={styles.map}
  region={region}
  onRegionChangeComplete={(r) => {
    setRegion(r);
    getAddress(r.latitude, r.longitude);
  }}
>
  <Marker coordinate={region} />
</MapView>

This feels more natural for UX — the marker stays centered while the user pans the map.

Step 4: Save the Selected Location

Once the user confirms the spot, send it back to your backend or state management:

<Button
  title="Confirm Location"
  onPress={() => console.log('Saved location:', region, address)}
/>

Conclusion

And that’s it! You’ve now built a fully functional location picker in React Native using react-native-maps and Expo Location.

Key Takeaways:

Always handle permissions before rendering the map.

Use reverse geocoding to get human-readable addresses.

For better UX, fix the marker and move the map instead of dragging.

🔗 Next Up

In my next post, I’ll explore how to show nearby places and routes using Google Maps APIs in React Native. Stay tuned!

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Seamless Map Integration in React Native: A Complete Guide

Dainy Jose — Sun, 16 Nov 2025 10:14:36 +0000

Introduction

Integrating maps into a React Native app sounds simple — until you face platform-specific quirks, location permission issues, and crashes (especially on Android).

In this post, I’ll walk you through how I integrated Google Maps into my React Native app using the Expo Bare Workflow, including handling permissions, displaying the user’s live location, and fixing common pitfalls like Android crashes when using showsUserLocation.

Step 1: Setting Up the Map

If you’re using Expo (Bare or Managed), the easiest way to start is with:

npx expo install react-native-maps

Then, import the component:

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


Render a simple map:

export default function MapScreen() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { width: '100%', height: '100%' },
});

That’s your base map ready.

Step 2: Request Location Permissions

To show the user’s live location, install Expo Location:

npx expo install expo-location

Then request permission before displaying the map:

import * as Location from 'expo-location';
import { useEffect, useState } from 'react';

const [location, setLocation] = useState(null);

useEffect(() => {
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      console.warn('Permission denied');
      return;
    }

    let current = await Location.getCurrentPositionAsync({});
    setLocation(current.coords);
  })();
}, []);

Step 3: Display User’s Current Location

Once permission is granted, set your map’s region dynamically:

<MapView
  style={styles.map}
  region={{
    latitude: location?.latitude || 37.78825,
    longitude: location?.longitude || -122.4324,
    latitudeDelta: 0.01,
    longitudeDelta: 0.01,
  }}
  showsUserLocation={true}
  showsMyLocationButton={true}
/>

Step 4: Fix Android Crash with showsUserLocation

If you notice your app crashes on Android when showsUserLocation={true}, it’s usually because:

The location permission isn’t granted before rendering the map, or
The native module initialization fails due to race conditions.

Fix:

Wrap your <MapView /> inside a condition that ensures location is loaded first:

{location && (
  <MapView
    style={styles.map}
    showsUserLocation={true}
    region={{
      latitude: location.latitude,
      longitude: location.longitude,
      latitudeDelta: 0.01,
      longitudeDelta: 0.01,
    }}
  />
)}

This small conditional check prevents the crash on Android and ensures the map renders only after location access.

Step 5: Adding Markers

You can easily add markers for points of interest:

<Marker
  coordinate={{
    latitude: 37.78825,
    longitude: -122.4324,
  }}
  title="My Favorite Spot"
  description="This is where I test map features."
/>

You can even loop through API data to dynamically render multiple markers.

Bonus: Custom Map Styling

You can use Google Map styles to match your app’s branding:

const customMapStyle = [
  {
    elementType: 'geometry',
    stylers: [{ color: '#212121' }],
  },
  {
    elementType: 'labels.text.fill',
    stylers: [{ color: '#757575' }],
  },
];

<MapView
  customMapStyle={customMapStyle}
  ...
/>

Conclusion

Map integration in React Native can be tricky — especially when balancing permission flow and native dependencies — but once set up properly, it unlocks powerful location-based features for your users.

The key takeaways:
✅ Always request permissions before rendering the map

✅ Handle showsUserLocation carefully on Android

✅ Use dynamic regions for better UX

✅ Customize your map style to match your app

Coming Up Next

In my next post, I’ll cover “Building a Location Picker with React Native Maps” — where users can drag the map to set an address or store location.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Step-by-Step Guide to Upgrading Your React Native Expo Project

Dainy Jose — Sun, 02 Nov 2025 16:31:06 +0000

Upgrading a React Native Expo project can seem intimidating — especially when juggling native modules, custom configurations, and environment files. But with the right plan, it can be smooth and predictable.

In this post, I’ll walk you through a practical guide for upgrading an Expo project (bare or managed workflow) while keeping your setup stable and maintainable.

Why Upgrade Regularly?

Regular upgrades ensure:

Access to the latest React Native and Expo features
Improved performance and security
Compatibility with new OS releases
Easier future maintenance

Neglecting upgrades can cause dependency conflicts, native crashes, or build failures during future updates — which are far harder to resolve later.

Before You Begin

1. Check the Current SDK Version

expo --version
expo config --json | grep sdkVersion

2. Review the Upgrade Guides

3. Create a Backup

Always create a branch for the upgrade:

git checkout -b upgrade/sdk-52

4. Update Environment Files

Ensure .env.development and .env.production are consistent.
Tip: Use a library like react-native-dotenv for environment management.

Step 1: Upgrade Expo SDK

Run the official upgrade command:

npx expo upgrade

This automatically updates:

Expo SDK version
Related dependencies (expo-* packages)
iOS and Android native projects (if using bare workflow)

If you’re in a bare workflow, run pod install inside the ios directory after upgrading.

Step 2: Update React Native and Dependencies

Check your current versions:

npm list react react-native

Then, align them with the new Expo SDK version:

npm install react@latest react-native@latest

If you’re using TypeScript, also update:

npm install typescript @types/react @types/react-native --save-dev

Step 3: Clear Cache and Reset Metro Bundler

After upgrading, clear the caches to avoid stale modules:

watchman watch-del-all
rm -rf node_modules
rm -rf $TMPDIR/metro-*
npm install

Step 4: Verify Native Modules

If you use libraries like:

react-native-vision-camera
react-native-share
react-native-blob-util
notifee/react-native

Ensure they’re compatible with the new SDK:

npx expo doctor
npx pod-install

For bare workflow users, verify your native modules in MainApplication.kt / AppDelegate.mm after upgrading.

Step 5: Test Build on Both Platforms

Run the project:

npx expo run:android
npx expo run:ios

If you face issues, open the build logs and look for deprecated properties or mismatched dependencies.

Step 6: Validate App Behavior

Check these:

Splash screen hides correctly
Environment variables load properly
File sharing, notifications, and camera modules still work
Production build signs and runs as expected

You can also test locally with:

npx expo start --clear

Step 7: Commit and Tag the Upgrade

Once stable, commit your changes:

git add .
git commit -m "chore: upgrade to Expo SDK 52 + RN 0.77"
git tag v1.2.0-upgrade

Pro Tips

Use Dependabot or Renovate: Automate version tracking.
Keep a Changelog: Helps you and your team track upgrade impacts.
Test on Real Devices: Emulators don’t always reflect real-world issues.
Avoid Skipping SDKs: Skipping major versions makes future upgrades painful.

Conclusion

Upgrading your Expo project doesn’t have to break your flow.
With the right steps — backups, incremental updates, and consistent testing — you can keep your project future-proof, stable, and developer-friendly.

If you found this helpful, leave a ❤️ or share how you manage upgrades in your own Expo workflow!

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

How I Built My Developer Portfolio with Vite, React, and Bun — Fast, Modern & Fully Customizable

Dainy Jose — Sun, 02 Nov 2025 14:52:41 +0000

A lightweight, modular portfolio built with Vite + React + TypeScript + Bun, designed to showcase projects, blogs, and achievements — built from scratch with simplicity and speed in mind.

Why I Built It

As developers, our portfolios are often the first impression we make — so I wanted mine to be clean, fast, and easy to maintain.

I experimented with several static site tools before finding the perfect trio: Vite, React, and Bun.
This stack offered everything I wanted — modern development, instant reloads, and a minimal setup that just works.

👉 Live Demo: https://dainyjose.github.io/my-portfolio/

👉 Source Code: https://github.com/dainyjose/my-portfolio

Tool	Purpose
Vite	Lightning-fast build tool with instant HMR
React + TypeScript	Component-based architecture with type safety
Bun	Fast JavaScript runtime & package manager
CSS Modules	Clean and scoped component styling
GitHub Pages	Simple and free static site hosting

Setting Up the Project

Vite and Bun make setting up a React + TypeScript project almost instant.

# Create a new Vite + React + TypeScript project
bun create vite my-portfolio --template react-ts

cd my-portfolio

# Install dependencies (super fast!)
bun install

# Start the dev server
bun run dev

Within seconds, the project is live with hot reload and TypeScript support.

Project Structure

Here’s how I organized my portfolio for clarity and scalability:

my-portfolio/
 ┣ src/
 ┃ ┣ components/
 ┃ ┣ pages/
 ┃ ┣ data/
 ┃ ┣ assets/
 ┃ ┗ App.tsx
 ┣ public/
 ┣ index.html
 ┣ vite.config.ts
 ┗ bun.lockb

Highlights:

components/ → Reusable UI elements (Header, Footer, ProjectCard, etc.)
pages/ → Sections like Home, About, Projects, and Contact
data/ → Static project data and links
assets/ → Images and icons

Designing the UI

I went for a simple, professional design — no UI frameworks or heavy styling libraries, just clean CSS Modules for scoped styles.

// src/components/Header.tsx
import styles from "./header.css";

export const Header = () => (
  <header className={styles.header}>
    <h1 className={styles.title}>Dainy Jose</h1>
    <nav className={styles.nav}>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
);

/* src/components/header.css */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
}

.title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #222;
}

.nav a {
  margin-left: 1rem;
  text-decoration: none;
  color: #007bff;
  transition: color 0.2s;
}

.nav a:hover {
  color: #0056b3;
}

This gives full control over the look while keeping the CSS lightweight and maintainable.

Adding Projects & Blogs

To make it easy to update, I store all portfolio items in a single data/projects.ts file:

// src/data/projects.ts
export const projects = [
  {
    name: "My Resume App",
    description: "Created using React + Vite.",
    link: "https://dainyjose.github.io/my-resume/",
  },
];

And render them dynamically:

// src/components/Projects.tsx
import { projects } from "../data/projects";

export const Projects = () => (
  <section id="projects">
    <h2>Projects</h2>
    {projects.map((p) => (
      <a key={p.name} href={p.link} target="_blank" rel="noopener noreferrer">
        <h3>{p.name}</h3>
        <p>{p.description}</p>
      </a>
    ))}
  </section>
);

This makes adding new projects as easy as editing one file.

Optimizing for Performance

To keep the site fast:

Compressed images manually before adding to assets/
Leveraged Vite’s built-in minification and bundling
Bun handled builds incredibly fast

Every rebuild or deploy took only a few seconds.

Deployment

I hosted the portfolio on GitHub Pages using a simple build + deploy command:

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview",
  "deploy": "gh-pages -d dist"
}

Then deployed with:

bun run build
bun run deploy

In just a few seconds, the site was live:
➡️ https://dainyjose.github.io/my-portfolio

Lessons Learned

Bun + Vite make development effortless
- The build and dev speed is unbeatable.
TypeScript ensures long-term scalability
- Strong typing helps maintain clean code.
CSS Modules keep styling simple and scoped
- Easy to maintain and modify as the portfolio grows.
GitHub Pages = quick deployment
- Perfect for personal projects and static sites.

What’s Next

I plan to enhance the portfolio with:

Dark mode toggle
GitHub API integration to auto-fetch repositories
Dev.to API integration for displaying latest blog posts

Final Thoughts

This project reminded me that simplicity is powerful.
You don’t need complex tools or heavy UI frameworks to create something elegant and efficient.

If you’re building your portfolio, I highly recommend giving Vite + React + Bun a try — you’ll be surprised by how smooth the workflow is.

🔗 Repo: https://github.com/dainyjose/my-portfolio

🌐 Live: https://dainyjose.github.io/my-portfolio/

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Advanced Push & Local Notifications in React Native with Firebase and Notifee (Part 2)

Dainy Jose — Tue, 28 Oct 2025 15:56:27 +0000

In the first part of this series, we built a complete Firebase Cloud Messaging (FCM) setup for React Native using Firebase and Notifee.

Now, in Part 2, we’ll go deeper and explore:

📱 Local notifications
✨ Custom notification styles
⏰ Triggers and scheduling
⚡ Action buttons and backend integration
🎧 Media and chat-style notifications
📊 Event tracking for every app state (Foreground, Background, Killed)

This part focuses on building a robust notification system that behaves consistently across app states — with fixes to ensure reliable delivery and accurate navigation.

📱 1. Local Notifications with Notifee

Local notifications are shown without FCM, usually triggered by in-app events — such as reminders or task completions.

import notifee, { AndroidImportance, TriggerType } from '@notifee/react-native';

// Simple local notification
async function showLocalNotification() {
  await notifee.requestPermission();

  const channelId = await notifee.createChannel({
    id: 'local',
    name: 'Local Notifications',
    importance: AndroidImportance.HIGH,
  });

  await notifee.displayNotification({
    title: "'NotifyMeApp Reminder',"
    body: 'Your scheduled task is ready!',
    android: {
      channelId,
      smallIcon: 'ic_launcher',
    },
  });
}

You can call showLocalNotification() anywhere — even as a response to user actions or events.

⏰ 2. Notification Triggers

Notifee allows scheduled or event-based notifications.

Example: Trigger after 10 seconds

const trigger = {
  type: TriggerType.TIMESTAMP,
  timestamp: Date.now() + 10 * 1000, // 10 seconds later
};

await notifee.createTriggerNotification(
  {
    title: 'NotifyMeApp',
    body: '⏰ Scheduled notification fired!',
    android: { channelId: 'local' },
  },
  trigger
);

Example: Repeat daily reminder

const trigger = {
  type: TriggerType.INTERVAL,
  interval: 24 * 60 * 60, // every 24 hours
};

await notifee.createTriggerNotification(
  {
    title: 'Daily Reminder',
    body: 'It’s time to check new updates!',
    android: { channelId: 'local' },
  },
  trigger
);

🧱 3. Customizing Notifications

You can completely customize your notification look using Notifee’s Android styles.

Big Picture Style (with Image)

await notifee.displayNotification({
  title: 'New Offer Available 🎉',
  body: 'Get 20% off on your next rental!',
  android: {
    channelId: 'promo',
    style: {
      type: notifee.AndroidStyle.BIGPICTURE,
      picture: 'https://example.com/offer-banner.jpg',
    },
  },
});

Messaging Style (for Chat)

await notifee.displayNotification({
  title: 'John Doe',
  body: 'Hey! Are you available for the shoot tomorrow?',
  android: {
    channelId: 'chat',
    style: {
      type: notifee.AndroidStyle.MESSAGING,
      person: { name: 'John Doe' },
      messages: [
        { text: 'Hey! Are you available for the shoot tomorrow?', timestamp: Date.now() },
      ],
    },
  },
});

⚙️ 4. Notification Actions (with Backend Support)

Add buttons directly to your notifications to trigger specific actions.

<!-- AndroidManifest.xml -->
<activity android:name=".MainActivity">
  <intent-filter>
    <action android:name="OPEN_ACTIVITY_1" />
    <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
</activity>

Then in your notification payload (from backend):

const message = {
  token,
  notification: {
    title: 'NotifyMeApp',
    body: 'New message received',
  },
  android: {
    channelId: 'chat',
    actions: [
      {
        title: 'Reply',
        pressAction: {
          id: 'OPEN_ACTIVITY_1',
        },
      },
    ],
  },
};

In your app:

notifee.onForegroundEvent(({ type, detail }) => {
  if (type === notifee.EventType.ACTION_PRESS && detail.pressAction.id === 'OPEN_ACTIVITY_1') {
    console.log('User tapped Reply button');
    // Backend can be notified here (e.g., mark as read or open chat)
  }
});

🧠 5. Notification Events Across App States

Recent improvements have made notifications behave consistently across all app states.
Here’s how you can handle each transition cleanly 👇

Received In	Opened From	Expected Behavior
Foreground	Foreground	Show custom in-app popup or Notifee local notification
Foreground	Background	Navigate to target screen after resume
Foreground	Killed	Use `getInitialNotification()` to handle navigation
Background	Foreground	Auto-navigate to notification target
Background	Background	Open directly to target screen
Background	Killed	Retrieve data from FCM launch event
Killed	Foreground	Fetch from last FCM message using `onNotificationOpenedApp`
Killed	Background	Same as above — delayed navigation allowed
Killed	Killed	Delivered silently; handle upon next app launch

Implementation Example

import messaging from '@react-native-firebase/messaging';
import notifee from '@notifee/react-native';
import { navigationRef } from './NavigationService';

// Foreground messages
messaging().onMessage(async (remoteMessage) => {
  await notifee.displayNotification({
    title: remoteMessage.notification?.title,
    body: remoteMessage.notification?.body,
    android: { channelId: 'default' },
  });
});

// When app is opened from background
messaging().onNotificationOpenedApp((remoteMessage) => {
  const screen = remoteMessage.data?.targetScreen;
  if (screen) navigationRef.current?.navigate(screen);
});

// When app is launched from a killed state
messaging()
  .getInitialNotification()
  .then((remoteMessage) => {
    if (remoteMessage) {
      const screen = remoteMessage.data?.targetScreen;
      if (screen) navigationRef.current?.navigate(screen);
    }
  });

🎧 6. Media & Chat Notifications

To include images, videos, or chat previews inside notifications:

await notifee.displayNotification({
  title: '🎬 Video Upload Complete!',
  body: 'Your project is now ready to share.',
  android: {
    channelId: 'media',
    style: {
      type: notifee.AndroidStyle.BIGPICTURE,
      picture: 'https://example.com/video-thumbnail.jpg',
    },
  },
});

For chat-like experience:

await notifee.displayNotification({
  title: 'Anna',
  body: 'Hey! New project details are ready!',
  android: {
    channelId: 'chat',
    style: {
      type: notifee.AndroidStyle.MESSAGING,
      person: { name: 'Anna' },
      messages: [
        { text: 'Hey! New project details are ready!', timestamp: Date.now() },
        { text: 'Let’s discuss soon.', timestamp: Date.now() },
      ],
    },
  },
});

✅ Key Fixes and Improvements

In the latest implementation:

Notifications tapped from a killed state now navigate correctly.
Foreground notifications no longer duplicate when both FCM and Notifee handlers are active.
Deep links from background notifications navigate smoothly on resume.

Resolved by:

Using getInitialNotification() for cold starts
Ensuring single Notifee channel creation
Separating local + FCM handlers
Maintaining event order for consistent navigation

🎯 Wrapping Up

In this advanced guide, we covered:

Local & scheduled notifications
Trigger-based alerts
Media and chat-style notifications
Custom action buttons integrated with backend
Complete event handling across all app states

Together with Part 1, you now have a production-ready notification system for any React Native app.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Implementing Push Notifications in React Native Using Firebase and Notifee

Dainy Jose — Fri, 17 Oct 2025 05:24:55 +0000

Push notifications are one of the most effective ways to re-engage users and deliver timely updates.
In this article, we’ll walk through implementing FCM (Firebase Cloud Messaging) push notifications in a React Native app using Firebase and Notifee, covering both mobile-side setup and backend integration.

🧩 Prerequisites

Before we dive in, make sure you have:

A React Native project (Expo bare workflow or React Native CLI)
Node.js and npm/yarn installed
A Firebase account
Basic understanding of backend APIs

🪄 Step 1: Firebase Setup

1️⃣ Create a Firebase Project

Go to Firebase Console
Click Add Project → enter a name (e.g., NotifyMeApp)
Disable Google Analytics (optional) → click Create Project

2️⃣ Add Android App to Firebase

In your Firebase project → click Add App → Android
Enter your package name (from android/app/build.gradle, e.g. com.notifyme.app)
Download the google-services.json file
Move it to your project:

   android/app/google-services.json

5.Add Firebase plugin in android/build.gradle:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.4.2'
  }
}

6.Then, apply the plugin in android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

3️⃣ Add iOS App (if applicable)

Add your iOS bundle ID (from Xcode → Targets → General → Bundle Identifier)
Download GoogleService-Info.plist
Add it to your iOS project in Xcode
Run:

cd ios && pod install && cd ..

📱 Step 2: React Native Mobile Setup

We’ll use two key libraries:

@react-native-firebase/messaging – for handling FCM
@notifee/react-native – for advanced notification control

1️⃣ Install Dependencies

yarn add @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native

npm install @react-native-firebase/app @react-native-firebase/messaging @notifee/react-native

For iOS:

cd ios && pod install && cd ..

2️⃣ Request Notification Permission

Create a file NotificationService.js:

import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidImportance } from '@notifee/react-native';
import { Platform } from 'react-native';

class NotificationService {
  static async requestPermission() {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (enabled) {
      console.log('Authorization status:', authStatus);
      this.getFcmToken();
    }
  }

  static async getFcmToken() {
    const token = await messaging().getToken();
    console.log('FCM Token:', token);
    // Send this token to your backend to store it
  }

  static async onMessageListener() {
    messaging().onMessage(async (remoteMessage) => {
      await notifee.displayNotification({
        title: remoteMessage.notification?.title,
        body: remoteMessage.notification?.body,
        android: {
          channelId: 'default',
          importance: AndroidImportance.HIGH,
        },
      });
    });
  }

  static async setupNotifeeChannel() {
    await notifee.createChannel({
      id: 'default',
      name: 'Default Channel',
      importance: AndroidImportance.HIGH,
    });
  }
}

export default NotificationService;

3️⃣ Initialize in App Entry (e.g., `App.js`)

import React, { useEffect } from 'react';
import NotificationService from './NotificationService';

export default function App() {
  useEffect(() => {
    NotificationService.requestPermission();
    NotificationService.setupNotifeeChannel();
    NotificationService.onMessageListener();
  }, []);

  return <YourMainNavigator />;
}

🧠 Step 3: Backend Setup to Send Push Notifications

You can use Firebase Admin SDK to send notifications from your backend.

1️⃣ Install Firebase Admin SDK

npm install firebase-admin

2️⃣ Initialize Firebase in Your Backend

Create a firebaseAdmin.js file:

import admin from 'firebase-admin';
import serviceAccount from './serviceAccountKey.json'; // download from Firebase Project Settings > Service Accounts

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

export default admin;

3️⃣ Send Notification API Example

import express from 'express';
import admin from './firebaseAdmin.js';

const app = express();
app.use(express.json());

app.post('/send-notification', async (req, res) => {
  try {
    const { token, title, body, data } = req.body;

    const message = {
      token,
      notification: { 
        title: title || 'NotifyMeApp', 
        body: body || 'You have a new message waiting!' 
      },      data, // Optional custom data for navigation
      android: {
        notification: {
          channelId: 'default',
          priority: 'high',
        },
      },
    };

    const response = await admin.messaging().send(message);
    res.status(200).json({ success: true, response });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(4000, () => console.log('Server running on port 4000'));

Example Request:

POST http://localhost:4000/send-notification
Content-Type: application/json

{
  "token": "fcm_device_token_here",
  "title": "NotifyMeApp",
  "body": "🎉 You just received a new notification!",
  "data": {
    "targetScreen": "Home"
  }
}

🧭 Step 4: Handling Notification Taps (Navigation)

To handle tap events and navigate to a specific screen:

import notifee, { EventType } from '@notifee/react-native';
import { navigationRef } from './NavigationService';

notifee.onForegroundEvent(({ type, detail }) => {
  if (type === EventType.PRESS && detail.notification) {
    const targetScreen = detail.notification.data?.targetScreen;
    if (targetScreen) {
      navigationRef.current?.navigate(targetScreen);
    }
  }
});

✅ Step 5: Test the Setup

Run your app:

yarn android
# or
yarn ios

Copy the FCM token from the logs.
Use Postman or your backend API to send a test notification.
You should see a notification appear even when the app is in the background or foreground.

🧾 Bonus Tips

For background notifications on Android, ensure you’ve set up a headless task or background handler.
On iOS, enable Push Notifications and Background Modes → Remote notifications in Xcode.
Store the FCM token in your backend to target specific users.

🎉 Wrapping Up

You’ve now set up a complete FCM push notification flow using Firebase, Notifee, and React Native — including Firebase configuration, mobile-side handling, and backend message sending.

Push notifications enhance user engagement, and with Notifee, you can customize every part — from channels and sounds to advanced behaviors.

🔗 Continue to Part 2

Read Part 2: Advanced Push & Local Notifications … for deeper exploration on triggers, actions, media/chat notifications, and handling every app state.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

🚀 Setting Up React Native (Expo Bare + TypeScript) Development Environment on macOS

Dainy Jose — Mon, 22 Sep 2025 06:00:51 +0000

If you’re starting with React Native (Expo Bare + TypeScript) on macOS, you need a complete setup for Android and iOS development. This guide covers everything from installing prerequisites to running the app on simulators.

👉 Reference Repo: rn-expo-typescript-bare-template

🔧 System Setup

1. Install Homebrew

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Install Node & NPM

brew install node

3. Install Git

brew install git

Set up your Git identity:
👉 Git username and email setup

4. Install Watchman

brew install watchman

5. Install Java JDK (17)

brew install openjdk@17
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk

Add to your ~/.zshrc or ~/.bashrc:

export JAVA_HOME=$(/usr/libexec/java_home -v17)
export PATH=$JAVA_HOME/bin:$PATH
source ~/.zshrc

6. Install CocoaPods (for iOS)

brew install cocoapods

7. Install Expo CLI

npm install -g expo-cli

8. Install VS Code

👉 Download VS Code

📱 Android & iOS Setup

Android Studio

👉 Download Android Studio

Android Studio
Android Studio: Guide
Open Android Studio
Install SDKs & Emulator
Update local.properties inside /android folder with your SDK path:

sdk.dir=/Users/username/Library/Android/sdk

Xcode (for iOS)

👉 Download Xcode

Switch versions if you maintain multiple Xcodes:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcode-select -s ~/Downloads/Xcode.app/Contents/Developer

Open .xcworkspace in Xcode to build for iOS.

📂 Project Setup

1. Clone the project:

git clone <your-repo-url>
cd rn-expo-typescript-bare-template

2. Install dependencies:

npm install

3. For react-native-snap-carousel issue, import `ViewPropTypes` manually:

import { ViewPropTypes } from 'deprecated-react-native-prop-types';

Update inside:

react-native-snap-carousel/src/carousel
pagination, paginationDot, parallaxImage

4. iOS setup:

cd ios
pod install
cd ..

5. Run the app:

npm run ios
npm run android

✅ Wrap-Up

You now have a fully functional React Native (Expo Bare + TypeScript) setup on macOS 🚀.
This covers Node, JDK, Android Studio, Xcode, Git, Expo CLI, Pods, VS Code, and extra dev tools.

📌 Reference Repo: rn-expo-typescript-bare-template

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Edge-to-Edge Styling in React Native on Android 15

Dainy Jose — Thu, 18 Sep 2025 07:11:30 +0000

Google’s Android 15 pushes developers toward edge-to-edge design, encouraging apps to extend content seamlessly behind the status and navigation bars.

If you’re building with React Native, you might have noticed layout issues or unexpected spacing after updating. This guide will show you how to:

Enable immersive edge-to-edge layouts properly.
Style your system bars for a modern look.
Apply a quick fix if you just want your app working without redesigning right away.

🚀 Why Edge-to-Edge?

By default, React Native apps avoid overlapping with system bars by applying safe padding. While functional, this can feel outdated compared to modern immersive apps.

Benefits of edge-to-edge design:

Immersive user experience
Maximized screen space
Seamless blending with system UI

⚙️ Step 1: Configure Android Window Settings

Open your project’s MainActivity.java (or MainActivity.kt) and update the window in onCreate:

import android.os.Bundle;
import androidx.core.view.WindowCompat;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);

  // Enable edge-to-edge layout
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
}

This tells Android not to inset your layout automatically, giving React Native full control of the screen.

🎨 Step 2: Use react-native-safe-area-context

Install the package:

yarn add react-native-safe-area-context

Wrap your app with SafeAreaProvider:

import React from "react";
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context";
import { Text, StyleSheet } from "react-native";

export default function App() {
  return (
    <SafeAreaProvider>
      <SafeAreaView
        style={styles.container}
        edges={["top", "bottom", "left", "right"]}
      >
        <Text style={styles.text}>🌐 Edge-to-Edge in Android 15</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#121212", // Dark theme background
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    color: "white",
    fontSize: 20,
  },
});

Here, edges={["top", "bottom", "left", "right"]} ensures content adjusts safely while still extending edge-to-edge.

🎨 Step 3: Match System Bar Colors

To avoid jarring contrasts, update system bar styling in MainActivity.java:

import android.os.Build;
import android.view.WindowInsetsController;
import android.graphics.Color;

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
  WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

  // Make status & navigation bars transparent
  getWindow().setStatusBarColor(Color.TRANSPARENT);
  getWindow().setNavigationBarColor(Color.TRANSPARENT);

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
    WindowInsetsController controller = getWindow().getInsetsController();
    if (controller != null) {
      controller.setSystemBarsAppearance(
        WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS,
        WindowInsetsController.APPEARANCE_LIGHT_STATUS_BARS
      );
    }
  }
}

This ensures your status bar and navigation bar are transparent and icons adapt for visibility.

📱 Step 4: Test Across Themes

✅ Light theme → verify text/icons are visible against bright backgrounds.
✅ Dark theme → use transparent bars with white icons for contrast.

⚡ Quick Fix: Opt-Out of Edge-to-Edge

If your app’s layout breaks after upgrading to Android 15 and you don’t want to fix UI right away, you can temporarily opt out of edge-to-edge.

1️⃣ Update AndroidManifest.xml

Path: android/app/src/main/AndroidManifest.xml

<meta-data
    android:name="android.window.extensions.disableEdgeToEdge"
    android:value="true" />

2️⃣ Update styles.xml

Path: android/app/src/main/res/values/styles.xml

<item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>

✅ Done! Your app will behave like before, ignoring Android 15’s enforcement.

⚠️ Note: This should be treated as a temporary solution. Long-term, adopt edge-to-edge for the best UX.

🔎 Final Thoughts

With Android 15, edge-to-edge styling is not just optional—it’s the new standard.

You now have two paths:

Go immersive → Adopt edge-to-edge with WindowCompat, react-native-safe-area-context, and transparent bars.
Play it safe → Apply the quick fix until you’re ready to migrate.

Either way, your React Native app will be future-proof and visually polished.

💡 What’s your take? Do you prefer immersive full-screen layouts or classic padded designs in React Native apps?

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub