DEV Community: MAYANK TYAGI

Building a Scalable React Native Super App with Re.Pack & Module Federation

MAYANK TYAGI — Sat, 04 Oct 2025 12:08:47 +0000

Building a Super App with React Native: Lessons Learned

In the past few years, super apps have become a popular approach for enterprises that want to bring multiple services under one umbrella. Instead of forcing users to download and maintain multiple apps, a super app provides a single entry point where mini-apps or feature modules can live together.

When my team started building an enterprise super app with React Native, our goal was simple:

Make it scalable so new modules can be plugged in easily.
Ensure it works even in offline environments (like warehouses or remote sites).
Keep the developer experience smooth so teams can work in parallel.

This blog shares our journey, the challenges we faced, and the architectural choices we made to make it all work.

Why React Native for a Super App?

There are plenty of options out there, but React Native stood out for us because:

Cross-platform support: One codebase for iOS and Android.
Rich ecosystem: Mature libraries for navigation, state management, and networking.
OTA (over-the-air) updates: Ability to push updates without waiting for app store approvals.
Community and tooling: Strong developer community and solutions like Repack for modular bundling.

Offline Mode: Prefetch and Launch Strategy

Offline mode was critical for us. Here’s how we approached it:

Prefetching bundles

When online, the app downloads the required bundles and caches them locally.

Bundle config storage

Metadata about which bundles are available and their versions is stored locally.

Offline launch flow

On launch, if the device is offline, the app checks local bundle configs.
A popup informs the user they’re in offline mode.
The user is asked for their EMP ID to continue with cached features.

Sync on reconnect

Once the device is back online, updated bundles are downloaded and old ones replaced.

This ensured users could continue working seamlessly without connectivity issues.

In this post, we’ll dive into how to design and implement a React Native Super App using Re.Pack’s Module Federation, covering:

⚙️ Architecture overview (Host, Auth, Platform, MicroApps)
🧩 Dynamic loading via Federated.createURLResolver + Federated.importModule
📦 Offline mode and bundle caching
🔐 Authentication + federation of login flows
🚀 Real-world patterns and setup code

🏗️ High-Level Architecture

┌────────────────────────────┐
│         Host App           │
│  ─ Auth Federation         │
│  ─ Bundle Fetch/Cache      │
│  ─ Offline Manager         │
│  ─ Navigation Shell        │
│  ─ Re.Pack Federation Init │
└──────────┬─────────────────┘
           │
           ▼
┌──────────────────────┬──────────────────────┐
│      Auth App        │     Platform App     │
│ - Authentication      │ - Shared Services    │
│ - Offline Login Cache │ - Reusable Hooks     │
│ - Token Federation    │ - Realm/DB, APIs     │
└──────────┬───────────┘───────────┬──────────┘
           │                       │
           ▼                       ▼
┌────────────────────────────────────────────────┐
│        Remote Micro Apps (fetched OTA)          │
│ ─ Dashboard, MicroApp1, MicroApp2, MicroApp3…   │
│ ─ Fetched via federation fetch → cached offline │
│ ─ Access shared platform services               │
└────────────────────────────────────────────────┘

⚙️ Bundling Strategy

Bundled Inside the APK/IPA

These modules are packaged within the native binary:

Host App → Shell that initializes Re.Pack federation, manages navigation, caching, and authentication state.
Auth App → Handles authentication, MFA, and stores offline user tokens or IDs.
Platform Module → Contains all reusable SDKs, services, DB schema, APIs, and utilities accessible by other micro apps.

Remote (Federated) Bundles

Fetched and loaded dynamically at runtime:

Dashboard, MicroApp1, MicroApp2, MicroApp3, etc.

Each remote bundle can be versioned and updated independently — no full app store deployment required.

🔩 Setting Up Module Federation with Re.Pack

1. Host (Shell) Configuration

// host/webpack.config.js
const { withRepack } = require('@callstack/repack');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = withRepack({
  name: 'host',
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        authApp: 'authApp',
        platform: 'platform',
        dashboard: 'dashboard',
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-native': { singleton: true, eager: true },
      },
    }),
  ],
});

2. Remote Micro App Configuration

Each micro app exposes its entry point:

// microApp1/webpack.config.js
const { withRepack } = require('@callstack/repack');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = withRepack({
  name: 'microApp1',
  exposes: {
    './Entry': './src/Entry',
  },
  shared: {
    react: { singleton: true },
    'react-native': { singleton: true },
  },
});

🌐 Dynamic Federation Setup (Host Side)

Registering the Federation Resolver

// host/src/federationSetup.js
import { Federated, ScriptManager } from '@callstack/repack/client';
import AsyncStorage from '@react-native-async-storage/async-storage';
import RNFetchBlob from 'rn-fetch-blob';

export async function initFederation() {
  // Step 1: Fetch remote configuration from CDN
  const remoteConfig = await fetch('https://cdn.example.com/superapp/config.json').then(r => r.json());

  // Step 2: Cache remote bundles for offline usage
  for (const [name, app] of Object.entries(remoteConfig.microApps)) {
    const path = `${RNFetchBlob.fs.dirs.DocumentDir}/${name}.bundle`;
    const exists = await RNFetchBlob.fs.exists(path);

    if (!exists) {
      const data = await fetch(app.url).then(r => r.text());
      await RNFetchBlob.fs.writeFile(path, data, 'utf8');
    }

    // Save local mapping
    app.localPath = path;
  }

  // Step 3: Persist config
  await AsyncStorage.setItem('remoteConfig', JSON.stringify(remoteConfig));

  // Step 4: Register resolver for both online/offline cases
  const resolver = Federated.createURLResolver(name => {
    const config = remoteConfig.microApps[name];
    return config?.localPath || config?.url;
  });

  ScriptManager.addResolver(resolver);
}

🧠 Auth App — Federated Authentication & Offline Login

Federated Exposure

// authApp/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'authApp',
      exposes: {
        './AuthModule': './src/AuthModule',
      },
      shared: ['react', 'react-native'],
    }),
  ],
};

Offline-Aware Auth Module

// authApp/src/AuthModule.js
import AsyncStorage from '@react-native-async-storage/async-storage';

export async function loginUser(username, password) {
  try {
    const token = await authenticateOnline(username, password);
    await AsyncStorage.setItem('userToken', token);
    return { status: 'online', token };
  } catch (e) {
    // Fallback to offline mode if token exists
    const cachedToken = await AsyncStorage.getItem('userToken');
    if (cachedToken) return { status: 'offline', token: cachedToken };
    throw new Error('Offline and no cached credentials');
  }
}

The Auth App can be used by the Host or any MicroApp via federation import:

const { loginUser } = await Federated.importModule({
  scope: 'authApp',
  module: './AuthModule',
});

🧩 Platform Module — Shared Services & SDKs

The Platform Module acts as a shared layer between micro apps and the host — containing reusable pieces like:

Database (Realm / SQLite)
Shared hooks and API clients
Theme, constants, and feature flags
Utility SDKs (network, analytics, etc.)

It’s federated like any other app but bundled with the host to ensure availability.

// platform/src/api/index.js
export const fetchWithAuth = async (url, options = {}) => {
  const token = await AsyncStorage.getItem('userToken');
  return fetch(url, { ...options, headers: { Authorization: `Bearer ${token}` } });
};

Then imported dynamically in any micro app:

const { fetchWithAuth } = await Federated.importModule({
  scope: 'platform',
  module: './api/index',
});

📱 Loading a Remote Micro App (e.g. Dashboard)

// host/src/loadMicroApp.js
import React from 'react';
import { Federated } from '@callstack/repack/client';

export async function loadMicroApp(name) {
  const mod = await Federated.importModule({
    scope: name,
    module: './Entry',
  });
  return mod.default;
}

// usage
const Dashboard = React.lazy(() => loadMicroApp('dashboard'));

🧭 Example Use Cases

Use Case	Module	Description
User login & offline access	Auth App	Authenticates online; caches token locally for offline use
Shared DB / APIs	Platform	Provides shared database layer and network SDKs
Feature dashboards	Remote (Dashboard)	Fetched dynamically, can be updated independently
Offline app launch	Host	Prefetches and loads cached bundles using `Federated.createURLResolver`
Hot updates	Host + CDN	Fetches updated remote bundles and refreshes federation config

🔄 Offline Lifecycle Summary

On app start, Host fetches remote config → caches bundles.
On next launch (offline):

Host loads bundles from local filesystem.
Auth module validates cached ID/token.
Micro apps mount normally using local bundles.
1. On reconnect:
Host syncs new config and updates local caches.

✅ Advantages of This Architecture

Independent deployments: each micro app is independently deployable & versioned.
Reduced release risk: update micro apps without touching host binary.
Offline-first: all modules can operate offline with cached bundles.
Federated authentication: common login/token logic shared across micro apps.
Code reusability: platform module enables shared SDKs across all apps.
Better scalability: multiple teams can work on different modules without collisions.

Developer Experience

Independent bundles: Teams owned their modules → faster parallel development.
Easy onboarding: Devs could run only their bundle locally.
Debugging tools: With Repack’s dev server, we could inspect bundles and hot-reload features independently.

Lessons Learned

Keep the base shell app minimal — just infra, no business logic.
Offline mode must be designed from the start (syncing is hard to retrofit).
Bundle versioning is non-negotiable — always know what version the user is running.
Minimize cross-bundle dependencies → treat modules like micro frontends.

🚀 Conclusion

This architecture brings the flexibility of web micro-frontends to React Native, powered by Re.Pack’s Module Federation.

By combining:

a Host for bundle management + offline logic,
an Auth app for federated login and offline identity,
a Platform module for shared services,
and remote micro apps fetched dynamically,

…we achieve a scalable, modular super app architecture — production-ready, OTA updatable, and optimized for offline environments.

If you’re planning to build a super app, start small: get your shell + bundle loader right, plan for offline, and keep your modules decoupled. Everything else will follow.

Implementing Long Press Functionality Using React Native Gesture Handler in React Native Application

MAYANK TYAGI — Mon, 07 Oct 2024 06:18:53 +0000

You can implement long press functionality using libraries like React Native Gesture Handler to detect the long press gesture. This library provides more advanced and reliable gesture-handling capabilities compared to the standard React Native onLongPress event.

Here's how you can implement the long press functionality to display microfrontend version and other app info:

Step 1: Install React Native Gesture Handler

First, if you haven't already installed the react-native-gesture-handler package, install it:

npm install react-native-gesture-handler

Make sure to link it with your project if you're using React Native CLI:

npx react-native link react-native-gesture-handler

Step 2: Set Up Gesture Handler

After installation, wrap your app with GestureHandlerRootView in your entry point (usually index.js or App.js).

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { App } from './App';

export default function Main() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <App />
    </GestureHandlerRootView>
  );
}

Step 3: Implement Long Press in Your Custom Header

Now, in your custom header, use the LongPressGestureHandler to detect the long press event. You can then display a modal or a custom view showing the microfrontend version and other app info.

Here’s an example of how you could implement this:

import React, { useState } from 'react';
import { Text, View, Modal, StyleSheet } from 'react-native';
import { LongPressGestureHandler, State } from 'react-native-gesture-handler';

const CustomHeader = ({ microfrontendVersion, appInfo }) => {
  const [isModalVisible, setModalVisible] = useState(false);

  const onLongPress = (event) => {
    if (event.nativeEvent.state === State.ACTIVE) {
      // Show the modal with app info when long press is detected
      setModalVisible(true);
    }
  };

  return (
    <View>
      {/* LongPressGestureHandler wraps the part of the UI where long press is to be detected */}
      <LongPressGestureHandler onHandlerStateChange={onLongPress} minDurationMs={800}>
        <View style={styles.header}>
          <Text style={styles.headerTitle}>My Custom Header</Text>
        </View>
      </LongPressGestureHandler>

      {/* Modal to show the version and app info */}
      <Modal
        transparent={true}
        visible={isModalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalContent}>
            <Text>Microfrontend Version: {microfrontendVersion}</Text>
            <Text>App Info: {appInfo}</Text>
            <Text onPress={() => setModalVisible(false)} style={styles.closeButton}>Close</Text>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    padding: 16,
    backgroundColor: '#6200EE',
  },
  headerTitle: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
  },
  closeButton: {
    marginTop: 10,
    color: 'blue',
    textAlign: 'center',
  },
});

export default CustomHeader;

Explanation:

LongPressGestureHandler: Wrap the header or any component where you want to detect a long press.
- minDurationMs={800}: This defines how long the user needs to press to trigger the long press event.
- onHandlerStateChange: This method is triggered when the gesture's state changes.
- Inside onLongPress, we check if the gesture is in the ACTIVE state to determine if the long press was successful, and then trigger the modal to show the information.
Modal: This is used to display the microfrontend version and other app info when the long press event is triggered.

This method efficiently detects long presses and displays the required information about the microfrontend and app details.

The Ultimate Beginner's Guide to Learning React: A Comprehensive Roadmap

MAYANK TYAGI — Sat, 03 Feb 2024 07:26:05 +0000

🚀Welcome to the exciting world of React! Whether you're dreaming of building web applications or crafting mobile apps, this roadmap will guide you through the essential steps to become a proficient React developer.🚀 Let's break it down:

🔍Step 1: HTML Basics

Begin your journey by understanding the foundation of web development - HTML. Explore key topics such as:

Tags and Elements: Grasp the basic structure of HTML tags and elements.
Document Structure: Learn how to create a well-organized HTML document.

🎨Step 2: CSS Mastery

With HTML under your belt, it's time to style your creations using CSS. Delve into:

Selectors: Understand how to target HTML elements for styling.
Flexbox and Grid Layout: Master layout techniques for responsive design.

🚀Step 3: JavaScript Fundamentals

Solidify your understanding of JavaScript, the language that powers the web. Focus on:

ES6 Features: Explore modern JavaScript syntax and features.
Async Functions: Grasp asynchronous programming for handling promises.
Variables and Scope: Understand variable declaration and scope in JavaScript.

💡Step 4: Choose Your Domain

Now, it's decision time. Depending on your interests, choose between React JS for web development or React Native for mobile app development.

🌐React JS (Web Development)

Dive into the core concepts of React JS:

Components: Learn to create reusable UI components.
State and Props: Understand how to manage and pass data between components.
Hooks: Explore the power of hooks for functional components.

📱React Native (Mobile App Development)

If mobile app development is your calling, explore React Native:

Components: Understand the building blocks of React Native apps.
Navigation: Learn how to navigate between screens.
API Integration: Explore integrating APIs for dynamic mobile applications.

📚Step 5: Enhance Your UI

Now that you've got the basics down, it's time to enhance your user interfaces. Consider these tools:

Tailwind CSS for React JS:
- Installation: Integrate Tailwind into your React project.
- Utility Classes: Explore the power of utility-first CSS.
Native Base for React Native:
- Setup: Get started with Native Base in your React Native project.
- Component Library: Leverage pre-designed components for a seamless UI.

Now, you're on the path to mastering React. Well, not really - this can only help you get started. Only with continuous learning and hands-on projects can you become a true master of React.
Ready to Build Amazing Things?

Congratulations! You've completed the roadmap to becoming a React developer. Now, the real adventure begins as you apply your knowledge to create stunning web or mobile applications.

Follow along for more in-depth tutorials, tips, and real-world projects.

If you find this helpful and want to support💲 Buy Me Coffee ☕

Happy coding!
🚀💻 #ReactJS #ReactNative #WebDevelopment #ProgrammingGuide

Understanding `useEffect` and Dependency Array in React Hooks

MAYANK TYAGI — Sat, 27 Jan 2024 07:47:43 +0000

In previous post I shared about the different lifecycle methods in class components and show their equivalent usage with the useEffect hook in functional components, You can check that here.

React Hooks, especially useEffect, play a crucial role in managing side effects and handling component lifecycles. In this post, we'll delve into the useEffect hook and explore the significance of the dependency array.

The Basics:

So, in React, we've got this thing called useEffect. It's like the superhero tool for doing extra stuff in your functional components – you know, fetching data, keeping an eye on things, or tweaking the DOM. But, to be a pro at it, you gotta get cozy with the dependency array.

That's it. useEffect is your go-to buddy for making your components do more than just rendering. And the dependency array? Well, that's the secret sauce for making sure everything happens at the right time. Easy peasy, right? 🚀👩‍💻👨‍💻

`useEffect` Syntax:

useEffect(() => {
  // Your code for side effects goes here
}, [/* Dependency Array */]);

Exploring `useEffect`:

1. Empty Dependency Array::

useEffect(() => {
  // Runs after every render
  // No dependencies, equivalent to componentDidMount
}, []);

Use Case:
- When you want to perform an action after the initial render and only once, simulating componentDidMount. This effect won't run again on subsequent renders.

2. Non-Empty Dependency Array:

const [data, setData] = useState([]);

useEffect(() => {
  // Runs only when 'data' changes
  // Prevents unnecessary re-execution/re-renders
}, [data]);

Use Case:
- When you want the effect to run based on the changes in specific variables or state.

3. Without a Dependency Array:

useEffect(() => {
  // Runs after the initial render and every update
  // No dependencies, equivalent to componentDidMount and componentDidUpdate
});

Use Case:
- So, when should you use an empty dependency array in useEffect? Well, it's kind of like a special move in React, useful in specific situations. Check this out:

When to Use:

Not Everyday Stuff:
- Only pull out this trick when you really need it – like, rare situations. It's not your everyday solution.

Keep an Eye Out:

Stay Sharp:
- Be watchful for possible hiccups. When you're dealing with state changes, be careful not to accidentally cause issues.

Using an empty dependency array can be handy, but don't go overboard. Use it wisely, considering how it might affect your app's speed, potential bugs, and how it manages resources. Find that sweet spot between making things happen and keeping your React components running smoothly.

Why It Matters:

Performance:
- Specifying dependencies ensures the effect runs only when needed, preventing unnecessary re-execution.
Avoiding Bugs:
- Incorrect or missing dependencies can lead to subtle bugs, like stale closures or infinite loops.

Conclusion:

Understanding the useEffect hook and its dependency array is fundamental for writing efficient and bug-free React components. Whether you're a beginner or an experienced developer, mastering these concepts will contribute to your journey of building robust React applications. Happy coding! 🚀👩‍💻👨‍💻 #React #Hooks #ProgrammingTips #WebDevelopment #JavaScript

Thanks for reading.

“Don’t miss out” Follow my Social handles👉

Subscribe to my YouTube channel😊

Instagram 😊 || Twitter 😊

If you find this helpful and want to support💲 Buy Me Coffee ☕

🔄 Class Components vs Functional Components: A Lifecycle Journey in React 🔄

MAYANK TYAGI — Fri, 26 Jan 2024 10:40:41 +0000

If you're starting with React in 2024, you'll likely notice that most tutorials and blogs prefer using functional components over class components. The reason is that functional components, especially with the useEffect hook, offer simpler code organization.

However, it's essential to know about class components too. In the real world, many projects still use class components, gradually shifting towards functional components. To become a solid React developer, you should understand both.

This article will walk you through the different lifecycle methods in class components and show their equivalent usage with the useEffect hook in functional components. Learning both approaches will make you more versatile and ready for various React projects.

Lifecycle Methods in Class Components:

1. `componentDidMount`:

   componentDidMount() {
     // Executes after the component is inserted into the DOM
     // Ideal for initial data fetching or subscriptions
   }

2. `componentDidUpdate`:

   componentDidUpdate(prevProps, prevState) {
     // Executes after a component's update causes a re-render
     // Good for reacting to prop or state changes
   }

3. `componentWillUnmount`:

   componentWillUnmount() {
     // Executes just before the component is removed from the DOM
     // Useful for cleaning up resources like subscriptions
   }

Lifecycle Methods in Functional Components with useEffect:

1. `useEffect` with Empty Dependency Array:

   useEffect(() => {
     // Similar to componentDidMount
   }, []);

2. `useEffect` with Dependency Array:

   useEffect(() => {
     // Similar to componentDidUpdate
   }, [dependency]);

3. Cleanup with useEffect:

   useEffect(() => {
     return () => {
       // Similar to componentWillUnmount
     };
   }, []);

   // Or, using the same effect with dependency:
   useEffect(() => {
     // Effect code

     return () => {
       // Cleanup code
     };
   }, [dependency]);

Why Does This Matter?

Clear and Simple:
- Functional components with hooks make managing lifecycles straightforward and easy to understand.
Easy Organization:
- Lifecycles are neatly spread across different useEffect hooks, making your code organized and readable.
No More this:
- You don't need to deal with this in functional components, making your code less prone to bugs and more concise.
Consistent Approach:
- useEffect handles various lifecycle scenarios consistently, offering a reliable way to manage side effects in functional components.

In a Nutshell:

As React grows, the shift from class components to functional components with hooks becomes more evident. This transition provides a simpler and more expressive way to handle component lifecycles. So, jump into the world of hooks, and enjoy writing cleaner and more maintainable React code! 🚀🧹 #React #Hooks #FunctionalComponents #WebDevelopment #JavaScript

Thanks for reading.

“Don’t miss out” Follow my Social handles👉

Subscribe to my YouTube channel😊

Instagram 😊 || Twitter 😊

If you find this helpful and want to support💲 Buy Me Coffee ☕

“JavaScript for Beginners: 5 Common Mistakes to Avoid When Starting Your Development Journey”

MAYANK TYAGI — Sun, 19 Mar 2023 14:25:27 +0000

JavaScript is one of the most widely used programming languages and is essential for developing web applications. However, it can be challenging to learn, especially for beginners. In this blog post, we’ll discuss 5 common mistakes to avoid when learning JavaScript.

Not understanding the basics Many beginners make the mistake of jumping straight into complex topics without first understanding the basics. It’s important to have a strong foundation in the basics of JavaScript, such as variables, data types, operators, and control structures. Without this knowledge, it will be difficult to understand more advanced topics.
Not practicing enough Like any skill, the only way to truly master JavaScript is through practice. Many beginners make the mistake of only reading about JavaScript without actually practicing writing code. To avoid this mistake, set aside time each day to write code and work on projects.
Not using a debugger Debugging is an essential part of programming, but many beginners don’t take advantage of debuggers when learning JavaScript. Debuggers help you find and fix errors in your code and can save you a lot of time and frustration. Make sure to use a debugger, such as the one built into your browser’s developer tools.
Relying too much on libraries and frameworks JavaScript has a wide variety of libraries and frameworks that can help you develop applications more quickly. However, many beginners make the mistake of relying too heavily on these tools without first understanding how they work. It’s important to learn the fundamentals of JavaScript before using libraries and frameworks.
Not seeking help Learning JavaScript can be challenging, and it’s important to seek help when you need it. Many beginners make the mistake of trying to solve problems on their own without seeking help from more experienced developers. Don’t be afraid to ask for help on forums or from a mentor.

By avoiding these common mistakes, you can learn JavaScript more effectively and become a proficient developer.

Thanks for reading.

“Don’t miss out” Follow my Social handles👉

Subscribe to my YouTube channel😊

Instagram 😊 || Twitter 😊

If you find this helpful and want to support💲 Buy Me Coffee ☕

Best VSCode Extension to Make Your Coding Experience Amazing in 2023

MAYANK TYAGI — Wed, 11 Jan 2023 09:15:51 +0000

6 VS code extensions that you need to install right now if you want to improve your productivity

GitLens supercharges provides Git capabilities inside your VSCode. It gives you details of any git changes, author, and time of the changes at a glance. That means while coding you can see git information right next to the code. These actions include staging changes, committing changes, pushing commits, and much more. You really wouldn’t need the Git CLI with this extension. Also, you can easily navigate and revise the git history (backward and forwards) of any file.

This is one of my favorite extensions. you can view a Git Graph of your repository, and easily perform Git actions (available by right-clicking on a commit/branch/tag):
Create, Checkout, Delete, Fetch, Merge, Pull, Push, Rebase, Rename & Reset Branches
Add, Delete & Push Tags
Checkout, Cherry Pick, Drop, Merge & Revert Commits
Clean, Reset & Stash Uncommitted Changes
from the graph. Configurable to look the way you want!

Oftentimes the format of our code can quickly be messed up: we wrongly indent our JavaScript code, we write beyond 80 characters per line, and so on. All these can make our code look really ugly and hard to read, which means hard to maintain.

But, this is where Prettier comes in, it formats our code to look good and readable. This formatting includes rightly indenting our code, breaking the code down if too long, being consistent with adding semicolons or not and so much more.

You can easily run prettier right inside VSCode. ESLint and Prettier can perfectly work together to help give your team a JavaScript style guide to be consistent with, very useful for maintainability.

REST Client allows you to make and manage HTTP requests. You can also view the response directly in your editor.

All HTTP requests (GET, POST, DELETE, PUT, etc) are supported with this extension. So, you can make any requests without any limitations. Then, responses from your requests can be easily saved to your local disk if needed.

It also supports GraphQL as well as authentication. It is a great replacement for Postman and Insomnia. And, it works right in VSCode, so no need to navigate between two apps.

This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the activity bar. The view can be dragged out of the activity bar into the explorer pane (or anywhere else you would prefer it to be).

Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.

Found TODOs can also be highlighted in open files.

This is a great time-saver for any JavaScript developer. You can get all of the code you need in one place, without having to type it out again and again!

This also includes TypeScript/React/Redux/React Native/ checked codes as well so your projects stay up-to-date with the latest technologies.

Thanks for reading.

“Don’t miss out” Follow my Social handles👉

Subscribe to my YouTube channel😊

Instagram 😊 || Twitter 😊

If you find this helpful and want to support💲 Buy Me Coffee ☕

Hoisting & temporal dead zone In JavaScript

MAYANK TYAGI — Sat, 16 Apr 2022 13:32:57 +0000

In JS hoisting refers to the process in which interpreter moves the variable, function or classes deceleration to the top of their scope(to know more about scope refer to the video ) prior to the execution of the code.

First let’s see some examples to understand the concept of hoisting

var name;
console.log(name); //Returns 'undefined' from hoisted var declaration
name="mayank"

console.log(num); // Returns 'undefined' from hoisted var declaration (not 10)
var num = 10; // Initialization and declaration.
console.log(num); // Returns 10 after the line with initialization is executed.

fun();

function fun(){
  console.log("Hello from the fun");  // Returns Hello from the fun
}

Now we have seen the few examples and on the basis of those examples let’s understand the concept of hoisting. but first what actually hoisting means.

Moving to the top doesn’t mean it literally move the variables/functions to the top of the scope it’s just the basic understanding but it’s not actually right

actually the execution context plays the role in here, when execution context begins it has two phases creation phase & execution phase.

In creation phase memory allocation takes place for the variables and if the variable is declared with var keywork then a special value undefined is assigned to it.

and then execution happens in execution phase and it just simply print the value.

💡 JavaScript only hoists declarations, not initializations!

now let’s go back to examples and try to understand the hoisting in case of variable declarations.

console.log(num); // Returns 'undefined' from hoisted var declaration (not 10)
var num = 10; // Initialization and declaration.
console.log(num); // Returns 10 after the line with initialization is executed.

in this case as soon as the execution context got created first the variable num get allocated in memory and initialized with special value undefined.

and then begins the execution when first line got executed the value is undefined then num got initialized with value 10 in second line and in 3rd line it prints value 10. so now you got how it’s working in case of variables declared with var keyword one thing to keep in mind, it doesn’t work in same way for let and const that we will see in later part of this video.

Now let’s understand function hoisting. It’s kind of same as in case of variables.

as the execution context start the creation phase put the function declaration into the memory and the execution phase do its work of executing the function.

Let’s see this with the help of an example as well

fun();
function fun(){
  console.log("Hello from the fun");  // Returns Hello from the fun
}

so in this example The execution context creates the memory for the function and puts the entire function declaration of fun in it.

and the execution phase executes the function

Putting the entire function declaration ahead into the memory at the creation phase is called Function Hoisting.

fun();

var fun = function() {
  console.log("Hello from the fun");  
}

//returns error: Uncaught TypeError: fun is not a function

But why we are getting error in this code🤷‍♂️ for this the reason is the here the function is not being hoisted instead it is assigned to a variable and that variable is being hoisted and when a variable got hoisted, in that case variable name moves to the top of the current scope — not the assignment, which is totally different in case of function hoisting as When a function declaration is hoisted, the whole function body is moved to the top of the current scope, so in this case fun is being treated as variable declared with var and before execution of line 2 & 3 fun is equal to undefined that’s why we are getting this error fun is not a function as we are trying to invoke a variable which is not a function

there is a reason for this and that is JavaScript only hoists declarations, not initializations!

before ending this video let’s see how variable hoisting with let and const differs from variable declared with var keyword. let and const variables are also get hoisted but unlike var there is no default initialization value.

a reference error will be thrown if the variable declared with let and const is read before it’s initialization.

let’s see this with an example.

console.log(num); // error: Uncaught ReferenceError: Cannot access 'num' before initialization
let num = 10; // Initialization and declaration.

console.log(num); // error: Uncaught ReferenceError: Cannot access 'num' before initialization
const num = 10; // Initialization and declaration.

there is one small concept known as Temporal Dead Zone let’s understand that as well here only

The Temporal Dead Zone is a behavior in JavaScript that occurs when declaring a variable with the let and const keywords, but not with var. In ECMAScript 6, accessing a let or const variable before its declaration (within its scope) causes a ReferenceError. The time span when that happens, between the creation of a variable’s binding and its declaration, is called the temporal dead zone.

Thanks for reading.

"Don't miss out" Follow my Social handles👉
Subscribe my YouTube channel😊
Instagram😊 || Twitter😊

If you find this helpful and want to support💲 Buy Me Coffee☕

All you need to know about var, let & const in JavaScript

MAYANK TYAGI — Fri, 20 Aug 2021 06:56:26 +0000

In JavaScript a variable can be defined using the keywords var, let, or const.

Before we can understand how var, let, and const differ, we need to understand a computer science-y concept called scope.
Scope essentially means where these variables are available for use.

Global Scope

Variables declared Globally (outside any function) have Global Scope.
Global variables can be accessed from anywhere in a JavaScript program.

Function Scope

Variables declared Locally (inside a function) have Function Scope.
Local variables can only be accessed from inside the function where they are declared.

Block Scope

A block of code is the code between curly braces in JavaScript.
Variables declared inside a block {} have block scope.

Variables declared with the var keyword cannot have Block Scope.

var

var declarations are globally scoped or function/locally scoped.
The scope is global when a var variable is declared outside a function.
var is function scoped when it is declared within a function.

variables declared with var keyword can be re-declared like this

or their value can be updated like this

let

let is now preferred for variable declaration. It's no surprise as it comes as an improvement to var declarations. It also solves the problem with var. Let's consider why this is so.
let is block-scoped, so a variable declared in a block with let is only available for use within that block.

variables declared with let keyword cannot be re-declared it will throw error like this

let variables can be updated within its scope like this

const

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.
Like let declarations, const declarations can only be accessed within the block they were declared.

But variable declared with const can neither be re-declared nor re-assigned

Thanks for reading.

"Don't miss out" Follow my Social handles👉
Subscribe my YouTube channel😊
Instagram😊 || Twitter😊

If you find this helpful and want to support💲 Buy Me Coffee☕

All you need to know about arrays in JavaScript

MAYANK TYAGI — Sat, 31 Jul 2021 15:16:25 +0000

Arrays in JavaScript

In JavaScript, arrays are used to store multiple values or you can think of an array as an ordered list of values (more specific elements).

Unlike Java or C++ in JavaScript, an array can store values of different data types and you also don't need to specify the size of array while declaring it as it can grow automatically as per requirement or you can say length of array is dynamically sized and auto-growing.

let array=[1,"Java", 2,"CPP", 3,"JS", 3.5,"HTML"];
console.log(array);

// Output [1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"]

In JavaScript arrays are special type of objects, but let's not worry about that much and treat it as normal array for now

let array=[1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"];
console.log(typeof(arrayObj));

// Output "object"

Ways of creating an array in JavaScript

In JavaScript, you can create arrays in two ways, one via JavaScript keyword i.e., Array Constructor and the another way is via array literals(Easiest and most preferred way)

1. Creating array via Array Constructor:

let arrayObj = new Array(1,2,3,4,"Red");
console.log(arrayObj);

// Output [1, 2, 3, 4, "Red"]

2. The preferred way to create an array is to use the array literal notation:

let array=[1,"Java",2,"CPP",3,"JS",3.5,"HTML"];

console.log(array);

// Output [1, "Java", 2, "CPP", 3, "JS", 3.5, "HTML"]

Accessing the array elements

In JavaScript, arrays are zero-indexed which means the first element of an array is at index 0, and the last element is at the index value of arrays length minus 1.

let array=[1,"Java",2,"CPP",3,"JS",3.5,"HTML"];

// length of array = 8

console.log(array[0]);    //Output  1
console.log(array[2]);    //Output  2
console.log(array[3]);    //Output  "CPP"
console.log(array[6]);    //Output  3.5
console.log(array[7]);    //Output  "HTML"
console.log(array[8]);    //Output  undefined

Length property of Array

The length property sets or returns the number of elements in an array

let cities=["Delhi", "Mumbai", "Los Angeles", "London", "New York", "Tokyo", "Mexico City"];
console.log("Length of cities Array is "+cities.length);
// Output "Length of cities Array is 7"

let countryCode=["001", "002", "003", "004", "005", "006"];
countryCode.length=3;
console.log("Length of countryCode Array is "+countryCode.length);

// Output "Length of countryCode Array is 3"

console.log("CountryCode Array after setting size to 3",countryCode)

// Output "CountryCode Array after setting size to 3",  ["001", "002", "003"]

Let's learn some important methods of array in JavaScript

1. push()

The push() method adds new elements to the end of an array.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.push("New York");
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "New York"]

2. pop()

The pop() method removes the last element of an array, and returns that element.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.pop());

//Output "London"

console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles"]

3. concat()

The concat() method is used to join two or more arrays.
This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

let cities1=["Delhi", "Mumbai", "Los Angeles", "London"];
let cities2=["Pune", "Kolkata", "Moscow"];
let cities=cities1.concat(cities2);
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "Pune", "Kolkata", "Moscow"]

4. slice()

The slice() method takes two arguments as starting index and ending index and returns the new array object selecting the elements from starting index to ending index(excluding end index).
Syntax
slice(startIndex,endIndex)

let cities=["Delhi", "Mumbai", "Los Angeles", "London", "Pune"];
let silceCities=cities.slice(1,4);

console.log(silceCities);

//Output ["Mumbai", "Los Angeles", "London"]

5. splice()

The splice() method adds/removes items to/from an array,
and returns the removed item(s).
Syntax
splice(start) splice(start, deleteCount) splice(start, deleteCount, item1....)

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];

console.log(cities.splice(1,2));

//Output ["Mumbai", "Los Angeles"]

console.log(cities);

//Output ["Delhi", "London"]

cities.splice(1,0,"Mumbai", "Los Angeles", "London")
console.log(cities);

//Output ["Delhi", "Mumbai", "Los Angeles", "London", "London"]

6. toString()

The toString() method returns a string with all the array values, separated by commas.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.toString());

//Output "Delhi,Mumbai,Los Angeles,London"

7. sort()

The sort() method sorts the items of an array.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.sort();
console.log(cities);

//Output ["Delhi", "London", "Los Angeles", "Mumbai"]

8. reverse()

The reverse() method reverses the order of the elements in an array.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.reverse();
console.log(cities);

//Output ["London", "Los Angeles", "Mumbai", "Delhi"]

9. indexOf()

The indexOf() method searches the array for the specified element, and returns its position.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let pos=cities.indexOf("London");
console.log(pos);

//Output 3

Similar to indexOf() there is another method lastIndexOf() as the name suggest, it returns the index of last occurence of the element in an array.

10. isArray()

The isArray() method determines whether an object is an array. This returns true if the object is an array, and false if not.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let res=Array.isArray(cities);
console.log(res);

//Output true

11. includes()

he includes() method determines whether an array contains a specified element.
Syntax
includes(searchElement) includes(searchElement, fromIndex)

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let res1=cities.includes("Mumbai");
console.log(res1);
//Output true

let res2=cities.includes("Mumbai",2);
console.log(res2);

//Output false

12. join()

The join() method takes single argument and convert all the array elements into a string and return the converted string.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
console.log(cities.join(" - "));

//Output "Delhi - Mumbai - Los Angeles - London"

13. shift()

The shift() method removes the first item of an array.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.shift();
console.log(cities);

//Output ["Mumbai", "Los Angeles", "London"]

14. unshift()

The unshift() method adds new items to the beginning of an array, and returns the new length.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.unshift("New York","Tokyo");
console.log(cities);

//Output ["New York", "Tokyo", "Delhi", "Mumbai", "Los Angeles", "London"]

15. fill()

The fill() method fills the specified elements in an array with a static value. You can specify the position of where to start and end the filling. If not specified, all elements will be filled.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
cities.fill("Delhi");
console.log(cities);

//Output ["Delhi", "Delhi", "Delhi", "Delhi"]

16. find()

The find() method returns the value of the first element in an array that pass a test (provided as a function).

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>=6;
}
console.log(cities.find(city));

//Output "Mumbai"

17. findIndex()

The findIndex() method returns the index of the first element in an array that pass a test (provided as a function).

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>=6;
}
console.log(cities.findIndex(city));

//Output 1

18. forEach()

The forEach() method calls a function once for each element in an array, in order.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c,idx,arr)=>{
arr[idx]= c + " is a beautiful city";
}

cities.forEach(city);
console.log(cities);

//Output ["Delhi is a beautiful city", "Mumbai is a beautiful city", "Los Angeles is a beautiful city", "London is a beautiful city"]

19. map()

The map() method creates a new array with the results of calling a function for every array element.

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=cities.map((c)=>{
return c + " is a beautiful city";
})

console.log(city);

//Output ["Delhi is a beautiful city", "Mumbai is a beautiful city", "Los Angeles is a beautiful city", "London is a beautiful city"]

20. filter()

The filter() method creates an array filled with all array elements that pass a test (provided as a function).

let cities=["Delhi", "Mumbai", "Los Angeles", "London"];
let city=(c)=>{
return c.length>6;
}
console.log(cities.filter(city));


//Output ["Los Angeles"]

Thanks for reading.

"Don't miss out" Follow my Social handles👉
Subscribe my YouTube channel😊
Instagram😊 || Twitter😊

If you find this helpful and want to support💲 Buy Me Coffee☕

DEV Community: MAYANK TYAGI

Building a Scalable React Native Super App with Re.Pack & Module Federation

Building a Super App with React Native: Lessons Learned

Why React Native for a Super App?

Offline Mode: Prefetch and Launch Strategy

🏗️ High-Level Architecture

⚙️ Bundling Strategy

Bundled Inside the APK/IPA

Remote (Federated) Bundles

🔩 Setting Up Module Federation with Re.Pack

1. Host (Shell) Configuration

2. Remote Micro App Configuration

🌐 Dynamic Federation Setup (Host Side)

Registering the Federation Resolver

🧠 Auth App — Federated Authentication & Offline Login

Federated Exposure

Offline-Aware Auth Module

🧩 Platform Module — Shared Services & SDKs

📱 Loading a Remote Micro App (e.g. Dashboard)

🧭 Example Use Cases

🔄 Offline Lifecycle Summary

✅ Advantages of This Architecture

Developer Experience

Lessons Learned

🚀 Conclusion

Implementing Long Press Functionality Using React Native Gesture Handler in React Native Application

Step 1: Install React Native Gesture Handler

Step 2: Set Up Gesture Handler

Step 3: Implement Long Press in Your Custom Header

Explanation:

The Ultimate Beginner's Guide to Learning React: A Comprehensive Roadmap

🔍Step 1: HTML Basics

🎨Step 2: CSS Mastery

🚀Step 3: JavaScript Fundamentals

💡Step 4: Choose Your Domain

🌐React JS (Web Development)

📱React Native (Mobile App Development)

📚Step 5: Enhance Your UI

Understanding `useEffect` and Dependency Array in React Hooks

The Basics:

useEffect Syntax:

Exploring useEffect:

1. Empty Dependency Array::

2. Non-Empty Dependency Array:

3. Without a Dependency Array:

When to Use:

Keep an Eye Out:

Why It Matters:

Conclusion:

🔄 Class Components vs Functional Components: A Lifecycle Journey in React 🔄

Lifecycle Methods in Class Components:

1. componentDidMount:

2. componentDidUpdate:

3. componentWillUnmount:

Lifecycle Methods in Functional Components with useEffect:

1. useEffect with Empty Dependency Array:

2. useEffect with Dependency Array:

3. Cleanup with useEffect:

Why Does This Matter?

In a Nutshell:

“JavaScript for Beginners: 5 Common Mistakes to Avoid When Starting Your Development Journey”

Best VSCode Extension to Make Your Coding Experience Amazing in 2023

Hoisting & temporal dead zone In JavaScript

All you need to know about var, let & const in JavaScript

Global Scope

Function Scope

Block Scope

var

let

const

All you need to know about arrays in JavaScript

Arrays in JavaScript

Ways of creating an array in JavaScript

1. Creating array via Array Constructor:

2. The preferred way to create an array is to use the array literal notation:

Accessing the array elements

Length property of Array

Let's learn some important methods of array in JavaScript

1. push()

2. pop()

`useEffect` Syntax:

Exploring `useEffect`:

1. `componentDidMount`:

2. `componentDidUpdate`:

3. `componentWillUnmount`:

1. `useEffect` with Empty Dependency Array:

2. `useEffect` with Dependency Array: