DEV Community: Babar Bilal

🚀 React Native 0.80 Is Here: Goodbye Deep Imports, Hello Stability

Babar Bilal — Thu, 19 Jun 2025 09:40:45 +0000

React Native 0.80 has officially landed, and it’s a major leap forward for the framework. From performance improvements to stricter TypeScript support and the gradual retirement of the Legacy Architecture — this release is packed.

If you’re upgrading from React Native 0.79, it’s worth reviewing the RN 0.79 release notes before diving in.

Let’s explore what’s new and what it means for you as a developer.

💥 Major Changes in React Native 0.80

📦 Deep Imports Are Now Deprecated

React Native 0.80 deprecates deep imports to reduce API surface area and stabilize usage:

// ❌ Deprecated
import { Alert } from 'react-native/Libraries/Alert/Alert';

// ✅ Use this instead
import { Alert } from 'react-native';

You’ll now see ESLint and console warnings if you’re using internal paths. This cleanup makes room for a more maintainable and secure API layer.

💬 Have missing exports or concerns? Join the discussion.

🛡️ Strict TypeScript API (Opt-In)

React Native 0.80 introduces an opt-in Strict TypeScript API that’s directly generated from internal source code — ensuring accurate, future-proof type definitions.

Why it matters:

Reduces breaking changes
Improves DX for TypeScript-first projects
Ideal for greenfield apps and early adopters

To opt in, follow the Strict Typescript Setup Guide.

🧊 Legacy Architecture Frozen

The Legacy Architecture is now frozen — no new features, fixes, or tests. Though you can still opt out of the New Architecture, DevTools will flag usage of incompatible APIs.

This paves the way for:

Faster runtime performance
Smaller app bundle sizes
Cleaner migration paths

🔗 React 19.1.0 Integration

React Native 0.80 includes React 19.1.0, keeping the framework in sync with the React core ecosystem.

⚠️ Note: A known issue affects owner stacks (used in debugging). It’s caused by a Babel plugin conflict — a fix is in the pipeline.

📱 Platform-Specific Enhancements

🍏 iOS: Experimental Prebuilt Dependencies

React Native 0.80 adds support for prebuilt dependencies (e.g. Folly, GLog) to reduce iOS build times by up to 12% — especially on M4 Macs.

Enable with:

RCT_USE_RN_DEP=1 bundle exec pod install

Or in your Podfile:

ENV['RCT_USE_RN_DEP'] = '1'

Expect faster builds and fewer CocoaPods headaches. 🎉

🤖 Android: Smaller APKs with IPO

Android builds now use Interprocedural Optimization (IPO) by default for both RN and Hermes — resulting in ~1MB smaller APKs.

✅ No manual action needed — just upgrade and rebuild.

🆕 New App Screen & Template Refactor

If you’re using the React Native CLI (not Expo), you’ll notice a refreshed starter template:

Modern design
Refactored into its own package
Optimized for larger screens

This makes new project setups cleaner and easier to extend.

🧠 Heads-Up: JSC Deprecation

React Native 0.80 is the last version with official support for JavaScriptCore (JSC). Future support will be community-maintained via @react-native-community/javascriptcore.

⚠️ Breaking Changes in React Native 0.80

Here are the major breaking changes you should be aware of:

📦 JavaScript Package Resolution

A new exports field in package.json may affect:

Deep imports (again, deprecated)
Metro bundler
Jest mocks

Shims are provided, but review your import paths carefully.

🧠 React Hooks Linting

eslint-plugin-react-hooks is now v5.2.0 (up from v4.6.0), which could introduce new linting errors.

✅ Review, fix, or suppress as needed.

🤖 Android Changes

Kotlin upgraded to 2.1.20
Removed deprecated StandardCharsets
Internal APIs tightened up
More migration from Java → Kotlin (changes in nullability, param types)

🍏 iOS Changes

Removed unused RCTFloorPixelValue from RCTUtils.h

🎯 Final Thoughts

React Native 0.80 isn’t just another version bump — it’s a strategic step toward stability, performance, and future readiness.

It’s time to explore:

✅ The New Architecture
✅ Strict TypeScript API
✅ Faster iOS builds
✅ Smaller Android APKs

Got feedback or hitting snags while upgrading? Join the conversation in the React Native Discussions.

🙌 Follow me for more React Native updates, migration guides, and cross-platform dev tips!

🏆 How to Add a Loyalty Card to Google Wallet Using Laravel (Step-by-Step)

Babar Bilal — Sat, 03 May 2025 20:50:43 +0000

If you're building a loyalty program and want to offer your users a modern, digital wallet experience, Google Wallet is a fantastic choice. In this post, I’ll walk you through how to generate and save a digital loyalty card with Google Wallet using Laravel.

By the end, you’ll be able to generate a “Save to Google Wallet” link your users can click to store their loyalty card — complete with a QR code, points, and branding — directly on their phones.

🔧 What We'll Cover

Setting up the Google Wallet API
Creating a Laravel service to generate loyalty cards
Building the "Save to Google Wallet" link

Let’s get started. 🚀

🧰 Prerequisites

Before we dive into code, here’s what you’ll need:

✅ A Google Cloud Project
✅ Google Wallet API enabled
✅ A Service Account Key
✅ Your Issuer ID (from Google Wallet Console)

Make sure your project has the Google Wallet API enabled, and your service account has the necessary permissions.

📁 Laravel Project Setup

Save your service account key in the Laravel project:

storage/app/google-wallet/service-account.json

Install required libraries:

composer require google/apiclient firebase/php-jwt

These packages help with Google API authentication and JWT generation.

🧠 Create the Google Wallet Service

Let’s encapsulate all logic in a single Laravel service class.

Create a file at:
app/Services/GoogleWalletService.php

<?php

namespace App\Services;

use Google\Client;
use Google\Service\Walletobjects\{LoyaltyClass, LoyaltyObject, Image, Barcode, LoyaltyPoints, LoyaltyPointsBalance};
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

class GoogleWalletService
{
    protected $credentialsPath;

    public function __construct()
    {
        $this->credentialsPath = storage_path('app/google-wallet/service-account.json');
    }

    protected function getClient()
    {
        $client = new Client();
        $client->setAuthConfig($this->credentialsPath);
        $client->addScope('https://www.googleapis.com/auth/wallet_object.issuer');
        return $client;
    }

    public function createLoyaltyCardForMember($user, $programName, $issuerName, $logoUri, $qrCode, $points, $uniqueId)
    {
        $client = $this->getClient();
        $service = new \Google\Service\Walletobjects($client);

        $issuerId = 'YOUR_ISSUER_ID'; // Replace with actual

        $classId = "{$issuerId}.{$programName}";
        $objectId = "{$issuerId}.member-{$uniqueId}";

        // Loyalty Class (template, one-time setup)
        try {
            $loyaltyClass = new LoyaltyClass([
                'id' => $classId,
                'issuerName' => $issuerName,
                'programName' => $programName,
                'programLogo' => new Image(['sourceUri' => ['uri' => $logoUri]]),
                'reviewStatus' => 'UNDER_REVIEW',
            ]);
            $service->loyaltyclass->insert($loyaltyClass);
        } catch (\Google\Service\Exception $e) {
            if ($e->getCode() != 409) throw $e; // Already exists is fine
        }

        // Loyalty Object (user card)
        $loyaltyObject = new LoyaltyObject([
            'id' => $objectId,
            'classId' => $classId,
            'state' => 'active',
            'accountName' => $user->name,
            'accountId' => "USER-{$uniqueId}",
            'barcode' => new Barcode([
                'type' => 'qrCode',
                'value' => $qrCode,
                'alternateText' => 'Scan to redeem',
            ]),
            'loyaltyPoints' => new LoyaltyPoints([
                'balance' => new LoyaltyPointsBalance(['int' => $points]),
                'label' => 'Points',
            ]),
        ]);
        $service->loyaltyobject->patch($objectId, $loyaltyObject);

        // Create JWT for Save to Google Wallet
        $claims = [
            'iss' => json_decode(file_get_contents($this->credentialsPath), true)['client_email'],
            'aud' => 'google',
            'typ' => 'savetowallet',
            'payload' => [
                'loyaltyObjects' => [
                    ['id' => $objectId]
                ]
            ]
        ];

        $jwt = JWT::encode(
            $claims,
            file_get_contents($this->credentialsPath),
            'RS256'
        );

        return "https://pay.google.com/gp/v/save/{$jwt}";
    }
}

🚀 Call It from Your Controller

Now let’s trigger the card generation from a controller:

use App\Services\GoogleWalletService;

public function generateLoyaltyCard(Request $request)
{
    $user = auth()->user();

    $service = new GoogleWalletService();

    $url = $service->createLoyaltyCardForMember(
        $user,
        'MyProgram',        // Program name
        'My Company Inc.',  // Issuer name
        'https://mydomain.com/logo.png',
        '1234567890',       // QR value
        100,                // Loyalty points
        $user->id
    );

    return redirect($url); // or return ['url' => $url];
}

🔐 What Does the Save URL Look Like?

The JWT generates a URL like:

https://pay.google.com/gp/v/save/eyJhbGciOiJSUzI1...

When the user opens it, Google Wallet lets them save the card instantly on their Android device.

✅ Tips

Loyalty Class is created once — you'll get a 409 Conflict if you try to re-insert.
Use a unique Object ID per user (e.g., member-USERID).
You can update the object later to change points, barcode, etc.
Set 'reviewStatus' => 'APPROVED' once your template is verified by Google.

🎉 Example Output

A user's loyalty card in Google Wallet will show:

Their name and account number
Current loyalty point balance
Scannable QR code
Your logo and brand color

All securely saved to their Android device — no app required.

🧠 Final Thoughts

Integrating Google Wallet in Laravel takes a bit of setup, but the result is a seamless, modern loyalty experience your users will love. You’re giving them a scannable, branded card that lives in their digital wallet — ready at checkout.

Want an Apple Wallet version too? Drop a comment below and I’ll create that next!

💬 Let’s Connect

Got questions or ideas?
Let me know in the comments — or follow me for more Laravel + fintech tutorials!

Migrate Your Bitbucket Repository to GitHub Effortlessly

Babar Bilal — Sat, 15 Mar 2025 16:41:35 +0000

Introduction

Migrating repositories from Bitbucket to GitHub can be a daunting task, especially when dealing with multiple branches, commits, and tags. To simplify this process, I have created an automated script that efficiently migrates your Bitbucket repository to GitHub while ensuring all branches, commits, and tags remain intact.

This guide will walk you through the process and help you troubleshoot common migration issues.

Why Migrate to GitHub?

GitHub has become the go-to platform for developers due to its vast ecosystem, better integrations, and superior collaboration tools. Whether you're moving due to Atlassian's strategic changes or just prefer GitHub's ecosystem, this script will help you make a seamless transition.

Prerequisites

Before running the script, ensure that you have the following:

A Bitbucket repository that you want to migrate.
A GitHub account and a personal access token with repo permissions.
Git installed on your system.
Curl for making API requests (installed by default on most systems).

How to Use the Migration Script

Step 1: Clone the Migration Script

Download or clone the script from the GitHub repository:

git clone https://github.com/babarbilal56/bitbucket-to-github-repo-migration.git
cd bitbucket-to-github-repo-migration

Step 2: Run the Script

Execute the script with the following command:

./migrate_repo.sh <BITBUCKET_REPO_URL> <GITHUB_REPO_URL> <GITHUB_ACCESS_TOKEN> <BITBUCKET_USERNAME> <GITHUB_USERNAME>

Example:

./migrate_repo.sh https://bitbucket.org/user/repo.git https://github.com/user/repo.git ghp_xxxxx bitbucket_user github_user

Script Workflow

Clone the Bitbucket Repository

The script clones the repository, including all branches and commits, using:

git clone --bare <BITBUCKET_REPO_URL>

Check if GitHub Repository Exists

If the repository exists, it skips the creation process.
If not, it creates a new repository using the GitHub API.

Set Up GitHub Remote

The script adds GitHub as the new remote:

git remote add github <GITHUB_REPO_URL>

Push to GitHub

It pushes all branches, commits, and tags using:

git push --mirror

Clean Up

After migration, it deletes the local repository clone to save space.

Troubleshooting Common Issues

1. GitHub Push Errors

If you encounter an error like:

fatal: RPC failed; curl 55 Recv failure: Connection reset by peer

Try the following solutions:

Increase Git Buffer Size:

git config --global http.postBuffer 524288000

Use SSH Instead of HTTPS:

git remote set-url origin git@github.com:<GITHUB_USERNAME>/<GITHUB_REPO>.git
git push --mirror

Increase Timeout Settings:

git config --global http.lowSpeedLimit 0
git config --global http.lowSpeedTime 999999

2. GitHub Repository Not Created

Ensure that your GitHub token has the correct permissions (repo scope).
Check GitHub API responses for errors.
Manually verify the repository's existence by visiting:

  https://github.com/<GITHUB_USERNAME>/<GITHUB_REPO>

3. Push Fails for Large Files

If your repository has large files, consider using Git Large File Storage (LFS):

git lfs install
git lfs track "*.largefile"
git add .gitattributes

Enhancing the Script

You can customize the script further by:

Changing repository visibility from private to public.
Handling multiple branches by pushing them separately instead of using --mirror.

Conclusion

This script provides an efficient way to migrate your Bitbucket repository to GitHub, maintaining all branches, commits, and tags. If you encounter issues, follow the troubleshooting steps outlined above.

For further assistance or contributions, check out the GitHub repository:

🔗 Migration Script Repository
📌 My GitHub Profile

Happy Coding! 🚀

Best Practices for Designing Scalable MongoDB Models with Mongoose

Babar Bilal — Sun, 09 Mar 2025 16:41:57 +0000

Creating complex models in MongoDB using Mongoose requires careful planning to ensure scalability, maintainability, and efficiency. Here are the best practices for designing complex models in MongoDB with Mongoose.

1. Schema Design Best Practices

✅ Use Embedded Documents for One-to-Few Relationships

If the related data is small and read together frequently, embed it inside the document.

Example: A User with multiple addresses

const mongoose = require("mongoose");

const AddressSchema = new mongoose.Schema({
  street: String,
  city: String,
  zip: String,
  country: String,
});

const UserSchema = new mongoose.Schema({
  name: String,
  email: { type: String, required: true, unique: true },
  addresses: [AddressSchema], // Embedded subdocument
});

const User = mongoose.model("User", UserSchema);

✔ Pros: Faster read operations, fewer queries

❌ Cons: Updates require writing the entire document again

Use when:

Data is frequently read together
The number of embedded documents is small (<10)

✅ Use References (Normalization) for One-to-Many Relationships

If the related data is large or frequently updated separately, store references (ObjectIds).

Example: A User with multiple Orders (large dataset)

const OrderSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: "User" }, // Reference to User
  totalPrice: Number,
  items: [{ product: String, quantity: Number }],
});

const Order = mongoose.model("Order", OrderSchema);

✔ Pros: Efficient updates, avoids document bloat

❌ Cons: Requires populate() to fetch related data

Use when:

The sub-collection grows large (>10 items)
You need independent CRUD operations on the sub-collection

🔹 Fetching referenced data with populate:

Order.find().populate("user").exec((err, orders) => {
  console.log(orders);
});

✅ Hybrid Approach (Partial Embedding + References)

For medium-sized related data, embed only frequently used fields and reference the rest.

Example: Embed order summary but reference order details

const OrderSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: "User" },
  totalPrice: Number,
  items: [{ product: String, quantity: Number }],
  shipping: {
    address: String,
    status: { type: String, default: "Processing" }, // Frequently queried field
  },
});

✔ Best of both worlds – fast reads and efficient updates

2. Schema Design Optimizations

✅ Indexing for Fast Queries

Indexes improve query speed. Always index fields that are frequently queried.

const UserSchema = new mongoose.Schema({
  email: { type: String, required: true, unique: true, index: true }, // Index for fast lookup
  createdAt: { type: Date, default: Date.now, index: -1 }, // Sort index for fast filtering
});

✔ Use indexes on:

Frequently queried fields (email, username)
Fields used in sorting (createdAt)
Fields used in filtering (status, category)

🔹 Check Index Usage

db.users.getIndexes();
db.orders.find({ userId: "123" }).explain("executionStats");

✅ Timestamps for Tracking

Use timestamps: true in your schema to automatically store createdAt and updatedAt.

const OrderSchema = new mongoose.Schema({
  totalPrice: Number,
}, { timestamps: true });

✅ Use `lean()` for Read-Only Queries

lean() improves performance by returning plain JavaScript objects instead of full Mongoose documents.

Order.find().lean().exec();

✔ 30-50% faster than normal queries

Use when:

You don’t need to modify the retrieved data
You only need raw JSON output for API responses

3. Handling Large Data Efficiently

✅ Pagination for Large Datasets

Use pagination to limit query results for better performance.

const page = 1;
const limit = 10;

Order.find()
  .skip((page - 1) * limit)
  .limit(limit)
  .exec();

✔ Avoid limit(1000), as it can cause performance issues

✅ Aggregation Pipeline for Complex Queries

Use aggregation for reporting and complex queries.

Order.aggregate([
  { $match: { status: "Completed" } },
  { $group: { _id: "$user", totalSpent: { $sum: "$totalPrice" } } },
]);

4. Soft Deletes Instead of Permanent Deletion

Instead of deleting a document, use a deletedAt field.

const UserSchema = new mongoose.Schema({
  name: String,
  email: String,
  deletedAt: { type: Date, default: null },
});

✔ Hides deleted items without losing data

🔹 Query only active users:

User.find({ deletedAt: null });

5. Virtual Fields for Computed Values

Virtual fields do not get stored in the database but are calculated dynamically.

UserSchema.virtual("fullName").get(function () {
  return `${this.firstName} ${this.lastName}`;
});

✔ Use for derived data without increasing DB size

Conclusion

🚀 Best Practices Summary
✅ Embed small data, reference large data

✅ Use lean(), pagination, and caching

✅ Index frequently queried fields

✅ Use soft deletes instead of actual deletion

✅ Use environment variables for security

✅ Use middleware for automation

Following these practices will help you build efficient, scalable, and maintainable MongoDB applications with Mongoose! 🚀

Supercharge Your React Apps with Custom Hooks

Babar Bilal — Wed, 05 Mar 2025 11:14:03 +0000

React is a powerful library for building user interfaces, but managing state, handling side effects, and optimizing performance can quickly become complex. To simplify these challenges, I created react-custom-hooks-utils, a library of reusable React custom hooks that streamline development.

🚀 Introducing `react-custom-hooks-utils`

This library offers a collection of hooks designed to improve state management, handle side effects, and enhance user interactions efficiently.

📦 Installation

You can install the library using npm or yarn:

Using npm

npm install react-custom-hooks-utils

Using yarn

yarn add react-custom-hooks-utils

🔥 Featured Hooks & Usage

1. Fetch Data from an API (`useFetch`)

import { useFetch } from 'react-custom-hooks-utils';
const { data, loading, error } = useFetch('https://api.example.com/data');

data: Stores the API response.
loading: Boolean indicating if the request is in progress.
error: Captures any error that occurs during the fetch.

2. Persist State in Local Storage (`useLocalStorage`)

import { useLocalStorage } from 'react-custom-hooks-utils';
const [name, setName] = useLocalStorage('name', 'John Doe');

Retrieves and stores values in localStorage.
Automatically updates when values change.

3. Toggle Boolean State (`useToggle`)

import { useToggle } from 'react-custom-hooks-utils';
const [isVisible, toggleVisibility] = useToggle(false);

Allows toggling between true and false states.

4. Debounce a Value (`useDebounce`)

import { useDebounce } from 'react-custom-hooks-utils';
const debouncedSearchTerm = useDebounce(searchTerm, 500);

Delays updating the state until after a specified time (500ms).
Useful for optimizing API requests when users type in a search bar.

5. Get Window Dimensions (`useWindowSize`)

import { useWindowSize } from 'react-custom-hooks-utils';
const { width, height } = useWindowSize();

Provides real-time updates of the window size (width and height).

6. Get Previous State (`usePrevious`)

import { usePrevious } from 'react-custom-hooks-utils';
const previousCount = usePrevious(count);

Stores the previous state value.
Useful for tracking state changes over time.

7. Detect Clicks Outside an Element (`useClickOutside`)

import { useClickOutside } from 'react-custom-hooks-utils';
import { useRef } from 'react';
const ref = useRef();
useClickOutside(ref, () => console.log('Clicked outside!'));

Detects clicks outside a referenced element.
Useful for closing dropdowns, modals, or sidebars when clicking outside.

8. Detect Hover State (`useHover`)

import { useHover } from 'react-custom-hooks-utils';
const [hoverRef, isHovered] = useHover();

hoverRef: Attach this to an element.
isHovered: Boolean indicating if the element is being hovered.

9. Execute Code After Delay (`useTimeout`)

import { useTimeout } from 'react-custom-hooks-utils';
useTimeout(() => console.log('Timeout!'), 1000);

Runs a callback function after a specified delay (1000ms).

10. Render Lists Easily (`Each`)

import { Each } from 'react-custom-hooks-utils';
const data = ['Item 1', 'Item 2', 'Item 3'];
<Each of={data} render={(item, index) => <p key={index}>{item}</p>} />

Simplifies rendering lists.
Ensures correct key assignment and child element handling.

11. Manage Form State (`useForm`)

import { useForm } from 'react-custom-hooks-utils';
const { values, errors, handleChange, handleSubmit } = useForm(
  { email: '', password: '' },
  (values) => {
    const errors = {};
    if (!values.email) errors.email = 'Email is required';
    if (!values.password) errors.password = 'Password is required';
    return errors;
  }
);

values: Stores form field values.
errors: Stores validation errors.
handleChange: Updates state on input change.
handleSubmit: Validates and submits form data.

12. Access and Track Geolocation (`useGeoLocation`)

import { useGeoLocation } from 'react-custom-hooks-utils';
const { loading, coordinates, error, isWatching } = useGeoLocation(
  { enableHighAccuracy: true, timeout: 5000 },
  true
);

loading: Whether the location is still being fetched.
coordinates: The current coordinates (if available).
error: An error object if the location request fails.
isWatching: Whether the hook is currently watching for location changes.

13. Update Document Title (`useDocumentTitle`)

import { useDocumentTitle } from 'react-custom-hooks-utils';
const PageComponent = () => {
  useDocumentTitle('My Page Title', true);
  return <div>Content of the page</div>;
};

title: The title you want to set for the document.
revertOnUnmount: If true, the document title will revert to its previous value when the component unmounts.

🔗 Get Started Today!

These hooks are designed to enhance productivity and simplify React development. Explore the full library on GitHub:

👉 GitHub: https://github.com/babarbilal56
👉 LinkedIn: www.linkedin.com/in/babarbilal56

⭐ Don't forget to star the repo and share your feedback!

Happy coding! 🚀

What's New in React Native 0.78: Performance, Native Integration, and React 19 Support 🚀

Babar Bilal — Fri, 28 Feb 2025 12:48:35 +0000

React Native 0.78 is here, bringing a host of improvements that enhance performance, streamline development, and refine platform integration. This release makes updates faster, more efficient, and easier to adopt, ensuring a smoother developer experience.

In this article, we’ll break down the major updates, including React 19 support, the new React Compiler, performance enhancements, and native integration improvements for both Android and iOS.

🔥 React 19 Support

React Native 0.78 now fully supports React 19, which introduces several breaking changes and new features. Developers upgrading from React 18 should note the removal of deprecated APIs like propTypes and other outdated functionalities.

Key Features in React 19:

Actions – Handle async transitions with better management of data submission, pending states, optimistic updates, and error handling.
useActionState – A new hook for managing action states, wrapping functions into callable actions.
useOptimistic – Simplifies optimistic UI updates by managing state transitions during async requests.
use – Enables reading promises or contexts directly during render, suspending until resolution.
Ref as Props – Allows passing refs as props without using forwardRef, making component migration smoother.

⚡ React Compiler: Automatic Memoization

The React Compiler in React Native 0.78 optimizes performance by automatically applying memoization. Previously, developers had to manually use useMemo, useCallback, and React.memo. Now, React Compiler handles this optimization at build time.

Benefits:

✅ Simpler Setup – Only one package required (previously, both a compiler and a runtime were needed).

✅ Easier Configuration – Just install the compiler and configure the Babel plugin.

✅ Improved Performance – Automatically memoizes values and components, reducing unnecessary re-computations.

📈 Performance & Release Improvements

Faster and Smaller Releases – Starting in 2025, React Native will release updates more frequently with fewer breaking changes, making upgrades smoother.
Opt-in JavaScript Logs in Metro – Reintroduces JS log streaming (removed in v0.77), allowing developers to enable it during transition:

  npx @react-native-community/cli start --client-logs

Improved Debugging and Stability – Enhanced Metro bundler optimizations lead to faster startup times and reduced memory usage.

📱 Android: Native XML Drawable Support

React Native 0.78 introduces native support for Android XML drawables. This allows developers to use Android vector drawables, ensuring scalable, high-quality images with minimal impact on app size.

How to Use XML Drawables:

// Using require
<Image source={require('./img/my_icon.xml')} style={{ width: 40, height: 40 }} />

// Using import
import MyIcon from './img/my_icon.xml';
<Image source={MyIcon} style={{ width: 40, height: 40 }} />

Benefits:

✔ Crisp images at any resolution – No pixelation or blurriness.

✔ Reduced app size – Eliminates the need for multiple resolution variants.

✔ Optimized memory usage – Icons are reused efficiently.

Limitations:

❌ Build-Time Reference Requirement – Drawables must be predefined, not dynamically loaded.

❌ Metro Bundler Incompatibility – Requires a full app rebuild when modifying drawables.

❌ Android-Only – For cross-platform support, use react-native-svg.

🍏 Improved iOS Brownfield Integration

For iOS developers, React Native 0.78 introduces RCTReactNativeFactory, making it easier to embed React Native views inside existing iOS apps. This enhancement simplifies modular adoption and allows multiple React Native instances within different view controllers.

How to Embed React Native in a ViewController

Step 1: Import Required Modules

import React
import React_RCTAppDelegate

Step 2: Define the View Controller

public class ViewController {
  var reactNativeFactory: RCTReactNativeFactory?
  var reactNativeDelegate: ReactNativeDelegate?

  public func viewDidLoad() {
    super.viewDidLoad()
    reactNativeDelegate = ReactNativeDelegate()
    reactNativeFactory = RCTReactNativeFactory(delegate: reactNativeDelegate!)
    view = reactNativeFactory.rootViewFactory.view(withModuleName: "<your module name>")
  }
}

Step 3: Define the Delegate

class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
  override func sourceURL(for bridge: RCTBridge) -> URL? {
    self.bundleURL()
  }

  override func bundleURL() -> URL? {
    #if DEBUG
    return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
    #else
    return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    #endif
  }
}

With this setup, React Native instances can be dynamically created inside a ViewController, allowing for a seamless React Native integration into existing iOS apps.

🚀 Conclusion

React Native 0.78 marks a significant step forward, with improvements in performance, platform stability, and developer workflow. With full React 19 support, the new React Compiler, and enhanced native features for Android and iOS, this update makes React Native development more efficient and future-proof.

Key Takeaways:

✅ React 19 introduces powerful new hooks and removes deprecated APIs.

✅ The React Compiler automates memoization, improving performance.

✅ Native Android XML drawable support enhances image rendering quality.

✅ iOS RCTReactNativeFactory simplifies embedding React Native views in native apps.

✅ Faster and smaller releases in 2025 will make upgrades smoother.

As you upgrade, be mindful of breaking changes related to React 19 deprecations, React Compiler setup, and Metro log streaming. These updates may require some adjustments, but they result in a more optimized and stable development environment.

🚀 Happy coding with React Native 0.78! 🎉

🔗 Get Started Today!

👉 GitHub: Babar Bilal

Automate Component Creation with React & React Native Component Generator

Babar Bilal — Fri, 28 Feb 2025 10:35:03 +0000

Introduction

As a developer, setting up boilerplate code for React and React Native components can be time-consuming. To simplify this process, I created React & React Native Component Generator, a web application that automates component creation based on user-defined state variables and API endpoints. This tool is designed to enhance productivity by reducing repetitive coding tasks.

Features

1. Component Name Input

Easily specify the name of the component to be generated.

2. State Variables

Add, edit, and remove state variables dynamically.
Support for validation rules such as required fields, min/max values, regex patterns, etc.

3. API Endpoints

Define API endpoints with methods (GET, POST, PUT, DELETE) and URLs.
Generate API handling boilerplate automatically.

4. Input Fields

Optionally generate input fields for defined state variables.

5. Validation Rules

Set validation rules like required fields, min/max length, min/max value, and regex patterns.

6. Code Preview

View the generated code in real time before using it.

7. Copy to Clipboard

Quickly copy the generated component code with a single click.

Technologies Used

React: For building the web application.
React Native: For generating native components.
Axios: To facilitate API requests.
React Syntax Highlighter: For code preview with syntax highlighting.
Lucide React: For incorporating UI icons.

Installation

Clone the repository:

git clone https://github.com/babarbilal56/react-or-reactnative-component-generator.git
cd react-or-reactnative-component-generator

Install dependencies:

npm install

Start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to use the application.

Usage Guide

Enter the desired component name.
Click “Add Variable” to define state variables (e.g., string, number, boolean).
Optionally, set validation rules for each variable.
Click “Add Endpoint” to specify API details.
Toggle “Generate Input Fields” to include input fields in the component.
Toggle “Generate for React Native” to create a React Native component.
Click “Generate Component” to auto-generate the code.
Copy the code for immediate use.

Contributing

Contributions are welcome! Feel free to fork the repository, create issues, or submit pull requests to improve the project.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

A huge thanks to the open-source community for providing the incredible libraries and tools that made this project possible.

React 19: A New Era of Development

Babar Bilal — Wed, 26 Feb 2025 13:01:36 +0000

The React team has officially released React 19, bringing a host of features aimed at improving developer experience and application performance. This version focuses on simplifying asynchronous operations, enhancing state management, and introducing new hooks that make building complex applications easier than ever. Let's explore the key features of React 19 and how they can enhance your development workflow.

What's New in React 19?

1. Enhanced Asynchronous Handling

One of the standout features of React 19 is its improved handling of asynchronous functions. The introduction of Actions for Asynchronous Functions allows developers to manage async operations more intuitively. This feature automatically handles pending states, errors, and optimistic updates, making it easier to work with data fetching and state updates.

Example:

import { useAction } from 'react';

function FetchDataButton() {
    const fetchData = useAction(async () => {
        const response = await fetch('/api/data');
        return response.json();
    });
    return <button onClick={fetchData}>Fetch Data</button>;
}

2. New Hooks

React 19 introduces several new hooks that enhance functionality and simplify common tasks:

useOptimistic: Optimistically update the UI while waiting for a server response, providing a smoother user experience.
useFormStatus: Provides access to form submission status, making it easier to manage loading states and errors without prop drilling.
useActionState: Simplifies form submissions by automatically managing the submission state.

Example of `useOptimistic`:

function ChangeName({ currentName, onUpdateName }) {
    const [optimisticName, setOptimisticName] = useOptimistic(currentName);

    const submitAction = async (formData) => {
        const newName = formData.get("name");
        setOptimisticName(newName);
        const updatedName = await updateName(newName);
        onUpdateName(updatedName);
    };

    return (
        <div>
            Your name is: {optimisticName}
            <form onSubmit={submitAction}>
                <input name="name" />
                <button type="submit">Change Name</button>
            </form>
        </div>
    );
}

3. Server Components and Server Actions

React 19 enhances Server Components, enabling developers to render parts of the UI on the server, which improves performance, especially for data-heavy applications. Server Actions allow Client Components to invoke asynchronous functions that run on the server, streamlining data fetching and state management.

Example of Server Components:

import { use } from 'react';

function Comments({ commentsPromise }) {
    const comments = use(commentsPromise);
    return (
        <div>
            {comments.map(comment => (
                <div key={comment.id}>{comment.text}</div>
            ))}
        </div>
    );
}

4. Improved Resource Support

React 19 introduces native support for document metadata tags, simplifying SEO optimization. It also provides built-in support for external and inline stylesheets, improving stylesheet management. Furthermore, enhanced async script support allows scripts to be rendered anywhere in the component tree, offering greater flexibility in script loading.

5. Enhanced Error Reporting

Error handling has been streamlined in React 19 with a new error reporting system that eliminates duplication and provides clearer insights into component failures, making debugging easier and more efficient.

Conclusion

React 19 marks a significant milestone in the evolution of the React library. With its focus on simplifying asynchronous operations, enhancing state management, and improving performance, this release empowers developers to build more dynamic and efficient applications. The new hooks and server components provide powerful tools for managing complex UIs, while the improved error reporting system makes debugging a breeze.

As you explore the new features of React 19, you'll find that upgrading your applications can lead to a smoother development experience and a better end-user experience. Be sure to check out the official documentation for more details and examples to help you get started with React 19.

Enhance Your React Debugging with react-component-logger

Babar Bilal — Wed, 26 Feb 2025 10:28:24 +0000

Introduction

Debugging React applications can be challenging, especially when tracking component renders and prop changes. react-component-logger simplifies this by providing structured and visually distinct console logs, helping you debug faster and more effectively.

Why Use react-component-logger?

React DevTools are useful but sometimes overwhelming. react-component-logger offers a lightweight alternative by providing:

Render Tracking: Monitors how often components re-render.
Prop Change Detection: Displays previous and updated prop values.
Lifecycle Logging: Logs when components mount and unmount.
Color-Coded Logs: Assigns unique colors for easy identification.

Installation

Install react-component-logger with the following command:

npm install react-component-logger

yarn add react-component-logger

How to Use react-component-logger

Basic Implementation

To enable logging, call comLog() inside your component.

import React, { useState } from 'react';
import { comLog } from 'react-component-logger';

function Counter({ count }) {
  comLog(); // Enables logging for this component
  return <div>Count: {count}</div>;
}

export default function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Logging Specific Values

You can also log specific values using comLog as a tagged template function.

function ExampleComponent({ name }) {
  const log = comLog();
  const age = 25;
  log`User name: ${name}, Age: ${age}`;
  return <p>Hello, {name}!</p>;
}

Benefits for Developers

If debugging unnecessary re-renders or unexpected prop changes is a hassle, react-component-logger is a game-changer. Instead of manually adding console.log statements, react-component-logger provides structured, easy-to-read logs, making it simple to identify issues.

Conclusion

With react-component-logger, debugging React applications becomes more efficient and visually organized. Whether you're a beginner or an experienced React developer, this lightweight tool can enhance your development process.

🚀 Install react-component-logger today and improve your debugging workflow!

🔗 Get Started Today!

👉 GitHub: react-component-logger

👉 LinkedIn: Babar Bilal

👉 Npm: react-component-logger

👉 Sandbox: CodeSandbox Demo

⭐ Don't forget to star the repo and share your feedback!

Happy coding! 🚀

Creating Truly Responsive UI in React Native with react-native-responsive-dimention

Babar Bilal — Tue, 25 Feb 2025 14:50:04 +0000

Introduction

Building a responsive UI in React Native can be complex due to variations in screen sizes, resolutions, and aspect ratios. The react-native-responsive-dimension library simplifies this by offering dynamic scaling utilities for adaptive and scalable layouts.

This article explains how to use this library to achieve a seamless responsive UI in React Native applications.

Why Responsive Design Matters in React Native

Unlike web development, where media queries help handle different screen sizes, React Native apps run across a wide range of devices, from small phones to large tablets. Without a reliable responsive approach, designs may appear inconsistent.

react-native-responsive-dimension provides dynamic scaling functions to ensure a uniform experience across all devices.

Features of `react-native-responsive-dimension`

Adaptive width and height scaling
Dynamic font scaling
Device type detection (Phone vs. Tablet)
Percentage-based width and height calculations
Real-time screen dimension updates with a custom hook

Installation

Install the package using npm or yarn:

npm i react-native-responsive-dimension

yarn add react-native-responsive-dimension

Getting Started

Import the necessary functions into your React Native component:

import {
  rw,   // Responsive width
  rh,   // Responsive height
  rf,   // Responsive font size
  wp,   // Responsive width percentage
  hp,   // Responsive height percentage
  isTablet, // Detect if device is a tablet
  useResponsive // Hook for real-time updates
} from 'react-native-responsive-dimension';

Responsive Width & Height

To make a component’s size responsive:

<View style={{ width: rw(100), height: rh(200) }}>
  <Text style={{ fontSize: rf(16) }}>Responsive Design</Text>
</View>

Dynamic Font Sizing

<Text style={{ fontSize: rf(20) }}>This is responsive text</Text>

Checking if Device is a Tablet

if (isTablet()) {
  // Apply tablet-specific styles
}

Using Percentage-Based Sizing

<View style={{ width: wp(50), height: hp(30) }}>
  <Text>50% width and 30% height of the screen</Text>
</View>

Real-Time Responsive Hook

import { useResponsive } from 'react-native-responsive-dimension';

const MyComponent = () => {
  const { rw, rh, wp, hp } = useResponsive();

  return (
    <View style={{ width: rw(80), height: rh(40) }}>
      <Text>Responsive content here</Text>
    </View>
  );
};

API Overview

`rw(width: number): number`

Scales the width relative to the screen size.

`rh(height: number): number`

Scales the height relative to the screen size.

`rf(size: number, factor?: number): number`

Scales font size dynamically based on the screen scaling factor.

`wp(percentage: number): number`

Calculates a width based on a percentage of the screen width.

`hp(percentage: number): number`

Calculates a height based on a percentage of the screen height.

`isTablet(): boolean`

Detects whether the device is a tablet.

`useResponsive()`

A hook providing real-time dimension updates.

Conclusion

The react-native-responsive-dimension package makes it easy to create truly responsive designs in React Native. By leveraging its utility functions and hooks, developers can ensure a consistent user experience across devices without manually adjusting styles for different screen sizes.

Check out the package on GitHub and install it via npm to start building better, more responsive apps today!

🔗 Get Started Today!

👉 GitHub: https://github.com/babarbilal56/react-native-responsive-dimention

👉 LinkedIn: www.linkedin.com/in/babarbilal56

👉 Npm: https://www.npmjs.com/package/react-native-responsive-dimention

React Native Smooth Scroll: A Lightweight and Customizable Component

Babar Bilal — Tue, 25 Feb 2025 14:29:35 +0000

Introduction

Infinite scrolling is an essential feature for modern mobile applications, allowing users to seamlessly browse long lists of data without manually loading more items. To simplify this functionality, I’ve built react-native-smooth-scroll, a lightweight and customizable infinite scroll component for React Native that supports pagination, pull-to-refresh, and error handling.

Features

✅ Infinite Scroll: Automatically loads more data as the user scrolls.

✅ Pagination: Supports paginated data fetching.

✅ Pull-to-Refresh: Allows refreshing the list with a pull gesture.

✅ Error Handling: Displays an error message if data fetching fails.

✅ Customizable: Customize the loader, error, and empty list components.

Installation

Install the library using npm or yarn:

npm install react-native-smooth-scroll

yarn add react-native-smooth-scroll

Usage

Basic Example

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import InfiniteScroll from 'react-native-smooth-scroll';

const App = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async (pageNumber) => {
    try {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/posts?_limit=10&_page=${pageNumber}`
      );
      if (!response.ok) throw new Error('Failed to fetch data');
      const newData = await response.json();
      return newData;
    } catch (err) {
      setError(err.message);
      return [];
    }
  };

  const loadMore = async () => {
    if (error) return;
    const newData = await fetchData(page + 1);
    if (newData.length > 0) {
      setData((prevData) => [...prevData, ...newData]);
      setPage((prevPage) => prevPage + 1);
    } else {
      setHasMore(false);
    }
  };

  const handleRefresh = async () => {
    setIsRefreshing(true);
    setError(null);
    const initialData = await fetchData(1);
    setData(initialData);
    setPage(1);
    setHasMore(true);
    setIsRefreshing(false);
  };

  useEffect(() => {
    fetchData(1).then(setData);
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <InfiniteScroll
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text>{item.body}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id.toString()}
        loadMore={loadMore}
        hasMore={hasMore}
        onRefresh={handleRefresh}
        isRefreshing={isRefreshing}
        error={error}
        errorComponent={<Text style={styles.errorText}>{error}</Text>}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  item: { padding: 16, borderBottomWidth: 1, borderBottomColor: '#ccc' },
  title: { fontSize: 16, fontWeight: 'bold' },
  errorText: { textAlign: 'center', color: 'red', marginVertical: 20 },
});

export default App;

Props

Prop	Type	Description
`data`	`Array`	The array of data items to render.
`renderItem`	`Function`	Function to render each item in the list.
`keyExtractor`	`Function`	Function to extract a unique key for each item.
`loadMore`	`Function`	Function to load more data. Should return a Promise.
`hasMore`	`Boolean`	Whether there is more data to load.
`loaderComponent`	`React.ReactNode`	Custom loader component to display while loading more data.
`listEmptyComponent`	`React.ReactNode`	Component to display when the list is empty.
`onRefresh`	`Function`	Function to refresh the list. Should return a Promise.
`isRefreshing`	`Boolean`	Whether the list is currently refreshing.
`error`	`String or null`	Error message to display if data fetching fails.
`errorComponent`	`React.ReactNode`	Custom error component to display when there’s an error.

Customization

Custom Loader

<InfiniteScroll loaderComponent={<MyCustomLoader />} // other props />

Custom Error Component

<InfiniteScroll errorComponent={<MyCustomErrorComponent />} // other props />

Custom Empty List Component

<InfiniteScroll listEmptyComponent={<MyCustomEmptyComponent />} // other props />

Contributing

Contributions are welcome! Follow these steps:

Fork the repository.
Create a new branch:

   git checkout -b feature/YourFeatureName

Commit your changes:

   git commit -m 'Add some feature'

Push to the branch:

   git push origin feature/YourFeatureName

Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Babar Bilal

If you find this library useful, please ⭐️ the repository on GitHub!

GitHub: https://github.com/babarbilal56

LinkedIn: www.linkedin.com/in/babarbilal56

DEV Community: Babar Bilal

🚀 React Native 0.80 Is Here: Goodbye Deep Imports, Hello Stability

💥 Major Changes in React Native 0.80

📦 Deep Imports Are Now Deprecated

🛡️ Strict TypeScript API (Opt-In)

🧊 Legacy Architecture Frozen

🔗 React 19.1.0 Integration

📱 Platform-Specific Enhancements

🍏 iOS: Experimental Prebuilt Dependencies

🤖 Android: Smaller APKs with IPO

🆕 New App Screen & Template Refactor

🧠 Heads-Up: JSC Deprecation

⚠️ Breaking Changes in React Native 0.80

📦 JavaScript Package Resolution

🧠 React Hooks Linting

🤖 Android Changes

🍏 iOS Changes

🎯 Final Thoughts

🏆 How to Add a Loyalty Card to Google Wallet Using Laravel (Step-by-Step)

🔧 What We'll Cover

🧰 Prerequisites

📁 Laravel Project Setup

🧠 Create the Google Wallet Service

🚀 Call It from Your Controller

🔐 What Does the Save URL Look Like?

✅ Tips

🎉 Example Output

🧠 Final Thoughts

💬 Let’s Connect

Migrate Your Bitbucket Repository to GitHub Effortlessly

Introduction

Why Migrate to GitHub?

Prerequisites

How to Use the Migration Script

Step 1: Clone the Migration Script

Step 2: Run the Script

Example:

Script Workflow

Clone the Bitbucket Repository

Check if GitHub Repository Exists

Set Up GitHub Remote

Push to GitHub

Clean Up

Troubleshooting Common Issues

1. GitHub Push Errors

Increase Git Buffer Size:

Use SSH Instead of HTTPS:

Increase Timeout Settings:

2. GitHub Repository Not Created

3. Push Fails for Large Files

Enhancing the Script

Conclusion

Best Practices for Designing Scalable MongoDB Models with Mongoose

1. Schema Design Best Practices

✅ Use Embedded Documents for One-to-Few Relationships

Example: A User with multiple addresses

✅ Use References (Normalization) for One-to-Many Relationships

Example: A User with multiple Orders (large dataset)

✅ Hybrid Approach (Partial Embedding + References)

Example: Embed order summary but reference order details

2. Schema Design Optimizations

✅ Indexing for Fast Queries

✅ Timestamps for Tracking

✅ Use lean() for Read-Only Queries

3. Handling Large Data Efficiently

✅ Pagination for Large Datasets

✅ Aggregation Pipeline for Complex Queries

4. Soft Deletes Instead of Permanent Deletion

5. Virtual Fields for Computed Values

Conclusion

Supercharge Your React Apps with Custom Hooks

🚀 Introducing react-custom-hooks-utils

📦 Installation

Using npm

Using yarn

🔥 Featured Hooks & Usage

1. Fetch Data from an API (useFetch)

2. Persist State in Local Storage (useLocalStorage)

3. Toggle Boolean State (useToggle)

4. Debounce a Value (useDebounce)

✅ Use `lean()` for Read-Only Queries

🚀 Introducing `react-custom-hooks-utils`

1. Fetch Data from an API (`useFetch`)

2. Persist State in Local Storage (`useLocalStorage`)

3. Toggle Boolean State (`useToggle`)

4. Debounce a Value (`useDebounce`)

5. Get Window Dimensions (`useWindowSize`)

6. Get Previous State (`usePrevious`)

7. Detect Clicks Outside an Element (`useClickOutside`)

8. Detect Hover State (`useHover`)

9. Execute Code After Delay (`useTimeout`)

10. Render Lists Easily (`Each`)

11. Manage Form State (`useForm`)

12. Access and Track Geolocation (`useGeoLocation`)

13. Update Document Title (`useDocumentTitle`)

Example of `useOptimistic`: