Category: javascript

I’m using FullCalendar for React. Instead of a regular calendar year, I would like to use a fiscal calendar. For instance, the current fiscal year (FY25) should begin on Sep 29, 2024 and end on Sep 27, 2025. The fiscal month of October should display 9/29 through 11/2. The current fiscal week should be 5.

Is there a way to change the underlying calendar object in this way?

I’m working on task automation, so my solution can’t be a manual one. I am moving HTML content from one webpage to another, but I need to get a name list of all images shown on the page. The URLs for the images only have the location down to the folder (e.g. www.whatever.com/abcdefg/archive).

In this case, abcdefg is the name of the image file, but it could be JPG PNG GIF etc. I don’t see anywhere to find that information. If I manually save or drag the image to a folder, then the extension becomes apparent, but I can’t find it without manually interacting with the file.

Ultimately, the user will drag/save the image files out of the HTML page, which can be done fairly quickly, but if they have to go back to the webpage that imported the files and select file extensions, there’s no longer any point in trying to automate the process. It will be too tedious.

I know there are a ton of other ways to get this done, but for this effort, I’m stuck with native JavaScript and HTML only. I can’t access the FSO in native JS, and I can’t use a manual solution like going into the work folder and looking at the files. Anybody? Thanks.

So far, I have not tried anything because I don’t know of any way to do this. Native JS simply does not interact with the FSO.

The dark mode is being saved via local storage, but it’s not being applied to all the site’s pages automatically. How can I make sure that when I choose dark mode, it is applied to all pages of the website automatically? How do I apply what I’ve saved in localstorage?

let trilho = document.getElementById('trilho');
let body = document.querySelector('body');

// Check local storage for the user's theme preference
const theme = window.localStorage.getItem("theme");

// Set the initial theme based on localStorage
if (theme === "dark") {
    body.classList.add("dark");
    trilho.classList.add("dark"); // Ensure the button reflects dark mode
} else {
    trilho.classList.remove("dark"); // Ensure the button reflects light mode
}

// Add event listener to toggle dark mode
trilho.addEventListener('click', () => {
    trilho.classList.toggle('dark');
    body.classList.toggle('dark');

    // Update localStorage with the current theme
    if (body.classList.contains("dark")) {
        window.localStorage.setItem("theme", "dark");
        trilho.classList.add("dark"); // Dark mode button
    } else {
        window.localStorage.setItem("theme", "light");
        trilho.classList.remove("dark"); // Light mode button
    }
});

Billing error while deploying cloud functions onDocumentCreated trigger with v2 api for cloud functions.

I tried to deploy the below function, got this error:”Write access to project ‘xxxxx’ was denied: please check billing account associated and retry“**. Not sure why it does not let me when I can easily upload V1 functions.

const { onDocumentCreated } = require("firebase-functions/v2/firestore");
const { getMessaging } = require('firebase-admin/messaging');
const { initializeApp } = require('firebase-admin/app');

initializeApp();


exports.sendNotificationOnSales = onDocumentCreated('sales/{docId}', async (event) => {
  const newData = event.data.data();

  const itemName=newData['Item name'];
  const itemPrice=newData['Price'];

  const message = {
    topic: 'sale',
    notification: {
      title: 'New item for sale has been added',
      body: `${itemName} ${itemPrice}`,
    },
  };

  try {
    await getMessaging().send(message);
    console.log('Notification sent successfully');
  } catch (error) {
    console.error('Error sending notification:', error);
  }
});

I have a Tabulator 6.3 page I am building to display data from ValKey. I’m trying to figure out how to save certain aspects of the table. My data is sorted by groups. Each row has a radio button and only one row per group can have this radio button enabled. There are also two other buttons in each row that essentially act as a checkbox, but a row can only have one checkbox checked. To clarify, I’m not talking about saving data back to ValKey per se. I can already do that. This is about saving the temporary state of the table as it relates to the rows of data.

I looked into the data persistence features of Tabulator. It save stuff like sorting, filtering, column resizing etc., and while it does have the ability to extend this, I’m not sure if my use case is a good fit for this, as it seems to be meant for columns, not rows. I also looked at the Reactive Data module a bit. That might be useful but I’m still looking into it. I just want to leverage what Tabulator already offers as much as I can before I code my own solution. I’d appreciate any suggestions or feedback.

I am trying to implement a bluetooth printer functionality directly from browser.
The app has an intent option that can be used to print from browser “bprint://”

When I call the function window.open(“bprint://” + “https://www.example.com”,’_blank’)
It actually tries to open bprint://https//www.example.com which then breaks the functionality because of the removed colon after https.

I also tried creating a link and set its href attribute, which has the same result.

Is there any way to open this URL intent maintaning the original url?

i just use any other html template and i want to use that template in my nextJS admin template so i just convert my html code in JSX and add assets folder in my nextJS public directory all asset’s CSS code successfully render on browser but also assets JS file render in browser but template no any functionality add in my theme while when i run my HTML template with only assets then that is easily run with whole JS functionality .

import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
  src: "./fonts/GeistVF.woff",
  variable: "--font-geist-sans",
  weight: "100 900",
});

const geistMono = localFont({
  src: "./fonts/GeistMonoVF.woff",
  variable: "--font-geist-mono",
  weight: "100 900",
});

export const metadata = {
  title: `Metronic - the world's #1 selling Bootstrap Admin Theme Ecosystem for HTML, Vue, React, Angular & Laravel
          by Keenthemes`,
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="description"
          content="The most advanced Bootstrap Admin Theme on Themeforest trusted by 94,000 beginners and professionals. Multi-demo, Dark Mode, RTL support and complete React, Angular, Vue &amp; Laravel versions. Grab your copy now and get life-time updates for free." />
        <meta name="keywords"
          content="Metronic, bootstrap, bootstrap 5, Angular, VueJs, React, Laravel, admin themes, web design, figma, web development, free templates, free admin themes, bootstrap theme, bootstrap template, bootstrap dashboard, bootstrap dak mode, bootstrap button, bootstrap datepicker, bootstrap timepicker, fullcalendar, datatables, flaticon" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta property="og:locale" content="en_US" />
        <meta property="og:type" content="article" />
        <meta property="og:title"
          content="Metronic - Bootstrap 5 HTML, VueJS, React, Angular &amp; Laravel Admin Dashboard Theme" />
        <meta property="og:url" content="https://keenthemes.com/metronic" />
        <meta property="og:site_name" content="Keenthemes | Metronic" />
        <link rel="canonical" href="https://preview.keenthemes.com/metronic8" />
        <link rel="shortcut icon" href="assets/media/logos/favicon.ico" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
        <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
      </head>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased home blog wp-custom-logo dark-background dark-version main-layout-boxed disable-floating-video header-vid-default beeteam368 elementor-default elementor-kit-12 header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed aside-enabled aside-fixed`}
        id="kt_body"
        style={{ height: 'var(--kt-toolbar-height)' }}
      >
        {children}

        <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
        <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
        <script src="assets/js/widgets.bundle.js"></script>
        <script src="assets/js/custom/widgets.js"></script>
        <script src="assets/js/custom/apps/chat/chat.js"></script>
        <script src="assets/js/custom/utilities/modals/upgrade-plan.js"></script>
        <script src="assets/js/custom/utilities/modals/create-app.js"></script>
        <script src="assets/js/custom/utilities/modals/users-search.js"></script>
      </body>
    </html>
  );
}

i try to use a ready made HTML template with his all functionlity in NEXTJS.

I’m using FullCalendar 6.1 with rrule plugin. I have set editable:true so that I can drag existing events. I’m not planing on dropping external events. The documentation says evenChange is called after eventDrop and eventResize, so I’m guessing I need to make ajax call in eventChange to update database. After the Ajax call to update database, how do I render calendar? I looked around but I cannot seem to find an example that uses eventChange. I was wondering how definition of function looks like e.g

eventChange: function (info) {
...
}

I have component that looks like this

const TrainingProgressBar = ({ id }) => {
  const { classes } = useStyles();
  const dispatch = useDispatch();

  const { success } = useSelector(state => state.app.contents).statusById[id];
  const content = useSelector(state => selectContent(state, { id }));
  const { notStarted, started, completed } = content.trainingProgress || {};

  const refic = useRef();

  useEffect(() => {
    if (success || JSON.stringify(refic.current) !== JSON.stringify(content)) {
     dispatch(getContent({
       id,
       query: {
         calculateTrainingProgress: true,
         management: true
       }
     }));
     refic.current = content;
    }
  }, [dispatch, id, success, content]);

  const total = notStarted + started + completed;
  const totalPercentage = Math.round((completed / total) * 100) || 0;

  return (
    <>
      some code
    </>
  );
};

Where content depends on the ID that is passed to this component. I’m trying to achieve that dispatch is called when content is loaded, success is true, and content is changed. In the second case, success is not changed. The problem I have is that the Maximum update depth is exceeded. It’s caused by content in the dependency array, but if I don’t put it in there, dispatch will not be called if the content is changed. What am I doing wrong?

Bcrypt.compare returns false. I checked about 10 questions in here, but still couldn’t figure it out. My user model doesn’t trim passwords. Mongodb used to store hashed password. Implemented step by step checks. Hashed password is returned correctly. Ensured that the correct password is used as an input. Consulted with genAI with no success. Please help.

    userLogin: async (parent, { email, password }, context) => {
  try {
    // Check if the rate limit has been exceeded
    if (context.req.rateLimit && context.req.rateLimit.remaining <= 0) {
      // Log rate limit exceeded
      logWarn(`Rate limit exceeded for email: ${email}`);
      // Throw an error if the rate limit has been exceeded
      throw new Error('Too many login attempts, please try again later.');
    }

    // Find the user by email
    const user = await User.findOne({ email });

    // Log the user object
    logInfo(`User found: ${JSON.stringify(user)}`);

    // Check if the user exists
    if (!user) {
      // Log failed login attempt
      logError(`Failed login attempt for email: ${email}`);
      // Throw an error if the user does not exist
      throw new Error('User not found');
    }

    // Log the hashed password stored in the database
    logInfo(`Hashed password from database: ${user.password}`);

    // Log the provided password
    logInfo(`Provided password: ${password}`);

    // Check if the provided password matches the hashed password stored in the database
    const isMatch = await bcrypt.compare(password, user.password);

    // Log the password comparison result
    logInfo(`Password match: ${isMatch}`);

    if (!isMatch) {
      // Log failed login attempt
      logError(`Failed login attempt for email: ${email}`);
      // Throw an error if the password is incorrect
      throw new Error('Invalid email or password');
    }

    // Generate a JWT token
    const token = jwt.sign({ userId: user._id }, 'your_jwt_secret_here', {
      expiresIn: '1h',
    });

    // Log successful login
    logInfo(`User logged in: ${user.email}`);

    // Return the token and the user ID
    return {
      token,
      userId: user._id,
    };
  } catch (error) {
    // Log the error
    logError(`Error during login: ${error.message}`);
    throw error;
  }
},

I try to save the content of ‘textarea’ for perplexity.ai.

The website can trigger a Cloudfare captcha when you submit, then you loose what you have written in the box.

I tried this, which is wrong, there’s nothing restored by example when I refresh the page.

// ==UserScript==
// @name         Sauvegarde Textarea
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Sauvegarde le contenu d'un textarea et le restaure après un rafraîchissement de la page.
// @match        https://www.perplexity.ai/search/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Sélectionner le textarea
    const textareas = document.querySelectorAll('textarea');
    let textarea;

    // Vérifier si des textareas existent
    if (textareas.length > 0) {
        // Choisir le bon textarea (ajuster selon la structure de la page)
        textarea = textareas.length === 3 ? textareas[2] : textareas[0];
    } else {
        console.error("Aucun textarea trouvé.");
        return;
    }

    // Charger le contenu sauvegardé depuis le localStorage
    const savedContent = localStorage.getItem('textareaContent');
    if (savedContent) {
        textarea.value = savedContent; // Restaurer le contenu sauvegardé
    }

    // Fonction pour sauvegarder le contenu dans localStorage
    function saveContent() {
        localStorage.setItem('textareaContent', textarea.value);
    }

    // Écouter les événements de changement sur le textarea
    textarea.addEventListener('input', saveContent);

    // Écouter l'événement de perte de focus pour sauvegarder une dernière fois
    textarea.addEventListener('blur', saveContent);

    // Écouter l'événement de déchargement de la page pour sauvegarder une dernière fois
    window.addEventListener('beforeunload', saveContent);
})();

I’ve been teaching myself some coding basics by creating a spoof social media site with HTML/CSS and vanilla Javascript. Currently, I’m trying to toggle post descriptions when post images are clicked.

I’ve cobbled together an ugly and janky (but working!) list of functions with if/else statements. It’s REALLY horrible; I know there are much cleaner solutions using arrays and for loops. I’d like to find out how to store my post descriptions and post images in two const variables (as nodelists, then turn them into arrays?), then use a loop to toggle the correct post description to “display: block” when its corresponding image is clicked.

As it stands, my code functions, but extremely poorly. Here is the fiddle: https://jsfiddle.net/x9abz658/3/#&togetherjs=hFzS5u7I9y

And here is the first function as an example:

function showPostOne() {
    var a = document.getElementById("postone");
    var b = document.getElementById("posttwo");
    var c = document.getElementById("postthree");
    var d = document.getElementById("postfour");
    var e = document.getElementById("postfive");
    var f = document.getElementById("postsix");
    var g = document.getElementById("postseven");

    if (a.style.display === "none")
         {a.style.display = "block";}

    else {
        a.style.display = "none";
    }

    if (b.style.display === "block")
        {b.style.display = "none";}

    if (c.style.display === "block")
        {c.style.display = "none";}

    if (d.style.display === "block")
        {d.style.display = "none";}

    if (e.style.display === "block")
        {e.style.display = "none";}

    if (f.style.display === "block")
        {f.style.display = "none";}

    if (g.style.display === "block")
        {g.style.display = "none";}
    }

Every image activates a function onclick, which displays its specific description by manually setting every other description to display: none. Like I said, horrible.

Currently, I’m using document.getElementById to assign a unique variable to every post, then specifically designating which post to display while hiding the others. I’ve tried to make the variables global by using const and moving them out of the functions, but everything stops working. Not only is the code janky, but I have to declare the same variables inside each function.

I’ve scoured the web for solutions using loops and nodelists/arrays, such as this one:

const pics = document.getElementsByClassName("pix");
const posts = document.getElementsByClassName("post");

for (let ii = 0; ii < pics.length; ii++) {
    pics[ii].addEventListener("click", function() {
    
        for (let aa = 0; aa < posts.length; aa++) {
            posts[aa].style.display = "none";
        }
        posts[ii].style.display = "block";
    });
}

I’m getting more familiar with for loops, and I broadly understand this code, but it doesn’t work with the HTML/CSS that I already have; the variable and class names are correct, as far as I’m aware. The “pix” class has only been assigned to <img> elements; I tried to enclose each image in a div and assign those to the variable “pics”, thinking that might help, but it only made things worse.

Any advice is appreciated.

I am working on a project using Vite and trying to implement lazy loading for images. I have the following HTML structure for my images:

html

<img
  class="lazy"
  src="./src/images/lazy/note.webp"
  data-src="./src/images/note.webp"
  alt="Image of a book"
  class="bookImage"
/>

after build the html looks like this

 <img
   class="lazy"
   src="/assets/note-BK5rAaOe.webp"
   data-src="./src/images/note.webp"
   alt="Image of a book"
   class="bookImage"
 />

Problem:
The issue I am facing is that during the Vite build, the data-src attributes for my images are not being processed. As a result, lazy loading does not work as expected as the location is wrong

To achieve lazy loading, I’m using the following JavaScript:

document.addEventListener('DOMContentLoaded', function () {
  const lazyImages = document.querySelectorAll('.lazy');

  const lazyLoad = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('loaded'); // Add loaded class for the animation
        observer.unobserve(img); // Stop observing the image once it's loaded
      }
    });
  };

  const observer = new IntersectionObserver(lazyLoad, {
    root: null,
    rootMargin: '0px',
    threshold: 0.1,
  });

  lazyImages.forEach(img => observer.observe(img));
});

Additionally, here is my vite.config.js file:

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Use the modern API
        api: 'modern-compiler', // or "modern"
      },
    },
  },
});

How can I configure Vite to compile the data-src attributes properly?
Do I need to manually add images to achieve lazy loading, or is there a way to automate this process?
I also tried building the same setup using Parcel, but I encountered the same issue with the data-src attributes not being compiled.
Any guidance or suggestions on how to resolve this issue would be greatly appreciated!

When building my expo react-native app I get the build error:

• Where:
  Script ‘/DELIBERATELY_HIDDEN/node_modules/expo-modules-autolinking/scripts/android/autolinking_implementation.gradle’ line: 377

• What went wrong:
  A problem occurred evaluating project ‘:expo’.

A problem occurred configuring project ‘:expo-camera’.
Failed to notify project evaluation listener.
> com.android.builder.errors.EvalIssueException: compileSdkVersion is not specified. Please add it to build.gradle
> Could not get unknown property ‘release’ for SoftwareComponent container of type org.gradle.api.internal.component.DefaultSoftwareComponentContainer.

I’ve tried every answer in every related post but it hasn’t helped.

I’ve looked at my android project level, android app level and expo-camera node_modules level build.gradle file’s, but they all specify a compileSdkVersion!

I don’t want to change anything in node_modules as it will be wiped every time I have to reinstall them.

It used to build just fine using expo-camera version 14.1.3, react 18.2.0, react native 0.73.6 & expo 50.0.0 and I haven’t changed those versions.

Incidentally, I also get the following in my problems tab in VS Code, but similar errors have happened with other modules, before, without causing build errors:

Missing Gradle project configuration folder: .settings

Here are my build.gradle file’s:

Project level:

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '34.0.0'
        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '23')
        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '34')
        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
        kotlinVersion = findProperty('android.kotlinVersion') ?: '1.8.10'

        ndkVersion = "25.1.8937393"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath('com.android.tools.build:gradle')
        classpath('com.facebook.react:react-native-gradle-plugin')
    }
}

apply plugin: "com.facebook.react.rootproject"

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url(new File(['node', '--print', "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), '../android'))
        }
        maven {
            // Android JSC is installed from npm
            url(new File(['node', '--print', "require.resolve('jsc-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), '../dist'))
        }

        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' }
        maven {
            // expo-camera bundles a custom com.google.android:cameraview
            url "$rootDir/../node_modules/expo-camera/android/maven"
        }
    }
}

App level:

apply plugin: 'com.android.application'
apply plugin: "com.facebook.react"

def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()

    // Use Expo CLI to bundle the app, this ensures the Metro config
    // works correctly with Expo projects.
    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
    bundleCommand = "export:embed"

    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '..'
    // root = file("../")
    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
    // reactNativeDir = file("../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
    // codegenDir = file("../node_modules/@react-native/codegen")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]

    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    // hermesFlags = ["-O", "-output-source-map"]
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

apply plugin: "org.jetbrains.kotlin.android"

android {
    ndkVersion rootProject.ext.ndkVersion

    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    namespace 'co.uk.tycho.provisioner'
    defaultConfig {
        applicationId 'co.uk.tycho.provisioner'
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 14
        versionName "1.0.0"

        buildConfigField("boolean", "REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS", (findProperty("reactNative.unstable_useRuntimeSchedulerAlways") ?: true).toString())

        missingDimensionStrategy 'react-native-camera', 'general'
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'provisionerDebugKey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    packagingOptions {
        jniLibs {
            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
        }
    }
    // flavorDimensions 'react-native-camera'
    // productFlavors {
    //     general {
    //         dimension 'react-native-camera'
    //     }
    //     mlkit {
    //         dimension 'react-native-camera'
    //     }
    // }
}

// Apply static values from `gradle.properties` to the `android.packagingOptions`
// Accepts values in comma delimited lists, example:
// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
    // Split option: 'foo,bar' -> ['foo', 'bar']
    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
    // Trim all elements in place.
    for (i in 0..<options.size()) options[i] = options[i].trim();
    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
    options -= ""

    if (options.length > 0) {
        println "android.packagingOptions.$prop += $options ($options.length)"
        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
        options.each {
            android.packagingOptions[prop] += it
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";

    if (isGifEnabled) {
        // For animated gif support
        implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
    }

    if (isWebpEnabled) {
        // For webp support
        implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
        if (isWebpAnimatedEnabled) {
            // Animated webp support
            implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
        }
    }

    implementation("com.facebook.react:flipper-integration")

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
applyNativeModulesAppBuildGradle(project)

expo-camera node_modules level:

apply plugin: 'com.android.library'
apply plugin: 'kotlin-android'
apply plugin: 'maven-publish'

group = 'host.exp.exponent'
version = '14.1.3'

def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
if (expoModulesCorePlugin.exists()) {
  apply from: expoModulesCorePlugin
  applyKotlinExpoModulesCorePlugin()
  // Remove this check, but keep the contents after SDK49 support is dropped
  if (safeExtGet("expoProvidesDefaultConfig", false)) {
    useExpoPublishing()
    useCoreDependencies()
  }
}

buildscript {
  // Simple helper that allows the root project to override versions declared by this library.
  ext.safeExtGet = { prop, fallback ->
    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
  }

  // Ensures backward compatibility
  ext.getKotlinVersion = {
    if (ext.has("kotlinVersion")) {
      ext.kotlinVersion()
    } else {
      ext.safeExtGet("kotlinVersion", "1.8.10")
    }
  }

  repositories {
    mavenCentral()
  }

  dependencies {
    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
  }
}

// Remove this if and it's contents, when support for SDK49 is dropped
if (!safeExtGet("expoProvidesDefaultConfig", false)) {
  afterEvaluate {
    publishing {
      publications {
        release(MavenPublication) {
          from components.release
        }
      }
      repositories {
        maven {
          url = mavenLocal().url
        }
      }
    }
  }
}

android {
  // Remove this if and it's contents, when support for SDK49 is dropped
  if (!safeExtGet("expoProvidesDefaultConfig", false)) {
    compileSdkVersion safeExtGet("compileSdkVersion", 34)

    defaultConfig {
      minSdkVersion safeExtGet("minSdkVersion", 23)
      targetSdkVersion safeExtGet("targetSdkVersion", 34)
    }

    publishing {
      singleVariant("release") {
        withSourcesJar()
      }
    }

    lintOptions {
      abortOnError false
    }
  }

  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
  if (agpVersion.tokenize('.')[0].toInteger() < 8) {
    compileOptions {
      sourceCompatibility JavaVersion.VERSION_11
      targetCompatibility JavaVersion.VERSION_11
    }

    kotlinOptions {
      jvmTarget = JavaVersion.VERSION_11.majorVersion
    }
  }

  namespace "expo.modules.camera"
  defaultConfig {
    versionCode 32
    versionName "14.1.3"
  }
}

repositories {
  mavenCentral()
  maven {
    url "$projectDir/maven"
  }
}

dependencies {
  // Remove this if and it's contents, when support for SDK49 is dropped
  if (!safeExtGet("expoProvidesDefaultConfig", false)) {
    implementation project(':expo-modules-core')
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
  }
  def camerax_version = "1.4.0-alpha02"

  api "androidx.exifinterface:exifinterface:1.3.6"
  api 'com.google.android:cameraview:1.0.0'

  implementation "androidx.camera:camera-core:${camerax_version}"
  implementation "androidx.camera:camera-camera2:${camerax_version}"
  implementation "androidx.camera:camera-lifecycle:${camerax_version}"
  implementation "androidx.camera:camera-video:${camerax_version}"

  implementation "androidx.camera:camera-view:${camerax_version}"
  implementation "androidx.camera:camera-extensions:${camerax_version}"
  implementation "com.google.mlkit:barcode-scanning:17.2.0"
  implementation 'androidx.camera:camera-mlkit-vision:1.4.0-alpha02'

  api 'com.google.android:cameraview:1.0.0'
}

You are given a method that is supposed to print numbers from 1 to N. However, there is an off-by-one error that causes the loop to skip the last number. Identify and correct the error.

public class PrintNumbers {
    public static void printNumbers(int N) {
        for (int i = 1; i < N; i++) { // Incorrect loop condition
            System.out.print(i + " ");
        }
    }

    public static void main(String[] args) {
        printNumbers(5); // Expected Output: 1 2 3 4 5
                         // Actual Output: 1 2 3 4
    }
}

public static void main(String[] args) {
        printNumbers(5); // Expected Output: 1 2 3 4 5
                         // Actual Output: 1 2 3 4
    }
}