DEV Community: amanbhoria

The chronicles of bind method

amanbhoria — Fri, 17 Oct 2025 15:29:22 +0000

If you know the bind function then it's okay and if you don't know then thank you for not knowing it because that's how you came to this blog. And there's nothing to worry about, I'm here to explain you in the best way possible.

Let's take an example:

Suppose you've an object method inside person object i.e. fullName **and an object i.e **member

const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Aman",
  lastName: "Bhoria",
}

if you want to call the fullName method on the behalf of member object. Here comes the bind method and the syntax as follows:

person.fullName.bind(member);

Bind method will return an function which will be called later. What it does is bind the function to the given object so that function can used that object's properties (if exists)

let result = person.fullName.bind(member);
result (); // Aman Bhoria

Bind method can also be given more than one parameter. The one of course should be the object itself, the rest of them can be the values that we wanna use in the function that is being called.

function fullName (city, country) {
    return this.firstName + " " + this.lastName;
  }

let result = fullName.bind(member, "New Delhi", "India");
result (); // Aman bhoria New Delhi India

You can also give the parameter in the result variable itself

let result = fullName.bind(member);
result("New Delhi", "India"); // Aman bhoria New Delhi India

🎯 Conclusion
As you have learned how the _bind _ method works. Get the f**k out of here and use this method wherever you want to.

Keep building!

Array in JS | JavaScript Series Ep. 1

amanbhoria — Fri, 19 Sep 2025 10:48:02 +0000

Arrays are one of the most fundamental data structures in JavaScript. They let us store multiple values in a single variable and provide powerful methods for working with collections of data.

In this guide, I’ll walk you through the basics of arrays, how to use common methods, and some useful tricks along the way.

⏱️ Table of Contents

What is an Array?
push, pop, shift, unshift
Accessing Array Elements
Iterating Through Arrays
forEach & map in Action
Spread Operator with Arrays
Array Constructor with a Single Value

🎯 Conclusion

Arrays are the backbone of working with collections in JavaScript. From storing simple values to transforming data, they are versatile and powerful. Mastering them will make you a stronger JavaScript developer.

Keep building!

Handling Asynchronous State with User Roles in React Native with Firebase

amanbhoria — Fri, 18 Oct 2024 08:59:39 +0000

In my recent project, I encountered an interesting challenge that I’m sure many of you have faced—fetching data based on user roles in a React Native app.

I’d added user roles (regular, admin) to my app, and as an admin, I needed to fetch all jobs in the system.

The logic to do this was simple—check the logged-in user’s role and fetch data accordingly. But what I didn’t expect was how React’s asynchronous behavior would impact my logic.

Here's the initial code snippet I was working with:

  const [loggedInUser, setLoggedInUser] = 
useState<Partial<User> | null>(null);

const fetchJobs = async () => {
    try {
      let firebaseService = await new FirebaseService();
      let jobsList: Job[] = [];

      if (loggedInUser?.role == UserRoles.ADMIN)
         jobsList = await firebaseService.listAllJobs();
      else 
         jobsList = await firebaseService.listSingleUserJob();

      setJobs(jobsList);
      setFilterJobs(jobsList);
    } catch (error) {
      console.error('Error fetching jobs:', error);
    } finally {
      setRefreshing(false);
      setIsLoading(false);
    }
  };

useEffect(() => {
    const fetchUser = async () => {
      try {
        let user = await returnLoggedUser();
        setLoggedInUser(user);
      } catch (error) {
        console.error('Failed to fetch user', error);
      }
    };

    fetchUser();
  }, []);

  useFocusEffect(
    useCallback(() => {
      if (!hasRun) {
        fetchJobs();
        setHasRun(true);
      }, []
  );

UseFocusEffect runs when the screen gains the focus.

In theory, it made sense. But what I wasn’t ensuring was that loggedInUser would always be defined before I tried to fetch jobs. Because useEffect and useFocusEffect run asynchronously, there was no guarantee that loggedInUser would be set by the time fetchJobs() ran

That's how this react's asynchronous behavior comes into picture.

I needed to ensure that loggedInUser had been set before proceeding with the job-fetching logic.

By adding a check for loggedInUser, I made sure that fetchJobs only runs when the user information is available:

useFocusEffect(
    useCallback(() => {
      if (loggedInUser && !hasRun) {
        fetchJobs();
        setHasRun(true);
      }, [loggedInUser]
  );

Keep Building!

Props and Callbacks in a shell

amanbhoria — Tue, 01 Oct 2024 19:25:30 +0000

In this blog post, I will walk you through a practical scenario where a parent component (ListBox) interacts with a child component (AlertComponent) using props and callbacks.

This is useful in React when you want a child component to communicate back to the parent to maintain state or trigger actions.

Let's understand with the help of this example:

I have a ListBox component that displays a list of items. When the user performs a long press on any item, an alert dialog appears, asking whether the user wants to delete the item or not.

Here’s the interaction breakdown:

ListBox (Parent) renders the items and passes necessary props and callbacks to the AlertComponent (Child).

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState<boolean>(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    <div>
      <div onLongPress={alertAction}>
        <p>Item 1</p>
        {/* Other list items */}
      </div>

      {/* Passing props to the child component */}
      <AlertComponent
        title="Deleting item?"
        description="Click Accept to delete."
        onAccept={() => {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    </div>
  );
};

export default ListBox;

The AlertComponent accepts props like title, description, and callbacks such as onAccept, onCancel, and a state-changing prop showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (<AlertDialog>
... rest of the code
</AlertDialog>)
}

The parent component needs to manage the visibility of the dialog, and the child component interacts with the parent by emitting events through callbacks to toggle this visibility.

showComponent is working as a callback as it's maintaining the state which is responsible to show/hide the AlertComponent

Whenever Reject is pressed, this callback will toggle the current state of showComponent.

<AlertComponent
        title="Deleting item?"
        description="Click Accept to delete."
        onAccept={() => {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

Using props and callbacks in this way allows a clear flow of data between the parent and child components in React.

The parent can control state and pass it down to the child, while the child can communicate back via callbacks to inform the parent of any changes or actions the user has performed.

This is particularly useful for scenarios like showing alerts, modals, or pop-ups in response to user interaction.

Keep building!

Android - Error uploading .aab file to play store

amanbhoria — Tue, 01 Oct 2024 12:38:21 +0000

If you encounter this error, follow these steps to ensure consistency with your package name and signing key:

Make sure the package name in your app.json file matches the one you used when you first uploaded the .aab file.

 "android": {
      "permissions":["CAMERA","READ_EXTERNAL_STORAGE"
,"WRITE_EXTERNAL_STORAGE"],
      "adaptiveIcon": {
        "foregroundImage": "./assets/logo.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.amanbhoria.yourPackageName"
    }

When you upload an .aab file, the Google Play Store associates that package name with your default signing key. Changing the package name can lead to signing key errors.
If you have changed the package name, you have two options:
Reset your SHA-1 key by contacting the Google Play Support team.

a) If you're using Expo developer console, you will find the credentials there
b) You can access and download your credentials using this command:
eas credentials

Revert to the original package name that was used during the initial upload.

Although I've resolved this error but now i have to run the build again just to change the versionCode variable in app.json.

Please refrain from making this mistake XD.

Keep building!

Step up your typescript game with these operators

amanbhoria — Mon, 30 Sep 2024 09:21:26 +0000

Nullish Coalescing Operator (??)

The ?? operator is used to provide a default value when dealing with null or undefined. It checks if the left-hand side is either null or undefined, and if it is, it returns the right-hand side value.

let value = null;
let defaultValue = "DefaultValue";

let result = value ?? defaultValue;
console.log(result); 
// Output: DefaultValue

Safe assignment operator (?=) [Proposed]

The Safe Assignment Operator (?=) is a simple solution for error handling. Instead of wrapping code in complex try/catch blocks, ?= allows you to handle errors directly within assignments, making your code easier to read and manage.

try {
  const result = errorCausingFunction();
  // More logic with result
} catch (error) {
  console.error('An error occurred:', error);
}

Now you can handle this try/catch block in one line

const result ?= errorCausingFunction();

Double Exclamation Mark (!!)

The !! operator is a trick used to convert a value to a boolean (true or false). This is useful when you want to check if a value is truthy or falsy.

Step up your validation game using this operator

let value = ''

// Basic Approach
if (value === null || value === undefined || value === '') {
  console.log("Value is null, undefined, or an empty string");
} 

// Advanced Approach
if(!!value) {
  console.log("Value is null, undefined, or an empty string");
}

Keep building!

Step up your UI Game with Tamagui

amanbhoria — Mon, 16 Sep 2024 05:38:22 +0000

Add the babel plugin

npm install @tamagui/babel-plugin

Add the plugin in metro.config.js file

Add @tamagui/config/v3 and tamagui to your package.json and install them. Then add a tamagui.config.ts:

Then update app/_layout.tsx:

Note: Don't need to import '../tamagui-web.css'

At last, install the expo-fonts as @tamagui uses expo fonts in the background. So you've to install them

Import the useFonts hook and load the fonts:

Note: Add this at the starting point of your application for e.g - App.tsx etc.

Now you're good to go. Keep building!

EAS build reads your .gitignore file

amanbhoria — Fri, 13 Sep 2024 05:21:44 +0000

When building artifacts on EAS, one common issue developers face is accidentally excluding necessary files by adding them to the .gitignore file. Before starting the build process, it’s crucial to double-check that important configuration files—such as app.json, eas.json, or environment variables—are not mistakenly ignored by Git.

To prevent this, thoroughly review your .gitignore file and ensure that any essential project files required for your build aren’t listed there. Ignoring these files can cause your build to fail or miss critical configurations, leading to errors in your production release.

By maintaining a clean and accurate .gitignore, you ensure a smoother EAS build process without unexpected issues.

Keep building!

#2 - Expo apk keeps on crashing after build

amanbhoria — Thu, 12 Sep 2024 18:56:01 +0000

In Production build, this is how you should initialize your environment variables. Regular .env file would not work in production

Client Development build specific:

When using Expo, the EXPO_PUBLIC_ prefix is required to make environment variables available to the app's code. This makes them accessible, but it also means that all prefixed variables are publicly exposed in the JS bundle, so it's crucial to avoid using this method for secrets in production builds.

Production build specific:

Use expoConfig?.extra variables from app.json file

Use Expo's Constants.expoCongif.extra to access your variables

Keep building!

#1 - Expo apk keeps on crashing after build

amanbhoria — Wed, 11 Sep 2024 18:34:03 +0000

If you’ve been working with Expo and React Native for a while, you probably know how smooth development feels—until you try to create an APK. That’s when things can go sideways, like it did for me. After hours of debugging and frustration, I finally uncovered a bizarre issue that was causing my APK build to crash, even though my app was running perfectly on Expo Go.

In this blog, I’ll walk you through what happened, the errors I encountered, and how I ultimately fixed it after months of trying. Hopefully, this saves someone else from going through the same headache as I went through!

The Setup

Everything was working fine while testing the app on Expo Go. My app was using some external libraries like expo-image-picker. The core functionality, including image uploading seemed solid. But as soon as I generated an APK and ran it on a real device, the app would crash immediately after the splash screen.

I've gone through all the workarounds that has been mentioned on web including installing necessary package such as react-native-reanimated. Installing Sentry for debugging and what not.

Then after digging even more, I've found this on reddit:

So I've started using client development build instead of normal build.

I started seeing errors that didn’t make sense at first:

isFileUploadSupported error popping up, something I hadn’t anticipated.
An error saying “no route named ‘index’ exists in nested children”.
These errors were nowhere to be found while testing the app on Expo Go. Weird, right?

The Culprit

After endless debugging, I stumbled upon the issue accidentally. It turns out that a single import in my index.tsx file was causing the crash in the APK build, but not during Expo Go testing:

The Lesson

Expo Go ≠ APK Build: While Expo Go is great for quick testing, it doesn’t always give you a complete picture of what will happen when you build an APK. Some issues, especially with native modules, only surface during the build process.
Watch Your Imports: Even an unused import can mess up your APK build. In my case, the @msg91comm/react-native-sendotp library caused issues with native modules, leading to crashes. Since it was used in other parts of the code but not directly in the **index.tsx **file, it threw me off at first.
Check Native Dependencies: Some libraries rely heavily on native code. Be extra cautious when using such libraries in an Expo project that you plan to build into a standalone APK. Make sure you test them properly on an actual APK build, not just Expo Go.

Conclusion

If you’re struggling with APK builds crashing after working fine in Expo Go, I’d recommend double-checking any imports or external libraries that may have native dependencies. Sometimes, something as trivial as a single import can break your entire APK.

Keep building!

Tired of adding sh*tty looking comments on your code? Try this extension

amanbhoria — Mon, 06 May 2024 09:33:22 +0000

As a developer, i always wondering about how i can add comments that can distinguish themselves from the rest and As a result, I've come across this extension.

This comes with the variety of comments that you can add
for e.g ->

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings

Give it a shot! Keep building!