Category: javascript

I am designing a site and I want to create a Scroll Indicator for my blog pages. In fact, I did something like this several months ago, but no matter what I did, I did not get results, so in fact, I abandoned the Scroll Indicator section and started designing other I looked at the parts and components until I came back to it another day and solved the problem, but today when I came back it still didn’t work!
I use this code:

<div class="progress-container">
    <div class="progress-bar" id="Scroll_Indicator_blog"></div>
</div>

// scroll bar script
window.onscroll = function () {
    Scroll_Indicator_blog_function()
};

function Scroll_Indicator_blog_function() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("Scroll_Indicator_blog").style.width = scrolled + "%";
}

.progress-container {
    position: fixed;
    top: 0;

    display: block;
    width: 100%;
    height: 8px;
    background: var(--vesal-background-color7);
    z-index: 9999;
}
.progress-bar {
    height: 100%;
    background: var(--vesal-background-color2);
    box-shadow: 0 5px 10px 0 var(--vesal-boxshadow-color-1);
    width: 0%;
    transition: ease-in-out 0.5s;
}

I have tried almost everything that I can think of. In fact, if you inspect my site, you will find that by changing width: 0% and increasing it to another percentage, the mentioned golden line that indicates the volume read from your page to It is displayed correctly, so I am almost sure that the problem is in the js section, or is there a need for a special library to perform this process? Of course, I must say that I used w3s in the overall design of this section, which I will post the link below. Thank you for guiding me
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

all I’m getting this typerror, and I can’t figure it out. I’ve searched Google, but I can’t seem to find an answer.

TypeError: Argument 1 (‘blob’) to FileReader.readAsDataURL must be an
instance of Blob

here is my component method:

onFilePick(event: Event) {
    const file = (event.target as HTMLInputElement).files;
    //console.log(file);
    // console.log(this.form);
    this.form.patchValue({ Image: file });
    this.form.get('image')?.updateValueAndValidity();
    const reader: any = new FileReader();
    reader.onload = () => {
      this.imagePreview = reader.result;
    };
    return reader.readAsDataURL(file);
  }

Hi if anyone have any input on this, will greatly appreicated.

I am using the maxmind database but it seems like it not setting the region based on the ip address.

This is my code in the middleware.

async function getCountryCode(
  request: NextRequest,
  regionMap: Map<string, Region | number>
) {
  try {
    let countryCode
    let ipAddress: string | null = request.headers.get("x-forwarded-for") || null;

    if (ipAddress) {
      // The x-forwarded-for can contain multiple IP addresses; use the first one.
      ipAddress = ipAddress.split(",")[0].trim()
    }
    console.log(ipAddress)
    // Fetch country code using the extracted IP address
    const maxmindDBCountryCode = await fetch(${BACKEND_URL}/store/ip-lookup, {
      headers: {
        "x-real-ip": ipAddress ?? "",
      },
    })
    const data = await maxmindDBCountryCode.json()

    const urlCountryCode = request.nextUrl.pathname.split("/")[1]?.toLowerCase()

    // Prioritize country code from IP lookup if available and valid
    if (data.country_code && regionMap.has(data.country_code.toLowerCase())) {
      countryCode = data.country_code.toLowerCase()
    }
    // If a country code is specified in the URL and valid, use it
    if (urlCountryCode && regionMap.has(urlCountryCode)) {
      countryCode = urlCountryCode
    }
    // If no valid country code from above, use the default region
    if (!countryCode && regionMap.has(DEFAULT_REGION)) {
      countryCode = DEFAULT_REGION
    }
    // If still no country code, use the first available region in the map
    if (!countryCode && regionMap.keys().next().value) {
      countryCode = regionMap.keys().next().value
    }

    return countryCode
  } catch (error) {
    if (process.env.NODE_ENV === "development") {
      console.error(
        "Middleware.ts: Error getting the country code. Did you set up regions in your Medusa Admin and define a NEXT_PUBLIC_MEDUSA_BACKEND_URL environment variable?"
      )
    }
  }
}

I’m experiencing an issue with a Docker container running on a server. I have a PHP script that creates a CSV file (e.g., test_visit_events_unfinished.csv) when a user first visits the website. This file logs data related to an experiment on the site. Once the user completes the experiment, a JavaScript function sends a POST request to my PHP script in application/x-www-form-urlencoded format. At this point, the PHP script should rename the file to test_visit_events_finished.csv.

What I want:

Once a new CSV file is created, it is named in the format test_visit_events_unfinished.csv. If the action finish is triggered, the file should be renamed to test_visit_events_finished.csv without modifying its contents.

What I tried:

I’ve tried multiple times to check if the file exists before renaming it, but no errors are thrown, and instead, a new file is created. I’ve verified the directory’s write permissions, and I suspect that the issue might be due to the user lacking permissions on this specific file. How can I dynamically assign the necessary permissions to the file?

Code

my php logic, the path to the file is correct. So the append and innit actions do work:

// Check if 'action' key exists in POST data
if (isset($_POST['action']) && $_POST['action'] === "init") {
    // Get name of log file, and ensure it's named with _unfinished by default
    $fid = $_POST['task'] ?? 'default_task'; // Default task if 'task' is missing
    $unfinishedFileName = $fid . "_unfinished" . LOGEXT; // Append _unfinished to the filename

    // Save data for the first time
    $header = "cursor,timestamp,xpos,ypos,event,xpath,attrs,extras" . PHP_EOL;
    file_put_contents(LOGDIR . "/" . $unfinishedFileName, $header . $info_data);
    
    // Notify recording script
    echo round(microtime(true) * 1000);

} else if (isset($_POST['action']) && $_POST['action'] === "append") {
    // Get the log file name, use _unfinished if not specified
    $fid = $_POST['task'] ?? 'default_task'; // Default task if 'task' is missing
    $unfinishedFileName = $fid . "_unfinished" . LOGEXT; // Append _unfinished to the filename

    // Don't write blank lines
    if (trim($info_data)) {
        file_put_contents(LOGDIR . "/" . $unfinishedFileName, $info_data, FILE_APPEND);
    }

} else if (isset($_POST['action']) && $_POST['action'] === "finish") {
    // Get the log file name without the suffix
    $fid = $_POST['taskname'] ?? 'default_task'; // Default task if 'taskname' is missing
    $unfinishedFileName = $fid . "_unfinished" . LOGEXT; // File with _unfinished suffix
    $finishedFileName = $fid . "_finished" . LOGEXT; // File with _finished suffix

    $originalFilePath = LOGDIR . "/" . $unfinishedFileName;
    $finishedFilePath = LOGDIR . "/" . $finishedFileName;

    if (file_exists($originalFilePath)) {
        // Check if the _finished file already exists to avoid overwriting
        if (!file_exists($finishedFilePath)) {
            // Rename the file to mark it as finished
            if (!rename($originalFilePath, $finishedFilePath)) {
                exit('Failed to mark file as finished');
            }
            echo 'File marked as finished';
        } else {
            exit('A file with _finished already exists');
        }
    } else {
        exit('Original _unfinished file not found');
    }
}

here is my docker logic for giving the rights to write in the directory with contains the file:

RUN usermod -u 1000 www-data && 
    groupmod -g 1000 www-data && 
    chown -R www-data:www-data /var/www/html && 
    chmod -R 755 /var/www/html/logs

here is the javascript functions which should send the filename for changing the name:

async function finishExperiment(eventFile) {
    console.log("Now savint to: ", eventFile);
    // Send a request to the server to mark the log file as "finished"
    try {
        const response = await fetch("static/php/writeEvents.php", {
            method: "POST",
            headers: { 
                "Content-Type": "application/x-www-form-urlencoded"  // Set content type to 'x-www-form-urlencoded'
            },
            body: new URLSearchParams({
                action: "finish",         // The action type to perform
                taskname: eventFile       // The filename to mark as finished
            })
        });

        // Handle the response
        const data = await response.text();  // Assuming the server sends a plain text message
    } catch (error) {
        console.error("Error finishing the experiment:", error);
    }

I’m using Nextjs and on my laptop the code is working as intended
when accessing the page from my Iphone it didn’t load
I’m using it to send data between iframes on two different sites
on the Nextjs project

useEffect(() => {
const handleLoad = () => {
  if (iframeRef.current) {
    iframeRef.current.contentWindow.postMessage(
      { data },
      process.env.IFRAME_LINK
    );
  }
};

if (iframeRef.current) {
  iframeRef.current.addEventListener('load', handleLoad);
}

return () => {
  if (iframeRef.current) {
    iframeRef.current.removeEventListener('load', handleLoad);
  }
};
}, [iframeRef.current]);

Again on a pc/laptop this working

The Iframe site code (Vite React)

useEffect(() => {
const handleMessage = (event) => {
  const parentURL = import.meta.env.PARENT_URL;
  if (event.origin !== parentURL) return;
  let { data } = event.data;
  console.log('received');
  setUserData(data);
};

window.addEventListener('message', handleMessage);
return () => {
  window.removeEventListener('message', handleMessage);
};
}, []);

I am fairly new to Playwright and Gherkin, and I’m trying to implement a Scenario Outline in one of my tests, as the steps are mostly the same. However, I ran into an issue with validation when I need to check multiple values within a single step. To clarify, here is the setup of my scenario:

Background:
Given I am “user”
And I am logged in
And I am on the “content-management” page

Scenario Outline: As a User, I want to be able to upload, import and export an environment containing unsupported entities
When I upload files:
| Name |
| <file_name> |
Then I should see record with parameters:
| Name | Content Description | Source Environment | Source Version
| | | | |
And I can find parent log message “<upload_log_message>”
When I import environment with properties:
| Property | Value |
| Activate | Yes |
| Overwrite | No |
And I can confirm import
Then I should see notification “Successfully imported the environment”
And I can find parent log message “Env ‘/’: Import process completed in”
And I can find child log message ‘<import_child_log>’
EXAMPLES:
| file_name | Name | Content Description |upload_log_message |import_child_log
| ABC | ABC | ABC | ABC | ABC

My question is about the import_child_log parameter. I would like to use more than one value (e.g., multiple placeholders such as , ) within this parameter. Is this possible, and if so, how can it be implemented?

I tried to use comma (,) or semicolon (;) as a separator, but it didn’t work.. During the execution it was reading it as a single String like ABC, DEF, GHI…

I try to implement module federation for lit elements with this package @originjs/vite-plugin-federation with vite and typescript. I am getting an error in host element, when importing the remote app.

import RemoteElement from “remoteApp/RemoteElement”;

I am getting the below error on the above line in host element.

Cannot find module ‘remoteApp/RemoteElement’ or its corresponding type declarations.ts(2307)

remote-element.ts

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("remote-element")
export class RemoteElement extends LitElement {
  render() {
    return html`<p>Remote Element</p>`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "remote-element": RemoteElement;
  }
}

vite-config.ts of remote element

import federation from "@originjs/vite-plugin-federation";

export default {
  server: {
    port: 4300,
    strictPort: true,
  },
  preview: {
    port: 4300,
    strictPort: true,
  },
  plugins: [
    federation({
      name: "remote-app",
      filename: "remoteEntry.js",
      exposes: {
        "./remote-element": "./src/remote-element.ts",
      },
      shared: [],
    }),
  ],
};

tsconfig.json of remote element

{
  "compilerOptions": {
    "target": "ES2020",
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

package.json of remote element

{
  "name": "remote",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "lit": "^3.2.1"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.6",
    "typescript": "~5.6.2",
    "vite": "^5.4.10"
  }
}

host-element.ts

import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

import RemoteElement from "remoteApp/RemoteElement";

@customElement("host-element")
export class HostElement extends LitElement {
  render() {
    return html` <RemoteElement></RemoteElement> `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "host-element": HostElement;
  }
}

vite.config.ts of host element

import federation from "@originjs/vite-plugin-federation";

export default {
  server: {
    port: 4200,
    strictPort: true,
  },
  plugins: [
    federation({
      name: "host-app",
      remotes: {
        remote_app: "http://localhost:4300/assets/remoteEntry.js",
      },
      shared: [],
    }),
  ],
};

tsconfig.json of host element

{
  "compilerOptions": {
    "target": "ES2020",
    "experimentalDecorators": true,
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "skipDefaultLibCheck": false
  },
  "include": ["src"]
}

package.json of host element

{
  "name": "host",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "lit": "^3.2.1"
  },
  "devDependencies": {
    "@originjs/vite-plugin-federation": "^1.3.6",
    "typescript": "~5.6.2",
    "vite": "^5.4.10"
  }
}

Currently working with a React project 17 and after adding the React-Timezone-Select package I’ve got a build error saying the following :

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'C:UsersDaanDesktopWatcherrhcp-dashboardnode_modulesreactjsx-runtime' imported from C:UsersDaanDesktopWatcherrhcp-dashboardnode_modulesreact-timezone-selectdistindex.js
Did you mean to import "react/jsx-runtime.js"?

(I’ve added the jsx-runtime package aswell)
The same error is happening aswell whenever I refresh the page where the React-timezone-selector is being used, only after a refresh, I can use the page without breaking it if I don’t refresh the page.

Searched online for a long time but nothing seems to work.

Component I made using the TimezoneSelect :

export interface SelectTimeZoneProps {
  timezone: ITimezone,
  setTimezone: (value: ITimezone) => void,
  label: string,
  required?: boolean,
}

const TimezoneSelector: React.FC<SelectTimeZoneProps> = ({
  timezone,
  setTimezone,
  label,
  required,
}) => {
  return (
    <div>
      {label && <label className={styles.InputLabel}>{label + (required ? "*" : "")}</label>}
      <TimezoneSelect value={timezone} onChange={setTimezone}/>
    </div>
  );
};
export default TimezoneSelector;

and how I use it :

 <div className="row">
        <div className="col-12 col-md-6">
          <TimezoneSelector 
            timezone={selectedTimezone} 
            setTimezone={handleTimeZoneChange} 
            label={t('site-configuration.timezone')}
            required={false}/>
           
        </div>
        <div className="col-12 col-md-6">
          <Alert type={'message'}>
            {t('site-configuration.timezone.explanation')}
          </Alert>
        </div>
      </div>

And If I click on second link of the error msg it brings me to the index of the node_module package of React-timezone-select to this line :

import { jsx } from "react/jsx-runtime";

Has anyone got an idea on how I could fix this?

Many thanks in advance.

I’m working on an Angular project that uses the ngb-alert to show alerts. My alert is working fine, but when I upgrade my Angular version and all other dependencies to the latest, I notice that the close button of the alert is jacked up.

<ngb-alert [type]="'success'" (closed)="onAlertClosed();">
    Text of alert
</ngb-alert>

Here is what I am using

angular- 18.2.8

ngboostrap – 13.1.1
Bootstrap – 4.5.3

I already checked with style overlapping and missing dependencies.

Either in a function or globally I want to change the return statement to sendBack. For example:

function helloWorld(name){
    sendBack 'Hello ' + name; 
}; 

Alternatively it could be a function:

function helloWorld(name){
    sendBack('Hello ' + name); 
}; 

This is just for fun, I was just wondering if it is possible.

Is there terminology that I could have used to better describe what I want to do here?

I want that whenever i click on btn something popover but I am facing issue with that..!
popover alone is working fine but when i add onclick() method it isn’t working.! someone plz help.

This is not Boostrap Popover but it is html in-built attribute.
This isn’t working..!

<button id="{{i.previous_details}}_{{i.reqstor_email}}" 
            class="change-btn"  
            
             popovertarget="allocation-data" 
             onclick="swap('{{i.id}}','{{i.previous_details}}','{{i.reqstor_email}}','{{i.reciver_email}}','{{i.status}}') ,suspend(this)">✔️</button>

<div id="allocation-data" popover>
</div>

But this is working fine.!

<button id="{{i.previous_details}}_{{i.reqstor_email}}" 
            class="change-btn"  
            
             popovertarget="allocation-data" >✔️</button>

<div id="allocation-data" popover>
</div>

I have a bunch of Nuxt 2.17 + Vuetify 2 apps that all share same core.
all work fine except one of them.
The one that has issue in a few days (2~3 days) get slower and slower until it wont handle ssr requests anymore (get 429 error although that same request when is sent on client-side is resolve 200). Specially one of the domains that is set on it and has more traffic than others. So I have to restart pm2 to get it back to normal. sometime the restart won’t solve the issue and have to remove .nuxt file and rebuild it.

• I had keep-alive on this server’s app and removed it but didn’t solve the issue
• I have no custom cache on it (if there is, it’s nuxt/webpack ddefaults)
• This particular server handles users so there is much more usage and also there are a lot of reverse proxy on it (it is a client side of my SaaS app so each domain gets and show that user’s data)

the things that i did in my app and is in the core of all others too, are:

• I get init data (that domains specific data) in nuxtServerInit() and set it on a vuex state
• I have a global mixin that has a moment.js import in it.
• I have i18n with 11 locales (lazy loaded)
• I created a repository design (injected a plugin into nuxt that read my different API calls):

// repoplugin.js that is added to nuxt.config.js
import createRepository from '@/repos/repository.js'
export default (ctx, inject) => {
  inject('repository', createRepository(ctx.$axios,ctx.i18n,ctx.store))
}


// repository.js
import InitRepository from '@/repos/InitRepository.js'
export default ($axios,$i18n,store) => ({
    init: InitRepository($axios,$i18n)
    ...
)}


// InitRepository.js
export default ($axios) => ({
    init(depth=1, {errorAlert=false, successAlert=false,...options}={}){
        return $axios.get(`settings/init`,{errorAlert,successAlert,...options})
    },
})

• also have resource system that import it in my pages/components when i need

// UserModel.js
export function UserInfoResource(data){
    return {
        id: data?.id,
        firstName: data?.firstName,
        lastName: data?.lastName,
        email: data?.email,
        phone: data?.phone,
        gender: data?.gender
    }
}

// usage :
import {UserInfoResource} from '@/models/UserModel.js'
export default{
  data(){
    user: UserInfoResource()
  },
  methods:{
    async getUser(){
      let res = await this.$repository.user.show()
      this.user = UserInfoResource(res.data)
    }
  }
}

these are pretty much what i do in my apps.
as I said , the only difference is the number of users and reverse proxies in the problematic server.

my cms app is much more heavier code and functionality wise, but never had an issue (doesn’t have reverse proxy on it though) , also some other servers has reverse proxy but the number on domains and the users that land on them are low.

So that is my Issue. and one last thing, can state management (vuex) cause server issues like high memory usage??

Also did a simple memory heap test on my local computer and couldn’t see an in memory.

export default () => {
    setInterval(() => {
        const memoryUsage = process.memoryUsage();
        console.log(`
            RSS: ${Math.round(memoryUsage.rss / 1024 / 1024)} MB,
            Heap Total: ${Math.round(memoryUsage.heapTotal / 1024 / 1024)} MB,
            Heap Used: ${Math.round(memoryUsage.heapUsed / 1024 / 1024)} MB,
            External: ${Math.round(memoryUsage.external / 1024 / 1024)} MB,
            Array Buffers: ${Math.round(memoryUsage.arrayBuffers / 1024 / 1024)} MB
        `);
    }, 60000); // Log every minute
};

I’m using LLaMA 3.1 to generate optimized JavaScript code variants by following a prompt that enforces data minimization principles. My goal is for the model to either optimize or confirm that no changes are necessary to the provided JavaScript code. Despite careful setup, the model’s responses often don’t accurately reflect the instructions given. Specifically, it always fails to optimize as requested.

Here’s a simplified version of my code:

device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
tokenizer = AutoTokenizer.from_pretrained("meta-llama/Llama-3.1-8B-Instruct")
model = AutoModelForCausalLM.from_pretrained("meta-llama/Llama-3.1-8B-Instruct", torch_dtype=torch.float16).to(device)
torch.backends.cudnn.benchmark = True

def generate_variants(filter_code, n_variants=3):
    variants = []

    text = f"""
    <|begin_of_text|><|start_header_id|>system<|end_header_id|>
    The following definition refers to data minimization: 
    'Data minimization is a principle restricting data collection to what is necessary in relation to the purposes for which they are processed.'
    <|eot_id|><|start_header_id|>user<|end_header_id|>
    Please optimize the provided JavaScript code with the following instructions:
    - If excessive anonymization is applied without clear utility, reduce the level of data anonymization to retain only the necessary level.
    - Eliminate unnecessary API function calls, keeping only those essential for minimal and efficient data processing.
    - Remove any unnecessary data attributes, ensuring that only essential data attributes are collected, processed, and stored.
    If the code already complies with data minimization, please add a comment '// No changes needed' to indicate that no modifications are required.
    Return only the JavaScript code, without any additional explanations, comments, or introductory text.
    Mock the code to make it run.
    Here is the code to optimize:
    
    {filter_code}
    <|eot_id|>
    <|start_header_id|>assistant<|end_header_id|>
    """

    for i in range(n_variants):
        seed_value = random.randint(0, 10000)
        torch.manual_seed(seed_value)
        random.seed(seed_value)

        input_ids = tokenizer(text, return_tensors="pt").input_ids.to(device)
        
        generated_ids = model.generate(
            input_ids, 
            max_length=1000, 
            temperature=0.1,
            top_k=5,         
            top_p=0.8
        )
        
        response = tokenizer.decode(generated_ids[0], skip_special_tokens=True)
        cleaned_response = response[len(text):].strip()
        if "// No changes needed" in cleaned_response:
            cleaned_response = f"{filter_code} // No changes needed"

        variants.append(cleaned_response)

    return variants

I’ve set specific parameters, and I’m using a fixed prompt and I’m not allowed to adjust the prompt text or these generation parameters.
This is an e.g.of one of the code to optimize:

const GoogleCalendar = {
  newEventAdded: {
      Where: "[some street address]", 
      Starts: "9:00 AM",
      Ends: "10:00 AM"
  },
  addDetailedEvent: {
      skip: () => console.log("Event skipped."),
      setDescription: (description) => console.log(`Description set: ${description}`),
      setAllDay: (isAllDay) => console.log(`All-day set: ${isAllDay}`),
      setStartTime: (startTime) => console.log(`Start time set: ${startTime}`),
      setEndTime: (endTime) => console.log(`End time set: ${endTime}`)
  }
};

if (GoogleCalendar.newEventAdded.Where.indexOf("[some street address]") < 0) {
  GoogleCalendar.addDetailedEvent.skip();
} else {
  GoogleCalendar.addDetailedEvent.setDescription("In the office from " 
      + GoogleCalendar.newEventAdded.Starts 
      + " to " + GoogleCalendar.newEventAdded.Ends);
  GoogleCalendar.addDetailedEvent.setAllDay("true");
  GoogleCalendar.addDetailedEvent.setStartTime(GoogleCalendar.newEventAdded.Starts);
  GoogleCalendar.addDetailedEvent.setEndTime(GoogleCalendar.newEventAdded.Ends);
}

The output is always either a wrong generated code or always says that No changes needed even if clearly it needs it

Is there something wrong with my prompt template?

Using alert() in the switch statement works but why wouldn’t it display the result in the browser using the below code?

JS file:

do {
        let playerMove = prompt('Please enter your move', 'e.g rock, paper or scissors');
        let computerMove = ['rock', 'paper', 'scissors'];
        
        switch (playerMove){
            case 'rock':                
                document.querySelector('p').innerHTML= computerMove[Math.floor(Math.random()*3)] + ' vs  your rock';
                break;
            case 'paper':
                document.querySelector('p').innerHTML= computerMove[Math.floor(Math.random()*3)] + ' vs your paper';
                break;
            case 'scissors':        
                document.querySelector('p').innerHTML= computerMove[Math.floor(Math.random()*3)] + ' vs your scissors';
                break;
            default:
                document.querySelector('p').innerHTML= 'You need to learn how to play Rock, Paper, Scissors';
        }                       
    } while (confirm('Wanna play again?'))

HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Rock Paper Scissors</h2>
    <p></p>
    <script src ='main.js'></script>
</body>
</html>

I’m using React Native Bootsplash in my project. The splash screen works perfectly on iOS, but I’m encountering a problem on Android. Specifically, a bottom bar appears on the screen when I run the app on Android, which does not appear on iOS.

Here’s the relevant code in MainActivity.kt:

package com.packageName

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate
import android.os.Bundle
import com.zoontek.rnbootsplash.RNBootSplash

class MainActivity : ReactActivity() {

    override fun getMainComponentName(): String = "packageName"

    override fun createReactActivityDelegate(): ReactActivityDelegate =
        DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)

    override fun onCreate(savedInstanceState: Bundle?) {
        RNBootSplash.init(this, R.style.BootTheme) // ⬅️ initialize the splash screen
        super.onCreate(null) // super.onCreate(null) with react-native-screens 
    }
}

Here is my styles.xml (android -> src -> main -> res -> values -> styles.xml)

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <item name="android:forceDarkAllowed">false</item>
    </style>

    <!-- BootTheme should inherit from Theme.BootSplash or Theme.BootSplash.EdgeToEdge -->
    <style name="BootTheme" parent="Theme.BootSplash">
        <item name="bootSplashBackground">@color/bootsplash_background</item>
        <item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
        <item name="postBootSplashTheme">@style/AppTheme</item>
    </style>


</resources>

image with issue

My setup:
React Native Version: 0.74.1
React Native Bootsplash: 6.3.1

When I remove function onCreate from MainActivity.kt, the bottom bar disappears, but then, of course, the splash screen no longer works as expected.

I also tried simplifying the component after the splash screen to isolate the issue. Here’s the code I tested:

index.js file

const Comp = () => {
  BootSplash.hide({fade: true});
  return <View style={{flex: 1, backgroundColor: 'red'}}></View>;
};

// AppRegistry.registerComponent(appName, () => App);
AppRegistry.registerComponent(appName, () => Comp)

I’ve seen suggestions indicating that this might be related to “safe-area-inset-*” rules or layout behavior. Unfortunately, I’m unable to connect a debugger to inspect the rendering details directly. I also tested on a physical Android device to rule out simulator-specific rendering glitches, but the issue remains.

If i remove

<item name="bootSplashBackground">@color/bootsplash_background</item>
<item name="bootSplashLogo">@mipmap/bootsplash_logo</item>
<item name="postBootSplashTheme">@style/AppTheme</item>

from styles.xml (android -> src -> main -> res -> values -> styles.xml), my screen looks like image.
At the bottom, where the padding appears, we can see part of the BootSplash.

I also tested on a physical Android device to rule out simulator-specific rendering glitches, but the issue remains.