DEV Community: Dainy Jose

Google Play Requires Android 16 (API Level 36) by August 31, 2026 — React Native Migration Guide

Dainy Jose — Tue, 28 Jul 2026 17:10:01 +0000

Google Play has announced that starting August 31, 2026, all new apps and app updates must target Android 16 (API level 36).

If you're maintaining a React Native application, updating targetSdkVersion isn't just about passing Play Console checks—it's also about ensuring your app remains compatible with the latest Android platform changes.

In this guide, I'll walk you through:

Why this change matters
How to update your React Native project
Important Android 16 behavior changes
A testing checklist before releasing

Google Play Target API Requirement

Starting August 31, 2026:

New apps must target Android 16 (API level 36)
App updates must also target Android 16 (API level 36)
Existing apps must target at least Android 15 (API level 35) to remain discoverable by new users on devices running newer Android versions.
Eligible developers can request an extension until November 1, 2026.

This is part of Google's annual policy to ensure apps take advantage of the latest security, privacy, and platform improvements.

Why Does Google Increase the Target API Every Year?

Targeting a newer Android version allows your app to benefit from:

Improved security
Better privacy protections
Performance optimizations
Modern background execution policies
Better user experience across new devices

While your app may still run on older Android versions, targeting the latest API ensures compatibility with current Android platform expectations.

Updating a React Native Project

For most React Native applications, the migration is straightforward.

1. Install Android 16 SDK

Open Android Studio → SDK Manager

Install:

Android SDK Platform 36
Android SDK Build Tools (latest)
Android SDK Command-line Tools

2. Update compileSdk and targetSdk

Depending on your project structure, update your Gradle configuration.

android {
    compileSdk 36

    defaultConfig {
        targetSdk 36
    }
}

compileSdkVersion = 36
targetSdkVersion = 36

Note: Updating to API 36 does not require changing your minSdkVersion. Your app can continue supporting older Android versions while targeting the latest Android release.

3. Update Android Gradle Plugin

Use a version compatible with API 36.

Example:

classpath("com.android.tools.build:gradle:8.6.1")

4. Update Gradle

Example:

distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip

5. Verify Kotlin Version

Many recent React Native versions work well with Kotlin 2.x.

Example:

kotlinVersion=2.0.21

6. Clean and Rebuild

cd android

./gradlew clean

cd ..

npx react-native run-android

For release builds:

cd android

./gradlew assembleRelease

Quick Migration Checklist

Before uploading your app to Google Play, verify that you've completed the following:

[ ] Install Android SDK Platform 36
[ ] Update compileSdk to 36
[ ] Update targetSdk to 36
[ ] Upgrade the Android Gradle Plugin (if required)
[ ] Upgrade the Gradle Wrapper
[ ] Verify Kotlin compatibility
[ ] Update third-party native libraries
[ ] Clean and rebuild the project
[ ] Test on Android 16 devices or emulator
[ ] Verify edge-to-edge layouts
[ ] Generate a Release AAB
[ ] Upload to Play Console and check for warnings

Android 16 Behavior Changes You Should Know

Simply updating targetSdkVersion to 36 isn't enough. Android 16 introduces several platform behavior changes that may require code updates and additional testing.

1. Edge-to-Edge Is Mandatory

One of the most noticeable changes is that apps targeting Android 16 can no longer opt out of edge-to-edge mode.

This means your app content may extend behind the status and navigation bars unless properly handled.

For React Native applications, test:

Safe areas
Bottom navigation
Headers
Floating buttons
Bottom sheets
Keyboard interactions
Full-screen screens

If you're using react-native-safe-area-context, make sure you're on a recent version and verify layouts on both Android 15 and Android 16.

2. Large-Screen Support

Android 16 improves the experience on:

Tablets
Foldables
Chromebooks

For displays with a smallest width of 600dp or greater, Android ignores several app restrictions, including:

Orientation locks
Aspect ratio limits
Resize restrictions

Your app should adapt to different window sizes instead of assuming portrait mode.

If your app hasn't been tested on tablets or foldables, now is a good time.

3. Background Scheduling Changes

Android 16 changes how scheduleAtFixedRate() behaves.

Previously, if multiple scheduled executions were missed while the app wasn't active, Android could execute them all when the app resumed.

Now, only one missed execution is triggered, helping reduce unnecessary background work.

If your app performs periodic synchronization or recurring tasks, review this behavior.

4. Local Network Protection

Android continues strengthening privacy.

Apps communicating with devices on the local network—such as:

Smart home devices
Printers
IoT devices
Local development servers
Media casting devices

should begin testing against Android 16.

Future Android versions will introduce explicit permissions for local network access.

5. Photo Picker Improvements

If a user grants access to Selected Photos instead of the entire media library, Android 16 automatically pre-selects media created by your application.

This creates a smoother user experience while maintaining user privacy.

If your app uploads images or videos, test this flow carefully.

6. Background Jobs

Android 16 introduces improvements to JobScheduler quotas.

Apps using:

WorkManager
JobScheduler
Background uploads
Background sync

should verify that jobs still execute as expected under different app states.

React Native Specific Things to Test

After updating to API 36, I recommend verifying the following:

✅ App launches correctly

✅ Release APK/AAB builds successfully

✅ Navigation works correctly

✅ Safe areas are displayed properly

✅ Status bar and navigation bar don't overlap content

✅ Push notifications work

✅ Deep links still open correctly

✅ Camera functions normally

✅ Image picker works

✅ File uploads work

✅ Location permissions behave correctly

✅ Background tasks continue running

✅ Payment SDKs function properly

✅ Analytics events are still recorded

✅ Tablets and foldables display correctly

Common Issues After Upgrading

Depending on your project and dependencies, you may encounter:

Build failures

These are commonly caused by outdated:

Android Gradle Plugin
Gradle
Kotlin
AndroidX libraries
Third-party library incompatibilities

Common areas include:

Camera libraries
Notification SDKs
Background service libraries
Payment SDKs
Bluetooth libraries

Always update dependencies before assuming Android 16 is the issue.

UI issues

Because of mandatory edge-to-edge rendering, you may notice:

Content behind the status bar
Navigation bar overlap
Incorrect bottom padding
Keyboard layout problems

Most of these can be resolved by properly handling window insets and safe areas.

Recommended React Native Versions

While older React Native versions may still build, newer releases offer better compatibility with recent Android SDKs.

React Native Version	Recommendation
0.72 and below	Consider upgrading before targeting API 36
0.73 – 0.78	Test thoroughly
0.79+	Better support for modern Android SDKs

Final Thoughts

Updating to Android 16 (API level 36) is more than a Play Console requirement—it's an opportunity to modernize your app and ensure it works well across the latest Android devices.

For most React Native projects, the migration is relatively simple:

Update your Android SDK
Upgrade Gradle and the Android Gradle Plugin if necessary
Set compileSdk and targetSdk to 36
Test thoroughly on Android 16 devices
Pay special attention to edge-to-edge layouts, background work, and large-screen support

Android 16 isn't a massive migration for most React Native applications, but it does introduce several platform behaviors that deserve careful testing. Start upgrading early, keep your dependencies up to date, and validate your app on Android 16 devices before your production release.

By migrating ahead of the August 31, 2026 deadline, you'll avoid Play Console submission issues and ensure your users receive the latest Android security, privacy, and performance improvements.

Useful Resources

For more information, refer to the official Android documentation below:

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

From Learning to Implementation: My Journey with Firebase Analytics & GA4

Dainy Jose — Mon, 27 Jul 2026 03:51:36 +0000

Over the past few weeks, I've been focused on deepening my understanding of mobile analytics—not just by completing a course, but by putting those concepts into practice through hands-on implementation in React Native.

Throughout this journey, I explored a wide range of topics, including:

Firebase Analytics integration
Google Analytics 4 (GA4)
Event planning and naming conventions
Screen view tracking
Custom events and custom definitions
Key Events (Conversions)
User properties and User ID
Acquisition and campaign tracking
Audience segmentation
Ecommerce measurement
Checkout funnel analysis
Promotions and marketing attribution
BigQuery integration
Realtime reporting and DebugView
Analytics validation and best practices

One of the biggest lessons I learned is that analytics is much more than logging events. A well-designed analytics strategy helps answer important questions about user behavior, feature adoption, user engagement, and conversion optimization. The quality of the insights you gain depends on having a well-planned event architecture, consistent naming conventions, and meaningful data collection from the very beginning.

Completing this Udemy course gave me a strong foundation in Firebase Analytics and Google Analytics 4. Reinforcing that knowledge through hands-on implementation in React Native helped me better understand event planning, debugging, reporting, and analytics best practices for modern mobile applications.

Course Certificate

I'm happy to have successfully completed the Firebase Analytics & Google Analytics 4 (GA4) course on Udemy.

Certificate:
https://www.udemy.com/certificate/UC-4a23b92f-0857-4a75-83dd-ac186bdfdfbc

The course covered both the fundamentals and advanced capabilities of mobile analytics, including GA4 reports, custom events, screen tracking, audiences, BigQuery integration, and data-driven decision making. It has been a valuable learning experience that strengthened both my theoretical understanding and practical implementation skills.

Learning doesn't stop with earning a certificate. The real growth comes from building, experimenting, solving real-world problems, and continuously improving.

If you're working with React Native, Firebase Analytics, or Google Analytics 4 (GA4), I'd love to hear about your experiences, best practices, or any challenges you've encountered. Let's learn and grow together as developers.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Mastering GA4 for Mobile Apps — From Events to Business Insights

Dainy Jose — Sun, 26 Jul 2026 17:29:12 +0000

Integrating Firebase Analytics is an excellent first step toward understanding how users interact with your application—but it's only the beginning.

The real value comes from Google Analytics 4 (GA4), where raw events are transformed into meaningful reports, dashboards, funnels, audiences, and business insights.

GA4 helps developers, product managers, and marketers answer questions like:

How are users discovering the app?
Which features are used the most?
Where do users drop off during important flows?
Which campaigns drive the highest conversions?
How can the overall user experience be improved?

In this article, we'll explore the key GA4 features every mobile developer should understand.

Realtime Report
Reports Snapshot
Events
Custom Events
Screen Tracking
Custom Definitions
Key Events (Conversions)
Acquisition
Engagement
Monetization
Ecommerce
Checkout Journey
Promotions
Campaign Tracking
Audiences
BigQuery Integration
User ID
Best Practices
Final Thoughts

1. Realtime Report

The Realtime Report is one of the most useful tools during development.

It allows you to verify that your application is sending analytics events correctly within seconds.

You can quickly validate actions such as:

App opens
Screen views
User sign in
Button clicks
Item views
Add to cart
Checkout
Purchases

Instead of waiting for reports to process, the Realtime Report provides immediate feedback while testing your implementation.

2. Reports Snapshot

The Reports Snapshot provides a high-level overview of your application's performance.

Some of the metrics available include:

Active users
New users
Sessions
User engagement
Event count
Top screens
Revenue
Retention trends

Think of it as the health dashboard for your application.

3. Events

Everything in GA4 revolves around events.

Every user interaction—whether automatic or custom—is recorded as an event.

Common examples include:

login
sign_up
view_item
select_item
search
add_to_cart
begin_checkout
purchase
share

By consistently tracking meaningful events, you create the foundation for all GA4 reports.

4. Custom Events

Not every application fits predefined event categories.

Custom events allow you to measure actions that are unique to your application's functionality.

Examples include:

profile_completed
subscription_started
subscription_cancelled
feature_used
feedback_submitted
payment_failed
notification_opened

Custom events become even more powerful when combined with parameters and custom definitions.

5. Screen Tracking

Understanding how users navigate your application is essential.

Typical screens include:

Home
Search
Details
Profile
Settings
Notifications

Screen tracking helps answer questions such as:

Which screens receive the most visits?
Where do users spend the most time?
Which screens have the highest exit rate?
What navigation paths are most common?

6. Custom Definitions

Event parameters are collected with your events, but to use them in GA4 reports, you often need to register them as Custom Definitions.

Examples include:

User Role
Subscription Plan
Content Category
Payment Method
App Version
Device Type

Custom definitions make it possible to filter, segment, and analyze reports using business-specific information.

7. Key Events (Conversions)

Some user actions are more valuable than others.

GA4 allows you to mark important events as Key Events (formerly called Conversions).

Examples include:

User Registration
Purchase
Subscription
Form Submission
Profile Completion

Tracking Key Events helps measure the success of your application's goals.

8. Acquisition

The Acquisition reports answer an important question:

Where are your users coming from?

GA4 categorizes traffic sources such as:

Organic Search
Direct
Social Media
Referral
Email Campaigns
Paid Advertising

These reports help marketing teams understand which channels bring the most valuable users.

9. Engagement

Engagement reports focus on how users interact with your application after they arrive.

Important metrics include:

Engagement time
Engaged sessions
Screen views
Event count
Returning users

Strong engagement usually indicates a better user experience.

10. Monetization

For applications that generate revenue, the Monetization reports provide valuable financial insights.

You can monitor:

Revenue
Purchases
Refunds
Average Revenue Per User (ARPU)
Purchase trends

These reports help evaluate business performance over time.

11. Ecommerce

GA4 provides built-in support for ecommerce tracking.

Recommended ecommerce events include:

view_item
view_item_list
select_item
add_to_cart
remove_from_cart
begin_checkout
add_payment_info
purchase
refund

Using Google's recommended event names ensures better compatibility with GA4 reports.

12. Checkout Journey

One of GA4's most useful capabilities is identifying where users abandon the purchase flow.

Example funnel:

View Item
      ↓
Add to Cart
      ↓
Begin Checkout
      ↓
Add Payment Information
      ↓
Purchase

Analyzing drop-off at each step helps identify friction points and improve conversion rates.

13. Promotions

If your application displays promotional content, GA4 can measure its effectiveness.

Examples include:

Promotional banners
Featured content
Coupons
Seasonal offers
Limited-time campaigns

You can compare impressions, clicks, and resulting conversions to understand which promotions perform best.

14. Campaign Tracking

Campaign tracking allows you to measure marketing performance using UTM parameters.

Common campaign parameters include:

utm_source
utm_medium
utm_campaign
utm_content
utm_term

This makes it easier to evaluate app installs and user engagement from different marketing channels.

15. Audiences

GA4 enables you to create dynamic audiences based on user behavior.

Examples include:

New Users
Returning Users
Active Users
Inactive Users
Subscribers
High-Value Users

These audiences can be used for reporting, personalization, and advertising integrations such as Google Ads.

16. BigQuery Integration

One of GA4's most powerful features is its native BigQuery integration.

Instead of relying only on standard reports, you gain access to raw event-level data.

This enables:

SQL analysis
Custom dashboards
Funnel analysis
Cohort analysis
Machine learning
Predictive analytics
Data warehouse integration

For organizations working with large datasets, BigQuery unlocks virtually unlimited analytical possibilities.

17. User ID

By default, GA4 identifies users using device or browser identifiers.

This means a single person using multiple devices may appear as multiple users.

Without User ID:

One User
     ↓
Multiple Devices
     ↓
Multiple User Records

With User ID:

One User
     ↓
Multiple Devices
     ↓
Single Unified Identity

Implementing User ID provides more accurate cross-device reporting while respecting your application's authentication and privacy policies.

Best Practices

To build a scalable analytics implementation:

Use GA4 recommended event names whenever possible.
Keep event names consistent across platforms.
Track only meaningful user interactions.
Register important parameters as Custom Definitions.
Mark business-critical actions as Key Events.
Validate implementations using the Realtime Report.
Create an event tracking plan before development begins.
Periodically review reports and remove unused events.

A well-planned analytics strategy produces cleaner reports and more actionable insights.

Final Thoughts

Google Analytics 4 is much more than a reporting dashboard—it's a comprehensive analytics platform that helps teams understand user behavior, measure business outcomes, and continuously improve digital experiences.

The quality of your analytics depends on the quality of your event strategy. By designing meaningful events, capturing useful parameters, and leveraging GA4's reporting capabilities, you can turn raw data into insights that drive better product decisions.

In the next article, we'll explore best practices for designing a scalable event architecture and implementing Firebase Analytics and GA4 effectively in React Native applications.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Firebase Analytics in React Native — Complete Implementation Guide

Dainy Jose — Sat, 25 Jul 2026 16:40:49 +0000

Analytics is one of the most valuable tools you can add to a mobile application. While building features is important, understanding how users interact with those features is what helps improve the overall user experience.

Many developers assume analytics is just about logging a few events. In reality, a well-planned analytics strategy provides insights that help product teams make informed decisions, identify user behavior patterns, and optimize the application over time.

In this guide, we'll walk through setting up Firebase Analytics in a React Native application and cover the essential tracking techniques every mobile developer should know.

Why Firebase Analytics?

Firebase Analytics is Google's free analytics solution for mobile and web applications. It is deeply integrated with Google Analytics 4 (GA4), making it easy to collect user behavior data and transform it into actionable insights.

Some of its key capabilities include:

Screen tracking
Automatic event collection
Custom event tracking
User properties
User ID support
Audience creation
Funnel analysis
Real-time monitoring
BigQuery integration
Seamless integration with GA4

Whether you're building a small application or a large-scale production product, Firebase Analytics provides a solid foundation for understanding user engagement.

Prerequisites

Before getting started, make sure you have:

A React Native project
A Firebase project
Android Studio and Xcode configured
Firebase configured for both Android and iOS

Installing Firebase Analytics

Install the required Firebase packages.

npm install @react-native-firebase/app
npm install @react-native-firebase/analytics

For iOS, install CocoaPods dependencies.

cd ios
pod install

Firebase Configuration

Download the Firebase configuration files from the Firebase Console.

Android

android/app/google-services.json

iOS

ios/GoogleService-Info.plist

Place each file in its respective platform directory.

After completing the platform-specific configuration, rebuild the application.

Import Analytics

import analytics from "@react-native-firebase/analytics";

Log Your First Event

Once Analytics is initialized, you can log events.

await analytics().logEvent("app_open");

Although Firebase automatically records several events, custom events allow you to track interactions specific to your application.

Track Screen Views

Understanding which screens users visit most frequently is essential for improving navigation and user experience.

await analytics().logScreenView({
  screen_name: "Home",
  screen_class: "HomeScreen",
});

Screen tracking helps answer questions such as:

Which screens receive the most traffic?
How long do users stay on each screen?
Which navigation paths are most common?
Where do users leave the application?

Track Custom Events

Custom events capture meaningful user interactions that are unique to your application.

Example:

await analytics().logEvent("add_to_cart", {
  product_id: "123",
  category: "mobile",
});

Some commonly used events include:

login
sign_up
search
view_item
select_item
add_to_cart
remove_from_cart
begin_checkout
purchase
share

Whenever possible, prefer GA4's recommended event names to improve reporting and compatibility.

Set User Properties

User properties help segment users based on shared characteristics.

await analytics().setUserProperty(
  "membership",
  "Premium"
);

Examples of useful user properties include:

Membership level
User role
Subscription plan
Preferred language
Country
App version

These properties can later be used to build audiences and analyze specific user segments.

Set User ID

If users authenticate within your application, you can associate analytics data with a unique user identifier.

await analytics().setUserId(userId);

This enables more accurate cross-session reporting while respecting your application's privacy policies.

Debug Analytics Events

During development, it's important to verify that events are being received correctly.

For Android:

adb shell setprop debug.firebase.analytics.app your.package.name

After enabling debug mode, open Firebase DebugView to monitor incoming events in near real time.

Verify Your Events

Before releasing your application, always confirm that events appear correctly in:

Firebase DebugView
GA4 Realtime Report
GA4 Events Report

Never assume an event is working simply because your code executes successfully. Always verify it within the analytics dashboard.

Common Mistakes to Avoid

Avoid these common implementation issues:

Logging too many unnecessary events
Using inconsistent event names
Missing important event parameters
Tracking the same screen multiple times
Ignoring Firebase DebugView during testing
Changing event names frequently after release

A consistent event naming strategy makes reports easier to maintain as your application grows.

Best Practices

Here are a few recommendations that have proven effective:

Follow GA4 recommended event names whenever possible.
Keep event names short and descriptive.
Include meaningful parameters with every custom event.
Define an event tracking plan before implementation.
Validate events in DebugView before releasing updates.
Use User Properties for segmentation instead of creating duplicate events.
Keep analytics implementation centralized using helper functions or services.

Following these practices results in cleaner dashboards and more reliable insights.

Conclusion

Firebase Analytics is much more than an event logging library—it's the foundation for understanding how users interact with your application.

By implementing screen tracking, custom events, user properties, and proper validation, you can build an analytics strategy that scales as your application grows.

In the next article, we'll explore how Google Analytics 4 (GA4) transforms these events into dashboards, funnels, audiences, and actionable business insights.

If you're using Firebase Analytics in your React Native projects, feel free to share your favorite implementation tips or best practices in the comments.

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

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.

📬 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

DEV Community: Dainy Jose

Google Play Requires Android 16 (API Level 36) by August 31, 2026 — React Native Migration Guide

Google Play Target API Requirement

Starting August 31, 2026:

Why Does Google Increase the Target API Every Year?

Updating a React Native Project

1. Install Android 16 SDK

2. Update compileSdk and targetSdk

3. Update Android Gradle Plugin

4. Update Gradle

5. Verify Kotlin Version

6. Clean and Rebuild

Quick Migration Checklist

Android 16 Behavior Changes You Should Know

1. Edge-to-Edge Is Mandatory

2. Large-Screen Support

3. Background Scheduling Changes

4. Local Network Protection

5. Photo Picker Improvements

6. Background Jobs

React Native Specific Things to Test

Common Issues After Upgrading

Build failures

Common areas include:

UI issues

Recommended React Native Versions

Final Thoughts

Useful Resources

From Learning to Implementation: My Journey with Firebase Analytics & GA4

Course Certificate

Mastering GA4 for Mobile Apps — From Events to Business Insights

Table of Contents

1. Realtime Report

2. Reports Snapshot

3. Events

4. Custom Events

5. Screen Tracking

6. Custom Definitions

7. Key Events (Conversions)

8. Acquisition

9. Engagement

10. Monetization

11. Ecommerce

12. Checkout Journey

13. Promotions

14. Campaign Tracking

15. Audiences

16. BigQuery Integration

17. User ID

Best Practices

Final Thoughts

Firebase Analytics in React Native — Complete Implementation Guide

Why Firebase Analytics?

Prerequisites

Installing Firebase Analytics

Firebase Configuration

Import Analytics

Log Your First Event

Track Screen Views

Track Custom Events

Set User Properties

Set User ID

Debug Analytics Events

Verify Your Events

Common Mistakes to Avoid

Best Practices

Conclusion

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

Why OWASP Mobile Top 10 Matters

The OWASP Mobile Top 10 (2025)

M1: Improper Credential Usage

M2: Inadequate Supply Chain Security

M3: Insecure Authentication & Authorization

M4: Insufficient Input & Output Validation

M5: Insecure Communication

M6: Inadequate Privacy Controls

M7: Insufficient Binary Protection

M8: Security Misconfiguration

M9: Insecure Data Storage

M10: Insufficient Cryptography