DEV Community: Dainy Jose

Understanding OWASP Mobile Top 10 (2025): A Guide for Android & iOS Developers

Dainy Jose — Sun, 28 Jun 2026 16:32:01 +0000

Disclaimer: This article summarizes the concepts I learned while studying the OWASP Mobile Top 10 (2025) and includes additional references from official OWASP documentation to help fellow developers get started.

Mobile applications have become an essential part of our daily lives, handling everything from banking and healthcare to shopping and communication. As mobile apps process increasingly sensitive data, security must be considered throughout the development lifecycle—not as an afterthought.

The OWASP Mobile Top 10 (2025) is a community-driven list of the most critical security risks affecting Android and iOS applications. It helps developers, security engineers, and organizations understand common vulnerabilities and implement best practices to build more secure mobile apps.

Why OWASP Mobile Top 10 Matters

Many security incidents occur because of simple mistakes such as storing sensitive data insecurely, trusting client-side validation, or using outdated cryptographic algorithms.

By understanding these risks early, developers can design applications that are more resilient against attacks like reverse engineering, credential theft, data leakage, and unauthorized access.

The OWASP Mobile Top 10 (2025)

M1: Improper Credential Usage

Applications should never hardcode API keys, passwords, or authentication tokens. Credentials stored insecurely can be extracted through reverse engineering and used to access backend services.

Best Practices

Use OAuth 2.0/OpenID Connect
Store secrets in Android Keystore or iOS Keychain
Use short-lived access tokens and refresh token rotation

M2: Inadequate Supply Chain Security

Modern apps depend heavily on third-party SDKs and open-source libraries. Outdated or untrusted dependencies can introduce vulnerabilities or malicious code.

Best Practices

Vet third-party vendors
Maintain an SBOM (Software Bill of Materials)
Automate dependency scanning

M3: Insecure Authentication & Authorization

Weak passwords, missing MFA, or poor server-side authorization can allow attackers to gain unauthorized access.

Best Practices

Strong password policies
Platform-native biometrics
Server-side authorization checks
Role-Based Access Control (RBAC)

M4: Insufficient Input & Output Validation

Failing to validate user input can lead to injection attacks, data corruption, or unexpected application behavior.

Best Practices

Validate all client and server inputs
Sanitize outputs
Use parameterized queries

M5: Insecure Communication

Sensitive information should always be protected while traveling across networks.

Best Practices

TLS 1.2 or TLS 1.3
Certificate validation
Certificate pinning
Disable insecure protocols

M6: Inadequate Privacy Controls

Collecting excessive user data or sharing personal information without consent can violate user trust and regulations such as GDPR and CCPA.

Best Practices

Data minimization
Explicit user consent
Encrypt sensitive data
Transparent privacy policies

M7: Insufficient Binary Protection

Mobile apps can be reverse engineered, modified, or repackaged if they lack binary protection.

Best Practices

Code obfuscation (R8/ProGuard)
Runtime integrity verification
Signature validation
Frida/Xposed detection

M8: Security Misconfiguration

Debug logging, insecure build configurations, and exposed endpoints often leak valuable information to attackers.

Best Practices

Disable debug logs in production
Secure release builds
Regular configuration reviews

M9: Insecure Data Storage

Sensitive information stored on the device should always be encrypted and protected.

Best Practices

Android Keystore
iOS Keychain/Secure Enclave
Encrypted SharedPreferences
Avoid storing sensitive data unnecessarily

M10: Insufficient Cryptography

Using outdated algorithms such as MD5 or weak random number generators can compromise data confidentiality.

Best Practices

Argon2 or bcrypt for password hashing
AES-GCM for encryption
SecureRandom for cryptographic randomness
Regular cryptographic reviews

Security Is More Than Writing Secure Code

Building secure mobile applications requires a layered approach that includes:

Secure architecture
Secure coding practices
Dependency management
Continuous security testing
Runtime protection
Monitoring and incident response

Frameworks like OWASP MASVS (Mobile Application Security Verification Standard) and OWASP MSTG (Mobile Security Testing Guide) provide practical guidance for implementing and verifying these security controls.

Recommended Security Tools

Some useful tools for securing mobile applications include:

MobSF – Mobile application security testing
OWASP ZAP – API and dynamic security testing
SonarQube & Semgrep – Static code analysis
Gitleaks – Secret detection
OWASP Dependency-Check – Dependency vulnerability scanning
CycloneDX / SPDX – Software Bill of Materials (SBOM)

Final Thoughts

The OWASP Mobile Top 10 (2025) is not just a list of vulnerabilities—it's a roadmap for building secure Android and iOS applications. Whether you're a mobile developer, security engineer, or architect, understanding these risks helps you create applications that protect user data, resist modern attack techniques, and meet industry security standards.

Security is an ongoing process. Integrating secure design, continuous testing, and regular updates into the development lifecycle is the key to building trustworthy mobile applications.

Resources

If you're interested in learning more about mobile application security, I highly recommend this course:

OWASP Mobile Top 10 2025: Android & iOS App Security by Dr. Amar Massoud
🎓 My Certificate of Completion: https://ude.my/UC-492454b2-dbfa-4753-a9e8-35d6722b91c1

You can also explore these official OWASP resources:

OWASP Mobile Application Security: https://owasp.org/www-project-mobile-top-10/
OWASP MASVS: https://mas.owasp.org/MASVS/
OWASP MSTG: https://mas.owasp.org/MSTG/

Thank you for reading! If you found this article useful, feel free to ❤️ like it, leave a comment, or share your experience with mobile application security.

✍️ 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

Building Picture-in-Picture (PiP) Mode in React Native with Expo and TypeScript

Dainy Jose — Mon, 01 Jun 2026 17:06:29 +0000

Picture-in-Picture (PiP) mode is one of the most useful features for media-based mobile applications. It allows users to continue watching video content while navigating outside the app.

In this article, we will build a modern React Native PiP Mode Proof of Concept using:

React Native
Expo
TypeScript
react-native-video
Native Android PiP APIs

What is Picture-in-Picture (PiP)?

Picture-in-Picture mode allows a video player to continue playing inside a small floating window while users interact with other applications.

Popular apps using PiP:

YouTube
Google Meet
Netflix
WhatsApp Video Calls

Final Result

Features implemented:

Floating mini-player
Background playback
Auto-enter PiP mode
Manual PiP trigger
Modern UI
Reusable custom hook
Native Android integration

Source Code

The complete source code for this project is available on GitHub:

🔗 GitHub Repository: https://github.com/dainyjose/pip-video-player-mobile

Create Project

Expo Project Setup

npx create-expo-app react-native-pip-poc

Move into the project:

cd react-native-pip-poc

Install Dependencies

Install video package:

npm install react-native-video

Project Structure

Instead of putting everything inside App.tsx, use a scalable architecture.

src/
 ├── components/
 │    ├── MiniPlayer.tsx
 │    ├── PipButton.tsx
 │    ├── PipStatus.tsx
 │    └── VideoPlayer.tsx
 │
 ├── hooks/
 │    └── usePictureInPicture.ts
 │
 ├── constants/
 │    └── video.ts
 │
 ├── screens/
 │    └── PlayerScreen.tsx
 │
 └── types/
      └── video.ts

This keeps the code reusable and production-ready.

Android PiP Configuration

AndroidManifest.xml

Open:

android/app/src/main/AndroidManifest.xml

Add:

<activity
  android:name=".MainActivity"
  android:supportsPictureInPicture="true"
  android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
  android:launchMode="singleTask"
  android:windowSoftInputMode="adjustResize"
  android:exported="true">

This enables native Android PiP support.

Configure MainActivity.kt

Open:

android/app/src/main/java/.../MainActivity.kt

Add:

override fun onUserLeaveHint() {
    super.onUserLeaveHint()

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

        val params =
            PictureInPictureParams.Builder()
                .setAspectRatio(Rational(16, 9))
                .build()

        enterPictureInPictureMode(params)
    }
}

This automatically enters PiP mode when the app moves to the background.

Create Reusable PiP Hook

usePictureInPicture.ts

Instead of writing all logic directly inside the screen, create a reusable hook.

import { useCallback, useRef, useState } from "react";
import { Platform } from "react-native";
import { VideoRef } from "react-native-video";

export const usePictureInPicture = (
  videoRef: React.RefObject<VideoRef>,
) => {
  const loadedRef = useRef(false);
  const pendingPipRef = useRef(false);

  const [pipActive, setPipActive] = useState(false);
  const [paused, setPaused] = useState(true);

  const enterPip = useCallback(() => {
    const delays =
      Platform.OS === "ios"
        ? [250, 700, 1200]
        : [300];

    delays.forEach((delay) => {
      setTimeout(() => {
        videoRef.current?.enterPictureInPicture();
      }, delay);
    });
  }, []);

  const activateFloatingPlayer = () => {
    pendingPipRef.current = true;
    setPaused(false);

    if (loadedRef.current) {
      enterPip();
    }
  };

  return {
    paused,
    setPaused,
    pipActive,
    setPipActive,
    loadedRef,
    activateFloatingPlayer,
  };
};

Benefits:

reusable logic
cleaner screens
easier maintenance
scalable architecture

Build Video Player Component

VideoPlayer.tsx

import Video from "react-native-video";

<Video
  ref={videoRef}
  source={VIDEO_SOURCE}
  style={styles.video}
  resizeMode="contain"
  paused={paused}
  controls
  playInBackground
  playWhenInactive
  enterPictureInPictureOnLeave
  ignoreSilentSwitch="ignore"
/>

Important PiP props:

Prop	Purpose
playInBackground	Continue playback in background
playWhenInactive	Allow inactive playback
enterPictureInPictureOnLeave	Auto-enter PiP

Auto PiP on Background

Inside the screen:

useEffect(() => {
  const sub = AppState.addEventListener(
    "change",
    (state) => {
      if (state === "background") {
        activateFloatingPlayer();
      }
    },
  );

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

This creates a YouTube-like experience.

Modern UI Layout

Instead of basic buttons, create:

Player card
Floating mini-player
Status cards
Dark streaming UI

Example:

<View style={styles.playerCard}>
  <VideoPlayer />
  <PipButton />
  <PipStatus />
</View>

Running the Project

Android

npx expo run:android

Important Notes

Expo Go Limitation

Expo Go may not fully support native PiP functionality.

Use native builds instead.

Common Issues

PiP Not Starting

Check:

Android version >= 8
Manifest configuration
Native build usage
Video loaded state

App Crashes

Verify:

correct MainActivity.kt imports
react-native-video installation
Android SDK compatibility

Future Improvements

This PoC can be extended with:

Custom PiP controls
Live streaming
Video call PiP
Draggable mini-player
Media session controls
Netflix-style player UI

Conclusion

Picture-in-Picture mode significantly improves user experience for media applications.

With React Native, Expo, and native Android APIs, we can build scalable and modern PiP experiences similar to YouTube and Netflix.

This project demonstrates:

native Android PiP integration
modular React Native architecture
reusable hooks
background playback handling
scalable UI structure

You can now extend this implementation into:

OTT applications
Video conferencing apps
Live class platforms
Social media video apps
Streaming platforms

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Complete CI/CD Guide for React Native Apps Using GitHub Actions

Dainy Jose — Mon, 11 May 2026 08:43:26 +0000

Automating builds, testing, and deployments can save hours of manual work in React Native projects. This article explains how to set up a practical CI/CD pipeline for Android and iOS apps using GitHub Actions.

Introduction

As React Native projects grow, manual release processes become difficult.

Developers often spend time:

generating APKs manually
updating versions
testing release builds
uploading builds to stores
fixing environment issues
handling signing configurations

This process becomes repetitive and error-prone.

That’s where CI/CD helps.

A proper CI/CD pipeline can:

automate builds
reduce human errors
improve release consistency
speed up deployments
help teams collaborate efficiently

In this article, I’ll explain how I set up CI/CD for React Native apps using:

GitHub Actions
Fastlane
Android & iOS workflows
environment configurations

What is CI/CD?

CI/CD stands for:

Continuous Integration (CI)

Automatically:

validating code
running tests
checking builds
detecting issues early

whenever code is pushed.

Continuous Deployment/Delivery (CD)

Automatically:

generating release builds
distributing apps
deploying to stores
handling release workflows

This reduces manual release effort.

Why CI/CD Matters in React Native

React Native projects involve:

JavaScript
Android native code
iOS native code
multiple environments
third-party SDKs

Without automation, release management becomes difficult.

Tools You Can Use

1. GitHub Actions

Used for:

workflow automation
build pipelines
running scripts
deployment triggers

2. Fastlane

Used for:

Android Play Store uploads
TestFlight uploads
signing management
screenshots and metadata

3. Firebase Crashlytics

Used for:

crash monitoring
release issue tracking
production debugging

Recommended Project Setup

Before setting up CI/CD, ensure:

- separate environments
- proper signing setup
- release build testing
- version management
- secure secret storage

This prevents many pipeline issues later.

Step 1: Create GitHub Actions Workflow

Inside your project:

.github/workflows/

Create:

android-build.yml

Example:

name: Android Build

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Code
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20

      - name: Install Dependencies
        run: npm install

      - name: Build Android APK
        run: |
          cd android
          ./gradlew assembleRelease

This automatically generates Android release builds.

Step 2: Configure Secrets Securely

Never store:

API keys
keystore passwords
certificates
signing configs

inside the repository.

Use:

GitHub Repository Secrets

for:

signing passwords
Firebase configs
Play Store credentials
App Store credentials

Step 3: Android Signing Setup

For Android release builds:

android/app/release.keystore

Configure:

signingConfigs

inside:

android/app/build.gradle

Example:

release {
   storeFile file(MYAPP_UPLOAD_STORE_FILE)
   storePassword MYAPP_UPLOAD_STORE_PASSWORD
   keyAlias MYAPP_UPLOAD_KEY_ALIAS
   keyPassword MYAPP_UPLOAD_KEY_PASSWORD
}

Step 4: iOS CI/CD Setup

iOS setup is slightly more complex because of:

certificates
provisioning profiles
code signing
macOS runners

GitHub Actions requires:

runs-on: macos-latest

for iOS builds.

Step 5: Fastlane Integration

Fastlane simplifies deployments.

Install:

bundle exec fastlane init

Android Deployment Example

lane :android_release do
  gradle(task: "assembleRelease")
end

iOS Deployment Example

lane :ios_release do
  build_app
  upload_to_testflight
end

This automates deployment significantly.

Step 6: Automate Version Management

One common problem in mobile releases:

incorrect build numbers
duplicate version codes
store upload failures

Automate:

Android versionCode
iOS build number
semantic versions

inside CI/CD pipelines.

This reduces release mistakes.

Step 7: Run Quality Checks Before Builds

Before generating release builds, I recommend running:

Lint

npm run lint

TypeScript Check

npx tsc --noEmit

Tests

npm run test

This prevents broken builds from reaching production.

Handling Multiple Environments

In production apps, we usually have:

- development
- staging
- production

I manage environments using:

.env.development
.env.production

with separate workflows.

Example:

if: github.ref == 'refs/heads/main'

for production deployments.

Common CI/CD Issues I Faced

1. Android Build Works Locally but Fails in CI

Usually caused by:

missing SDK versions
Gradle mismatch
Java version issues

2. iOS Signing Failures

Most common problem in iOS pipelines.

Usually related to:

certificates
provisioning profiles
Apple Developer configuration

3. Environment Variables Missing

Sometimes release builds fail because CI environments do not load .env correctly.

Always validate:

workflow variables
secret mappings
build configurations

4. Slow Build Times

Large React Native projects can become slow in CI.

Build times can be improved using:

dependency caching
Gradle caching
npm caching
selective workflows

My Recommended CI/CD Practices

1. Always Test Release Builds

Debug builds are not enough.

2. Keep Secrets Secure

Never commit sensitive credentials.

3. Automate Repetitive Tasks

Anything repeated manually should probably be automated.

4. Separate Development & Production Pipelines

This prevents accidental releases.

5. Monitor Releases Properly

Use:

Crashlytics
logs
analytics
release monitoring

for production stability.

Benefits of Implementing CI/CD

After setting up CI/CD:

releases became faster
fewer manual mistakes happened
deployments became more consistent
onboarding developers became easier
debugging release issues improved

Most importantly, the release process became predictable.

Final Thoughts

CI/CD may initially feel complicated in React Native projects.

Especially because mobile apps involve:

Android builds
iOS signing
native dependencies
environment management

But once configured properly, it saves a huge amount of development time.

Even a basic CI/CD setup can dramatically improve team productivity and release quality.

Start simple.
Then gradually automate:

testing
builds
deployments
versioning
monitoring

over time.

How are you managing CI/CD in your React Native projects?

Are you using:

GitHub Actions
Fastlane
Bitrise
CircleCI
Expo EAS

Share your workflow in the comments 👇

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

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.

📬 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