DEV Community: Neeraj Singh

Understanding Regex: The Simplest Guide.

Neeraj Singh — Tue, 02 Dec 2025 06:59:47 +0000

Regex (Regular Expressions) is one of those topics that gives many developers headaches.

But here’s the truth: Regex is NOT difficult — you just need to understand it in the right way.

In this blog, we’ll simplify regex in everyday language without frying your brain! 👇

✅ What is Regex?

Regex is a pattern-matching tool.

It is used to find, replace, validate, or extract specific patterns in a string.

Common uses:

Finding numbers
Validating emails
Filtering alphabets
Removing special characters
Extracting dates, phone numbers, IDs, etc.

🎯 1. Basic Structure of Regex

In JavaScript, a regex is written between slashes:

/pattern/flags

Example:

/[0-9]+/g

Breakdown:

Part	Meaning
`/`	Regex starts
`[0-9]+`	Pattern
`/`	Regex ends
`g`	Flag (global)

🎯 2. Character Classes — The Heart of Regex

The most important part of regex:

✔ `[ ]` → Character Set

Whatever you put inside the brackets will match any one of those characters.

Examples:

Pattern	Meaning
`[0-9]`	Any digit
`[a-z]`	a to z
`[A-Z]`	A to Z
`[a-zA-Z]`	Alphabets only
`[0-9-]`	Number or hyphen

💡 Just remember these 5 — you’ve already learned 60% of regex!

🎯 3. Quantifiers — How Many Times?

Quantifiers decide how many times a pattern should repeat:

Symbol	Meaning	Example	Explanation
`+`	1 or more	`[0-9]+`	One or more digits
`*`	0 or more	`a*`	"a" may or may not exist
`?`	0 or 1	`colou?r`	color OR colour

🎯 4. Anchors — Start & End of String

Anchor	Meaning
`^`	String starts with
`$`	String ends with

Example:

/^[0-9]+/

→ String must start with a number.

🎯 5. Flags — Extra Power

Flags come after the closing slash.

Flag	Name	Use
g	Global	Find ALL matches
i	Ignore case	Case-insensitive matching
m	Multiline	Applies to each line
s	Dotall	`.` also matches newline

Example:

/hello/gi

Matches:

hello
Hello
HELLO

- hElLo

🎯 6. Real-World Practical Examples

✔ Example 1: Remove Numbers

"50-200 metric tonnes".replace(/[0-9]/g, "");

Output:

-metric tonnes

✔ Example 2: Extract Only Numbers (including hyphen)

"50-200 metric tonnes".match(/[0-9-]+/)[0];

Output:

50-200

✔ Example 3: Validate Email

/^[\w.-]+@[\w.-]+\.\w{2,}$/i.test("user@example.com");

✔ Example 4: Remove Special Characters

text.replace(/[^a-zA-Z0-9 ]/g, "");

→ Only letters, numbers, and spaces remain.

🎯 7. Regex vs No Regex

❌ Without Regex

let result = "";

for (let ch of str) {
  if (!"0123456789".includes(ch)) {
    result += ch;
  }
}

✔ With Regex

str.replace(/[0-9]/g, "");

✔ Shorter
✔ Cleaner
✔ Readable

🎉 Final Tips to Remember Regex Forever

Regex is not magic — it’s just pattern matching.

Remember these 4 rules:

[ ] → What to match
+ * ? → How many times
^ $ → Start / End
g i m s → Flags (behavior)

If you remember these, regex becomes easy.

🏁 Conclusion

Regex is powerful but NOT complicated.

Once you understand the basics, you can:

Clean strings
Validate user input
Extract data
Perform replacements easily

Regex = Pattern + Repetition + Flags

Master this formula and regex will feel simple forever. 🚀

Building a Custom OTP Input Component in React Native

Neeraj Singh — Wed, 19 Nov 2025 13:23:36 +0000

Introduction

One-time password (OTP) verification has become essential in mobile applications for secure user authentication. While several libraries offer OTP components but i think we can create easily with our custom components. This article guides you through creating a custom, animated OTP Input component in React Native that offers a sleek, user-friendly interface.

Features of Our OTP Component

Smooth Cursor Blink Animation
Shake Animation for Invalid OTP
Auto-Focus & Smart Backspace Navigation
Countdown Timer with Resend OTP Feature
Native-Looking Input Boxes Without External UI Libraries
Easy Integration with Any Parent Screen

Component Goals

Our OTP component aims to be:

Modern in Appearance: Rounded input boxes with smooth transitions.
Intelligent in Behavior: Auto-focus on the next input and manageable state flows.
Engaging with Micro-Animations: Cursor blinking, box-scale on focus, and shake effects for error notifications.
Reusable: Easy to incorporate with simple prop configurations.
Cross-Compatible: Works on both iOS and Android, supporting light and dark themes.

Building the OTP Input Component

Component Structure

The OTP component utilizes:

TextInput for each digit box
Animated.Value for various animations
Hooks like useEffect, useRef, and useImperativeHandle

Core Functionalities

1. Cursor Blink Animation

The cursor is simulated with a small vertical bar using opacity animation. This enhances the UX by only showing the cursor for the active input.

Animated.loop(
  Animated.sequence([
    Animated.timing(cursorOpacity, { toValue: 0, duration: 450 }),
    Animated.timing(cursorOpacity, { toValue: 1, duration: 450 }),
  ])
).start();

2. Shake Animation on Errors

To indicate an invalid OTP, trigger a shake animation:

otpRef.current?.triggerShake();

The shake uses an interpolated translateX to create an effective feedback mechanism.

translateX: shakeAnim.interpolate({ inputRange: [-1, 1], outputRange: [-10, 10] })

3. Countdown Timer with Resend OTP

A built-in timer starts at 60 seconds, allowing for a seamless resend experience:

useEffect(() => {
  if (countdown > 0) {
    setInterval(() => setCountdown(prev => prev - 1), 1000);
  }
});

4. Auto-Focus & Smart Navigation

The input fields are designed for intuitive navigation. Typing in one box automatically shifts focus to the next, while backspacing on an empty box moves the focus to the previous input.

5. Box Scale Animation

Every focused input box features a subtle scaling effect, enhancing perceived interactivity:

transform: [{ scale: animatedValues.current[index].interpolate({...}) }]

Integrating the OTP Component

Here’s how to integrate the OTPInputComponent into your parent screen:

const [otp, setOtp] = useState(['', '', '', '']); // if we use lenght 4 then 4 empyt string

const submitOtp = () => {
  console.log('OTP entered:', otp);
};

<OTPInputComponent
  length={4} // it is dynamic length
  value={otp}
  onChange={(code) => setOtp(code)}
/>
<Button title="Submit" onPress={submitOtp} />

Complete OTP Component Code

Here is the comprehensive code for the OTPInputComponent component:

import React, { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
import { View, Text, TextInput, TouchableOpacity, Animated, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

interface InputProps {
  value: string[];
  onChange: (value: string[]) => void;
  length?: number;
  disabled?: boolean;
  onResendOTP?: () => void;
}

export const OTPInputComponent = forwardRef(({ value, onChange, length = 5, disabled = false, onResendOTP }: InputProps, ref) => {
  const inputRefs = useRef<TextInput[]>([]);
  const animatedValues = useRef<Animated.Value[]>([]);
  const [countdown, setCountdown] = useState(60);
  const [isResendActive, setIsResendActive] = useState(false);
  const cursorOpacity = useRef(new Animated.Value(1)).current;
  const shakeAnim = useRef(new Animated.Value(0)).current;

  useImperativeHandle(ref, () => ({ triggerShake }));

  useEffect(() => {
    Animated.loop(Animated.sequence([
      Animated.timing(cursorOpacity, { toValue: 0, duration: 450 }),
      Animated.timing(cursorOpacity, { toValue: 1, duration: 450 }),
    ])).start();
  }, [cursorOpacity]);

  useEffect(() => {
    animatedValues.current = Array(length).fill(0).map(() => new Animated.Value(0));
  }, [length]);

  useEffect(() => {
    const timer = countdown > 0 && !isResendActive ? setInterval(() => setCountdown(prev => prev - 1), 1000) : null;
    if (countdown === 0) setIsResendActive(true);
    return () => timer && clearInterval(timer);
  }, [countdown, isResendActive]);

  const triggerShake = () => {
    shakeAnim.setValue(0);
    Animated.sequence([
      Animated.timing(shakeAnim, { toValue: 1, duration: 80, useNativeDriver: true }),
      Animated.timing(shakeAnim, { toValue: -1, duration: 80, useNativeDriver: true }),
      Animated.timing(shakeAnim, { toValue: 1, duration: 80, useNativeDriver: true }),
      Animated.timing(shakeAnim, { toValue: 0, duration: 80, useNativeDriver: true }),
    ]).start();
  };

  const handleChange = (text: string, index: number) => {
    const newValue = [...value];
    newValue[index] = text;
    onChange(newValue);
    if (text && index < length - 1) inputRefs.current[index + 1].focus();
  };

  const handleResendOTP = () => {
    if (isResendActive && onResendOTP) {
      onResendOTP();
      setCountdown(60);
      setIsResendActive(false);
    }
  };

  return (
    <View style={styles.mainContainer}>
      <Animated.View style={[styles.container, { transform: [{ translateX: shakeAnim.interpolate({ inputRange: [-1, 1], outputRange: [-10, 10] }) }] }]}>
        {Array(length).fill(0).map((_, index) => (
          <View key={index} style={styles.inputContainer}>
            <TextInput
              ref={ref => (inputRefs.current[index] = ref)}
              style={styles.input}
              maxLength={1}
              keyboardType="number-pad"
              onChangeText={text => handleChange(text, index)}
              value={value[index]}
              editable={!disabled}
            />
            {index === 0 && <Animated.View style={[styles.cursor, { opacity: cursorOpacity }]} />}
          </View>
        ))}
      </Animated.View>
      <TouchableOpacity onPress={handleResendOTP} disabled={!isResendActive}>
        <Text style={styles.resendText}>{isResendActive ? 'Resend OTP' : `Resend OTP in ${countdown}s`}</Text>
      </TouchableOpacity>
    </View>
  );
});

const styles = StyleSheet.create({
  // Define your styles here...
});

Conclusion

This OTP input component exemplifies the fusion of functionality, reusability, and modern design practices.

Feel free to use the code and adapt it for your application needs!

Screenshot

Understanding CI/CD: The Backbone of Modern Software Development

Neeraj Singh — Wed, 19 Nov 2025 10:18:23 +0000

Continuous Integration (CI) and Continuous Delivery (CD) are fundamental practices in DevOps that revolutionize the software development lifecycle. By automating key processes, CI/CD enables teams to implement rapid code changes and consistently deliver high-quality applications to users.

What is CI/CD?

CI/CD represents a set of practices that streamline the integration and delivery of software:

Continuous Integration (CI): This focuses on automating the integration of code changes from multiple contributors. When developers commit code, CI tools automatically build and test the changes, helping identify issues early.
Continuous Delivery (CD): This extends the CI process, automating the deployment of applications to various environments. With CD, new features and updates can be released to users swiftly and reliably.

Why is CI/CD Important?

Manual software development processes can lead to numerous challenges, such as:

Error-Prone Deployments: Manual processes are susceptible to human errors that can introduce bugs and integrations problems.
Integration Hell: As multiple developers work on a project, merging their code can become complicated and time-consuming.

CI/CD addresses these issues by:

Automating Builds and Tests: Automated testing and build processes ensure that issues are detected and addressed immediately, making development more efficient.
Enhancing Release Reliability: Automation reduces downtime and accelerates deployment cycles, allowing teams to release updates frequently and securely.

The CI/CD Process

Implementing CI/CD involves several crucial stages:

Code Development: Developers write and commit changes to the version control system.
Integration: Changes are automatically integrated into a shared repository.
Build Artifacts: The system builds deployable artifacts from the code.
Automated Testing: Each change triggers automated tests to verify functionality and performance.
Deployment: Successful tests lead to deployment, either to a staging environment for further validation or directly to production.

This automated feedback loop enables teams to detect and rectify problems early, enhancing overall product quality.

Deployment Strategies

Effective deployment strategies are critical for reducing operational risks. Common approaches include:

Blue-Green Deployment: This strategy maintains two identical production environments. One serves traffic while the other is updated. If issues arise, traffic can be shifted back to the stable environment quickly.
Canary Deployment: New features are rolled out gradually to a small group of users before full deployment. This allows teams to monitor performance and user feedback before making widespread changes.

These strategies help minimize downtime and provide a rollback plan in case of issues.

Tools for CI/CD

Several tools are available for implementing CI/CD pipelines:

GitHub Actions: Ideal for teams already using GitHub, it offers a user-friendly interface for automating workflows.
Jenkins: A widely-used tool that provides flexibility but may require more maintenance and configuration.
CircleCI and Travis CI: Both are robust options for automating testing and deployment, with varying levels of customization and ease of use.

The choice of tools often hinges on the existing infrastructure and team preferences.

Continuous Delivery vs. Continuous Deployment

While both terms are often used interchangeably, they have distinct meanings:

Continuous Delivery involves a manual approval stage before deploying changes to production. This step allows teams to ensure quality control.
Continuous Deployment automates the entire process, automatically deploying changes to production without human intervention. This approach is ideal for less critical applications where rapid iteration is vital.

The decision between delivery and deployment strategies largely depends on the organization's risk tolerance and the nature of the applications being developed.

Conclusion

CI/CD is a cornerstone of modern software development, enabling teams to deliver high-quality software quickly and reliably. By automating processes, teams can reduce manual errors, speed up release cycles, and ultimately provide better experiences for users. Implementing CI/CD not only enhances productivity but also fosters a culture of collaboration and continuous improvement within development teams.

Facebook Graph API GET Page Access Token

Neeraj Singh — Tue, 16 Jul 2024 12:00:41 +0000

Hello 👋 readers,
If you're looking to manage your Facebook page programmatically, one of the essential things you'll need is a Page Access Token. Here's a simple guide to help you obtain it.

Prerequisites
Before you start, make sure you have the following:

A Facebook Developer account. If you don't have one, you can create it here.
An existing Facebook Page that you manage.

Step-by-Step Guide

Log in to Your Facebook Developer Account
Ensure you're logged into your Facebook developer account and have an app created.

Get a User Access Token with manage_pages Permission

Go to the Graph API Explorer.
Select your app from the dropdown.
Click on "Get User Access Token" and ensure manage_pages is selected.

Fetch the Page Access Token
Make a GET request to the following endpoint:

https://graph.facebook.com/{your_page_name}?fields=id,name,access_token&access_token={your_user_access_token}

Replace {your_page_name} with your Facebook page name and {your_user_access_token} with the user access token you obtained.

Retrieve the Page Access Token from the Response
The response will include the page ID, name, and the access token:

{
  "id": "1234567890",
  "name": "Your Page Name",
  "access_token": "your_page_access_token"
}

Tips and Best Practices

Keep Your Tokens Secure: Never expose your access tokens in client-side code or public repositories. Treat them like passwords.
Set Permissions Correctly: Ensure your app has the necessary permissions to access the page data.
Token Expiry: Remember that access tokens can expire. Be prepared to regenerate them as needed.

Conclusion

Obtaining a Facebook Page Access Token is a straightforward process that allows you to manage your page programmatically. By following the steps outlined above, you can quickly get the necessary access token and start integrating Facebook page functionalities into your applications. Remember to handle your tokens securely and renew them as required to ensure uninterrupted access.

Creating an Animated Button in React Native with Lottie

Neeraj Singh — Thu, 16 May 2024 07:20:58 +0000

Adding animations can significantly enhance the user experience of a mobile app, making it more engaging and dynamic. React Native provides various libraries and tools to incorporate animations seamlessly. One such popular library is Lottie, which allows you to integrate Adobe After Effects animations into your React Native projects effortlessly.

In this tutorial, we'll learn how to create a simple yet powerful animated button in React Native to start and stop animations using the Lottie library. By the end of this tutorial, you'll have a clear understanding of how to control animations dynamically based on user interactions.

Prerequisites
Before diving into this tutorial, you should have a basic understanding of React Native and how to set up a development environment. Make sure you have Node.js and npm (or yarn) installed on your machine.

Steps to Create an Animated Button

Step 1: Setting Up the Project
First, set up your React Native project. If you need help setting up, refer to the React Native environment setup guide.

Step 2: Install the Lottie Library
Install the Lottie library using npm or yarn:

npm install lottie-react-native

For iOS, you also need to install the pod:

cd ios
pod install

Step 3: Download Lottie Animation
If you don’t have any Lottie animations, you can download them from the LottieFiles website. Make sure to download the JSON file of the animation.

Step 4: Move the Animation File
Move your animation JSON file inside the assets folder of your project. In this example, we create a new directory called animation inside the assets folder and place the JSON file there.

project-root/
└── assets/
    └── animation/
        └── animation_1.json

Step 5: Create the HomeScreen Component
Now, let's create a screen with a button that can control the animation. Here’s how you can do it:

// HomeScreen.tsx

import LottieView from "lottie-react-native";
import { Fragment, useRef, useState } from "react";
import { Button, Dimensions, StyleSheet, Text, View } from "react-native";

export default function HomeScreen() {
  const [playPause, setPlayPause] = useState<string>("play");
  const animationRef = useRef<LottieView>(null);

  const runAnimation = (mode: string) => {
    if (mode === "play") {
      animationRef?.current?.play();
    }

    if (mode === "pause") {
      animationRef?.current?.pause();
    }
  };

  return (
    <Fragment>
      <View style={styles.container}>
        <View style={styles.animationBox}>
          <LottieView
            ref={animationRef}
            source={require("../../assets/animation/animation_1.json")}
            autoPlay={false}
            loop={false}
            style={{
              width: Dimensions.get("window").width - 100,
              height: Dimensions.get("window").height - 20,
            }}
          />
        </View>
        <View style={styles.btnBox}>
          <Button onPress={() => runAnimation("play")} title={"Start"} />
          <Button onPress={() => runAnimation("pause")} title={"Pause"} />
        </View>
      </View>
    </Fragment>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  animationBox: {
    flex: 0.7,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  btnBox: {
    flex: 0.3,
    width: "50%",
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
  },
  btn: {
    width: "50%",
  },
});

Output
Here's what the output should look like:

Conclusion
In this guide, we've explored how to integrate Lottie animations within React Native applications, focusing specifically on implementing play and pause controls. Leveraging the Lottie library, we've crafted a user-friendly animated button component capable of dynamically initiating and halting animations based on user interaction.

Feel free to experiment with different animations and expand the functionality of your app by adding more interactive elements. Happy coding!

Retrieving Facebook leads

Neeraj Singh — Wed, 06 Dec 2023 11:17:47 +0000

Requirements:

Facebook Developer Account: You need to have a Facebook Developer account to access the Graph API and create an app to obtain the required access token.
Access Token: You need to generate a user access token with the necessary permissions (and required permission leads_retrieval) to access the leads data.
Page ID: You need the ID of the Facebook Page associated with the lead form from which you want to retrieve leads.
Lead Form ID: You need the ID of the specific lead generation form for which you want to retrieve leads.

Steps:
1. Create a Facebook Developer Account:
If you don't have a Facebook Developer account, sign up for one at https://developers.facebook.com/.

2. Create a Facebook App:
In the Facebook Developer Dashboard, create a new app (business app) to obtain the necessary access token for accessing the Graph API.

3. Obtain User Access Token:
Use the Facebook Login product to generate a user access token with the required permissions to access the leads data. Ensure that the token has the "ads_read" and "leads_retrieval" permissions.

4. Retrieve Page ID:
Use the Graph API to retrieve the ID of the Facebook Page associated with the lead form. Make a request to the endpoint:

5. Obtain Lead Form ID:
Use the Graph API to retrieve the ID of the specific lead generation form for which you want to retrieve leads. Make a request to the endpoint:

6. Retrieve Leads:
Once you have the Page ID and Lead Form ID, you can use the Graph API to retrieve the leads for the specific lead form. Make a request to the endpoint:

Retrieve all the form leads.
API:
https://graph.facebook.com/v18.0/{form_id}/leads?access_token={your_access_token}

Method: GET
Params: access_token(required),limit (optional),
fields (optional) => created_time,id,field_data,form_id

Replace {form_id} with the ID of the lead generation form and {your_access_token} with your user access token.

Note: how to get form_id?
To get form_id you need first get your page_id under page_id your form_id are mentioned.

Get page_id
API:

https://graph.facebook.com/v18.0/{page_username}?fields=id,name,access_token&access_token={your_access_token}

Method: GET
Params: access_token (required), fields=id,name

Replace {page_username} with the username of the Facebook Page and {your_access_token} with your user access token.

// output
{
    "id": "your_page_id",
    "name": "your_page_name",
    "access_token": "you_page_access_token"
}

Note

For getting the leadgen_form you have use the page_access_token which is returned by the above graph api.

Get form_id
API:

https://graph.facebook.com/v18.0/{page_id}/leadgen_forms?access_token={you_page_access_token}

Method: GET
Params: access_token (required)

Replace {page_id} with the ID of the Facebook Page and {your_access_token} with your user access token.

// output
{
    "data": [
      {
        "id": "{form_id_1}",
        "locale": "en_US",
        "name": "Page1",
        "status": "ACTIVE"
      },
      {
        "id": "{form_id_2}",
        "locale": "en_US",
        "name": "Page2",
        "status": "ACTIVE"
      }
    ],
    "paging": {
      "cursors": {
        "before": "asdfasdf",
        "after": "asdfasdf"
      }
    }
  }

Generating a debug APK in React Native for Android

Neeraj Singh — Fri, 19 May 2023 04:38:39 +0000

Generating a Debug APK File in React Native

Introduction

This documentation provides step-by-step instructions on how to generate a debug APK (Android Package) file for a React Native application. The debug APK is primarily used for testing and debugging purposes during the development phase.

Prerequisites

Before proceeding, ensure that you have the following prerequisites in place:

React Native project: Set up and configure a React Native project on your development machine.
Android development environment: Install and configure the necessary tools for Android development, including Java Development Kit (JDK), Android SDK, and Android Studio.

Step 1: Bundle the JavaScript Code

Open your terminal or command prompt.
Navigate to the root directory of your React Native project.
Run the following command to bundle the JavaScript code:

npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

This command creates a compiled bundle of your JavaScript code and assets required for the React Native application.

Step 2: Build the Debug APK

In the terminal, move to the "android" directory of your React Native project:

cd android

Once inside the "android" directory, run the following command to assemble the debug version of the APK:

./gradlew assembleDebug

This command triggers the Gradle build system, which compiles the project and generates the debug APK file.

Locating the Debug APK File

To find the generated debug APK file, follow these steps:

Open your React Native project folder.
Navigate to the "android" directory.
Inside the "android" directory, locate the "app" directory.
Open the "app" directory.
Within the "app" directory, locate the "build" folder.
Open the "build" folder.
Inside the "build" folder, find the "outputs" folder.
Open the "outputs" folder.
Inside the "outputs" folder, you will find the "apk" folder.
Open the "apk" folder.

Inside the "apk" folder, you will find the generated debug APK file. It is typically named "app-debug.apk".

Conclusion

By following these steps, you have successfully generated a debug APK file for your React Native application. The debug APK can now be used for testing and debugging purposes on Android devices. Remember that the debug APK is not suitable for distribution or production use.

DEV Community: Neeraj Singh

Understanding Regex: The Simplest Guide.

✅ What is Regex?

🎯 1. Basic Structure of Regex

🎯 2. Character Classes — The Heart of Regex

✔ [ ] → Character Set

🎯 3. Quantifiers — How Many Times?

🎯 4. Anchors — Start & End of String

🎯 5. Flags — Extra Power

- hElLo

🎯 6. Real-World Practical Examples

✔ Example 1: Remove Numbers

✔ Example 2: Extract Only Numbers (including hyphen)

✔ Example 3: Validate Email

✔ Example 4: Remove Special Characters

🎯 7. Regex vs No Regex

❌ Without Regex

✔ With Regex

🎉 Final Tips to Remember Regex Forever

🏁 Conclusion

Building a Custom OTP Input Component in React Native

Introduction

Features of Our OTP Component

Component Goals

Building the OTP Input Component

Component Structure

Core Functionalities

1. Cursor Blink Animation

2. Shake Animation on Errors

3. Countdown Timer with Resend OTP

4. Auto-Focus & Smart Navigation

5. Box Scale Animation

Integrating the OTP Component

Complete OTP Component Code

Conclusion

Screenshot

Understanding CI/CD: The Backbone of Modern Software Development

What is CI/CD?

Why is CI/CD Important?

The CI/CD Process

Deployment Strategies

Tools for CI/CD

Continuous Delivery vs. Continuous Deployment

Conclusion

Facebook Graph API GET Page Access Token

Creating an Animated Button in React Native with Lottie

Retrieving Facebook leads

Generating a debug APK in React Native for Android

Generating a Debug APK File in React Native

Introduction

Prerequisites

Step 1: Bundle the JavaScript Code

Step 2: Build the Debug APK

Locating the Debug APK File

Conclusion

✔ `[ ]` → Character Set