Tag: react
-
Apple Pay Icon rounded corners are broken in React Native and Skia
This could happen to any other icon. It turned out that since Skia’s SVG renderer is a subset of the browser SVG rendering. In our case, the issue was that the elements do not inherit the fill of their parent, leading to a ract that is usually transparent to be rendered in black (the default…
-
Environment Variable is set but I cannot get it from process.env in a react app in production
The WTF Ever got the case where you console.log(process.env) and you see your env variable right there, with the right value, but when you do console.log(process.env.YOUR_VAR) you get a mere empty string? Here’s my story on how I shot myself in the foot and needed 3 days to figure out why my env variable was…
-
See the actual code that makes React Router Serve work
If you run npx react-router reveal in your project with React Router 7+, it will create an entry.server.tsx and an entry.client.tsx file that define how react-router serve works by default for your app.
-
A Prisma DB Entry is Missing a field (or it has the value of another field)
I have a remix.run project that uses Prisma and Sqlite for the DB. At a point, I got an entry from the DB, where one of the fields had the value of the other field. The other field had no value, whatsoever. Example: an entry with location and startTime, both strings: the location had a…
-
How to use a Remix form with an action without following its URL
I’m relatively new to remix.run and try to follow the best practices (e.g. use forms for everything). Today I wanted to have a form for an action that does not update the URL. If I kept it with the default form, refreshing the page would lead to an error because I didn’t want to add…
-
VSCode Tip of the Day – Go to References
You can see all the locations in your project that use a React component (or a function), by right-clicking its definition and pressing “Go to References” And a shortcut I need to learn to use more often is Shift+F12 for it 🙂
-
Expo run:ios fails with something went wrong in the podfile (in VSCode terminal)
I was trying to create a dev build for an expo app locally by running npx expo run:ios, but this kept failing with the following error: After some time spent debugging, installing a newer ruby version, re-installing cocoapods and nuking whatever cache I could think of, it turned out to be due to the VS…
-
Debugging React Unit Tests in a Monorepo with NX
After using NX for over a year, it’s frustrating that there is very sparse documentation on debugging with VSCode or using it with React. I finally decided to dig into setting up my debugging profile for our unit tests (because I was fed up with console.log – ing them). I found this YouTube video by…
-
Translating strings containing html with react-i18next
We do a lot of React and a lot of translating. Our library of choice for internationalization is react-i18next. Recently we faced a challenge – we needed to render a text with dynamic text inside (based on local variables) but also needed some extra formatting – like a bold text of these specific values. When…
-
Adb reverse gives the error: more than one device/emulator
When debugging a ReactNative app on a physical Android device, one can get an error that the device cannot connect to Metro. Usually, the error is related to the port forwarding not being set up (the laptop port 8081 should be exposed to the device port 8081). When you have more than 1 device connected…