DEV Community: prajin10

Fix gradle build failed with unknown error. see logs for the run gradlew in expo

prajin10 — Tue, 25 Feb 2025 18:00:00 +0000

This is common issue among react native developer .
Reasons of this

Node Package mismatch (95% of the time )
.gitignore file not available

SOlution
1.Delete node_modules , Delete package_lock.json and then do npm install on fresh package.json ( THis will fix your problem most of the time)

If the issue is not fixed

Create new project
Add dependencies(only) from your package.json and then do npm install
Run the app
Try building again this will work for most of cases
for git error just initialize git using "git init"

How to give same sizes to dynamic image in next js .

prajin10 — Mon, 22 May 2023 09:12:06 +0000

In next js using Image tag can be consfusing most of time because u have to either use width and height or layout="fill" compulsory so in those case making the dynamic image of same size can be quite confusing so here i am with my solution

  <Image src={bookInfo?.Cover?.url} alt="book" width={39.26} height={57.06}  />

Above code will give size(39.26px * 57.06px ) to image.But wait using only this may cause the image to be blurry / low quality so in that case u must have to following code

sizes="100vw"

Which will make the image clear and of perfect size .

How to import svg in next js and use it in src of Image tag from next/Image

prajin10 — Sat, 13 May 2023 03:12:49 +0000

So due to 100 of different way to import Image in Nextjs it is sometimes really confusing how to import svg in next js and use it in src of Image tag from next/Image. So here i am with just 4 steps

Paste the svg file in you asset folder as icon.svg.
Then in the file where you wan to use the svg import svg like below:

import icon from "../asset/icon.svg"

Then to use the icon in Image tag as source do like below

U dont need to define width and height.

That's it if you like dont forget to comment and cheer me up

Difference between onClick and onMouseDown with real world project example

prajin10 — Sat, 13 May 2023 03:04:23 +0000

What exactly is the difference between.

onMouseDown: A MouseEvent handler function. Fires when the pointer is pressed down.

2.onClick: A MouseEvent handler function. Fires when the primary button was clicked on the pointing device.

Now lets just move to its practical useCase.

So basically there was a input placeholder and i had to add the ❌ icon inside placeholder which would clear the input if there was any value typed in the input placeholder and the ❌ icon should only be shown if the input is focused (onFocus) and icon should be hidden if focus is removed from input box (onFocusOut) . I made this functionality by adding onFocus and onFocusOut to my input and added onClick event to my cross icon to clear the value .

But the problem that was occuring was when i did onFocus and typed something the ❌ icon was appearing but when i clicked on that ❌ icon instead of triggering functionality of on Click onFocusOut was triggered. So i got to know about onMouseDown and i had to do e.preventDefault which solved my problem.

Hope you understand the useCase and if u want to see the exact implementation in code i will show u just comment in this post.

Happy coding.

Note: In react/next onFocus and onBlur is used as replacement of onFocus and onFocusOut