DEV Community: Lem Dulfo

React Native: Android Studio Build Failing

Lem Dulfo — Sat, 26 Apr 2025 17:56:06 +0000

I'm currently primarily working in React Native, and a lot of the time, I use the command line to launch the app, for Android it's react-native run-android

Sometimes though, you need to launch the app through Android Studio. For example when you want an easy way to see Logcat logs.

I ran into this issue where the app was building properly through the command line, but failing in Android Studio.

This is odd, because behind the scenes, both the command line and Android Studio use the same tools.

One of the build errors mentioned react-native-vector-icons, and I found this issue on their Github: https://github.com/software-mansion/react-native-svg/issues/1723

It mentions react-native doctor and JDK 17. The thing is, running this in command line, where the build is already succeeding, will most likely show that you have the correct version of JDK.

Could it be that Android Studio was using a different JDK version? Let's check.

It was using JDK 21 for some reason. I changed it to JDK 17 and the build succeeded.

So there it is, here's some things I learned:

react-native doctor is available, I didn't know about it before
Android Studio runs a different environment from your command line
Error messages can sometimes mislead you, treat them as a clue instead of a fact

Real World Experience: Github Copilot Edits

Lem Dulfo — Tue, 11 Feb 2025 21:42:17 +0000

Will AI replace developers? Maybe. But for now, it augments developer productivity.

For example, in our React Native codebase we were replacing occurrences of fontSize, fontWeight, and lineHeight with something from a pre-defined object, like textStyle.title, which contains all 3 attributes.

It was repetitive, so why not ask GitHub Copilot Edits to do it for us?

Here's how it works: you write the instructions in .github/copilot-instructions.md, then you "chat" with Copilot to do the thing. Simple.

Could it be done without the use of AI? Of course! We could have spent some time writing a script. The catch: you'll have to capture your thoughts as code.
(Okay, let's ignore the fact that I just described what a programmer is literally paid to do... 😅)

With AI, you write your thoughts down as natural language, and watch the magic happen.

Don't sleep on it, here's the documentation: https://code.visualstudio.com/docs/copilot/copilot-edits

2025: Where I Am / Where I Want To Be

Lem Dulfo — Tue, 28 Jan 2025 00:59:28 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

Distributed by Design

I don't know when I started the format "where I am and where I want to be", but I found a journal entry as early as 2018. It included "Remote work". I've wanted to be a digital nomad ever since I heard the term. I finally work for a company where one of the tenets is Distributed by Design, but fear has kept me from "doing the thing", coming up with some excuse or other.

Yesterday, I arrived in Brazil, fresh from Toronto where we celebrated Clio's Team Day 2025.

I'll be here for a few months, where I get to escape Canadian winter. Oddly enough, I still don't think "digital nomad" applies to me.

Where I Am

1200+ DEV.to followers
not much of a YouTube dev presence
only learning when I feel like it

Where I Want To Be / What I Want To Do

participate in more DEV challenges
make time for learning intentionally
present at Dev Talks
attend more in-person events (hmm... maybe even in Brazil)
improve communication and presentation skills
finally release my "deconstructing React Native" series of articles and YouTube videos
attend React Native Universe Conf
ask for help

Looking at that list, it seems like a lot. I would really need to be more disciplined so I can achieve my goals. I need to remind myself to give myself some grace.

Annual Reminder: Brag About Your Work

Lem Dulfo — Tue, 07 Jan 2025 17:54:03 +0000

I work with one of the authors of 7 More Languages in 7 Weeks. Yesterday, I did a drive-by code review on her pull request, suggesting we implement the Strategy Pattern instead of the mishmash of .includes and === checks everywhere in our codebase.

It's starting to look like we need a Strategy pattern (?) for region, such that we can just do:
RegionStrategy.for(currentState.region).hasAwesomeFeature();
Instead of the current approach
    const regionsWithFeature = ['OR', 'TX', 'PI'];
    return regionsWithFeature.includes(currentState.region);
// and other includes or ===, etc variants all over our code

She replied, "Awesome idea, I'm going to implement it."

I was privately gushing to my friends about how awesome it felt to be seen by "a great". But I didn't want to seem braggy and pompous to the greater dev community, so I didn't write an article about it.

This morning, I examined myself -- why not write the article? Why hide? Why suppress the feeling of being validated? After all, this is one of my whys for being a dev: the recognition by my peers that I know my stuff.

Bragging

It is January again, the start of another 6 month cycle. A performance cycle just ended, and many of you were asked to write a self-assessment. What did you achieve in the past 6 months? Did you have anything to write?

Here's a tip from my favorite manager: Keep a Brag Document.

It wasn't an original thought, and many have written about it.

Julia Evans - Get Your Work Recognized
r/webdev - why a brag doc is indespensable
r/ExperiencedDevs
hackerone - Why I Keep A Brag Document
Fountain Institute - Keeping Track of Your Accomplishments

Takeaway

Don't be shy. Be proud of your work. Remind yourself why you're doing what you do, and why you love doing this.

Pop Quiz: Is There a Bug in This React Native Component?

Lem Dulfo — Mon, 06 Jan 2025 21:38:53 +0000

The code below has no IDE or compiler warnings, but is there a bug?

const MyComponent = (props: MyComponentProps) => {
  const {loading, error, data} = useQuery(GET_ALL_USERS);

  useEffect(() => {
    props.onLoadingStateChange(loading);
  }, [loading, props]);

  return (
    <UserList
      {...props}

Take a moment to look at the code and think about it.

Click to Reveal the Answer
Answer: Yes! Kind of.

(If you answered yes, consider your answer correct.)
Technically, it's not a bug but a subtle performance pitfall.

Because the useEffect depends on props, it the side effect will run when any attribute inside props has changed.

The fix:

  const { onLoadingStateChange } = props; // destructure, so the dependency array is more specific
  useEffect(() => {
    onLoadingStateChange(loading);
  }, [loading, onLoadingStateChange]);

💬 NOTE
This might seem like a contrived example that doesn't happen in real life, but I assure you: seeing this during code review prompted me to write the article.

Did you get it right? Please don't spoil the answer in the comments.
❤️ - you got it right
🤯 - didn't get it right, but learned something

Function Naming: When It’s Called vs What It Does

Lem Dulfo — Tue, 24 Dec 2024 23:41:24 +0000

Naming functions might seem trivial, but it can significantly impact readability and maintainability. One common dilemma is whether to name a function based on when it’s called or what it does. Let’s explore this with a simple example.

Example: Showing a Popup

Suppose you have a function that shows a popup when a button is pressed:

const onButtonPressed = () => {
  popupInstance.show(LENGTH_LONG);
};

<Button onPress={onButtonPressed} />;

The function name onButtonPressed clearly reflects when this function is called – in response to a button press.

But what if you also need to show the same popup when the page loads?

// other initialization code...
onButtonPressed();

Now we have a small mismatch – the function name implies a button press, but we're calling the function even if no button is pressed.

An Alternative Approach: Name it Based on What it Does

Consider renaming the function to reflect what it does, not when it’s called:

const showPopup = () => {
  popupInstance.show(LENGTH_LONG);
};

When the button is pressed:

<Button onPress={showPopup} />;

When the page loads:

// other initialization code...
showPopup();

This small change improves clarity. It’s immediately obvious that the function shows a popup, regardless of the trigger.

When is ‘When It’s Called’ Appropriate?

Naming functions based on when they are triggered (onPress, onSubmit, onScroll) is perfectly fine. In fact, it’s often preferred for handlers tied to specific events.

However, as functionality grows and the same logic needs to run in different contexts, consider transitioning to names that describe what the function actually does.

The Takeaway

It’s okay to start with “when it’s called” names. Just be open to renaming functions as their use evolves. Let function names reflect their true purpose, making your code easier to read and reuse.

Solved: npm or yarn install node_modules is too big

Lem Dulfo — Fri, 20 Dec 2024 20:31:46 +0000

TLDR: It might be your node_modules hoisting limit configuration. Run yarn config get nmHoistingLimits

Background Context:

A colleague's local environment was generating a different licenses.txt file than what our CI system was generating, so his pull requests kept failing in CI.

licenses.txt is important when releasing a React Native app to the public, like Apple App Store or Google Play Store, especially when including MIT-licensed packages. Otherwise, your company might be held liable for improper attribution.

Process of elimination, we compared our environments:

same: license-checker npm package
same: yarn.lock
same: nodenv, node, and yarn versions
same: .yarnrc
different: yarn install speed
different: string searching node_modules for one arbitrary library @babel/code-frame library yielded 100 results for me, and 400+ for him

It didn't initially make sense that the same package.json would behave differently, when our node and yarn were the same versions, and even our .yarnrc

Not knowing how to proceed, I described my problem to Chat GPT and it gave me this command to try:

yarn config list

We ran this and found out that my config had this, and his did not:

nmHoistingLimits: 'workspaces'

Hope this helps!

Idle MMORPG with DevCycle Feature Flags 🧝‍♀️

Lem Dulfo — Thu, 19 Dec 2024 10:51:28 +0000

This is a submission for the DevCycle Feature Flag Challenge: Feature Flag Funhouse

What I Built

For this challenge, I built a role-playing game in React Native where players remit their mined gold to their faction's bank and collectively unlock features. The more players a faction recruits, the faster that faction can buy feature upgrades.

Welcome to Feature Factions, where the fate of three ancient races rests in your hands! Will you join the precise and mechanical Aetheron, the resilient and cunning Bessari, or the mystical and graceful Calenwyn? Mine resources to fuel your faction’s treasury—the Aetheron Central Node 🤖, the Bessari Guild Vault 🧑‍🏭, or the Calenwyn Sylvan Reliquary 🧝‍♀️. Work with your allies to unlock powerful upgrades and strategize for the ultimate showdown. The war is coming—#StopPretending 🧙and #StartShipping 🚀

Demo

These are original sprites I designed, inspired by Realm of the Mad God.

For the first "upgrade", all Factions get a baseline option.

I used Permission Feature Flags, and gated based on the UserFaction property. The Bessaris get Configuration 2:

My Code

https://github.com/bytehala/feature-factions-rpg

My DevCycle Experience

A rocky start, but overall good.

I followed the React Native quickstart, and I kept getting UserError: Invalid SDK key provided when I used the mobile SDK key.

To debug this, I installed the DevCycle CLI and worked to rule out React Native as the source of the error. This led me to discover the dvc keys get command, which showed the same keys I was seeing in my dashboard. Interestingly, the client key worked in my React Native app, but the mobile SDK key did not.

The DevCycle documentation that I needed for React Native, CLI, and the Management API are quite thorough. I like that the CLI is available, as well as the Management API. These allowed me to quickly test features and contextualize DevCycle feature flags outside of my Feature Factions code without having to scaffold a brand new app.

# Getting an auth token in the command line via cURL:
curl --request POST \
  --url "https://auth.devcycle.com/oauth/token" \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=client_credentials \
  --data audience=https://api.devcycle.com/ \
  --data client_id=<client id> \
  --data client_secret=<client secret>

I also like that the client app can identify with DevCycle using custom data. It opens up possibilities such as the app "asking" for features because of an on-device trigger or threshold that gets reached, for example, if the user has interacted enough times with the app, it can ask the backend if there are newly configured features or rewards.

In Feature Factions, I used customData to send the user's faction to DevCycle:

devCycleClient.identifyUser(
    {
      user_id: 'test-user',
      customData: {
        userFaction,
      },
    }
);

I then grab the available upgrade options for that faction, which I use to populate the button choices:

  const {options}: {options: string[]} =
    useVariableValue(variableKey, {options: []});

And that's how we can use DevCycle feature flags to dynamically control upgrade options that players can vote for in their faction. Think of all the possibilities!

The diagram below illustrates how a backend service would enable features for Factions when they reach a Gold threshold or other conditions:

Since this is a POC, I didn’t create an actual backend integration with DevCycle, I just used DevCycle Dashboard directly. However, I was able to simulate the backend functionality by using a cURL command to enable features for the Factions, thanks to the DevCycle Management API.

This was a fun challenge overall, and the prompt really made me think of feature flags in a new light.

2024 Update on DEV.to Monetization: REMOVED

Lem Dulfo — Wed, 18 Dec 2024 21:51:14 +0000

The Payment Pointer and micropayments to your DEV.to articles are a thing of the past.

Actually, it has been removed since November 2023.
https://github.com/forem/forem/issues/20401

I'm writing this article because the internet is littered with articles about how to get micropayments when writing for DEV.to and other platforms, and it currently takes a bit of digging to find out that those articles are outdated.

So yes, Coil is no longer operational. DEV.to monetization using micropayments has been removed. You can no longer set your payment pointer in your DEV settings https://dev.to/settings/misc

The original article should be deprecated https://dev.to/devteam/dev-is-now-web-monetized-21db.

I hope this gets surfaced, so others can save time and heartbreak.

As for me, I'm still writing down my learnings in hopes of helping others but mostly my future self, because it's easy to forget things when you don't write them down.

IDE Warning When Calling Async Function with No Await

Lem Dulfo — Fri, 06 Dec 2024 23:41:47 +0000

When should it be okay to not have an await for an async call?
Sometimes, I just want to call the async function, but not have to wait for its result. You might want your code to keep going, without needing the return value:

Thing is, the IDE will show a warning. It also signals to other devs in your team that "something may or may not be needed to be done for this warning". The worst that could happen is someone else tries to "fix" this by adding an await, and it slows down your app.

But if you're sure you're not waiting for the result and you want to signal to the IDE and your team that it's okay, here's what you can do.

Receive the result in _, which is generally accepted as a prefix for unused variables.

This way the IDE knows that you're aware that something is being returned, in this case it's a Promise, and that you're okay with not doing anything with the result.

This also keeps the visual tidy, while telling your teammates the intent. They won't be adding an unwanted await.

patch-package with Artifactory

Lem Dulfo — Thu, 07 Nov 2024 16:51:28 +0000

yarn patch-package packagename fails with 401 Unauthorized, npm run patch-package doesn't help either.

This usually happens when your company self-hosts packages, in our case with JFrog artifactory, but it can be other registries.

When patch-package fails with 401 Unauthorized for private registries, even if your command line is configured with the Identity Token, you can run this instead:

npx patch-package packagename

Source: StackOverflow Answer

Your Apple App Site Association Might Be Wrong

Lem Dulfo — Fri, 11 Oct 2024 23:21:51 +0000

Let's talk about .well-known/apple-app-site-association. Are you sure you need an empty apps array? What about paths, did you remember to duplicate it to the components array?

If you're new to iOS development like I am, you know how hard it is to know if you're configuring this file right. Are wildcards allowed? Why is this property here? Should I host this in each subdomain?

Misconfiguring the AASA can cause your app's handling of universal links to behave inconsistently. Turns out, there is a right way to do it, it's just not very well documented.

https://forums.developer.apple.com/forums/thread/129460

I can tell you my team's AASA file had some deprecated attributes. Check the video out and compare it to your current association file.