DEV Community: Pablo Gomez-Echegaray

Sharing how I overcame my struggles trying to setup React Native in a monorepo! Hope it helps!

Pablo Gomez-Echegaray — Thu, 17 Apr 2025 19:31:30 +0000

Pablo Gomez-Echegaray

Apr 17 '25

Setting up React Native Monorepo With Yarn Workspaces (2025)

#reactnative #monorepo #mobile #javascript

Comments 1

5 min read

Setting up React Native Monorepo With Yarn Workspaces (2025)

Pablo Gomez-Echegaray — Thu, 17 Apr 2025 18:50:44 +0000

Disclaimer: This article is revised version of this great Callstack article. It seemed some things were outdated so I wrote this to share how I got a 0.78 React Native project working with yarn workspaces in 2025. Enjoy!

What is a monorepo?

A monorepo is a single repository that holds a multitude of projects with all their code and assets. While the projects can be related, they can be used independently by different teams.

Working with monorepos is very useful, especially when developing big and complex applications like super apps. Monorepos enable sharing the logic between a web app and a mobile app, for example.

In this article, we’re going to set up a basic structure for a monorepo in React Native.

Why use monorepo in React Native?

Thanks to react-native-web we can share every component so there’s no need to duplicate the code many times. This means easier dependency management, shorter CI times, and better collaboration between teams since the code can be shared.

The main advantage though is the possibility of sharing packages between React and React Native. Most of the time we decide to share only business logic, but thanks to React Native Web, we can also share some of the UI components.

Setting up Yarn workspaces

While setting up a monorepo, we have two options: we can either hoist the packages to the root level or prevent them from hoisting. Yarn workspaces have an option named nohoist which allows us to specify packages that aren’t hoisted. It depends on your use case but most of the time it’s better to hoist packages to the root level.

Alternatively, you can use npm workspaces, it should work the same.

Why it’s better to avoid using nohoist

Preventing packages from hoisting takes back the main advantage of monorepos which is sharing node_modules between repositories. When nohoist option is turned on, most of the time packages are duplicated inside the root level node_modules and inside the project level node_modules. Downloading packages multiple times can lead to longer CI/CD runs and higher costs.

Rearranging the project structure

In order to set up yarn workspaces, we need to restructure our project to suit the structure below. Projects need to be divided into separate folders and we should have root level package.json

your-project
    packages
        web // <- React app
        mobile // <- React Native app
        shared // <- Shared (includes files shared between mobile/web)

Next, you should create a package.json file in the root directory of our project with this command: $ yarn init -y

It should look like this:

{
  "private": "true",
  "name": "example-app",
  "version": "1.0.0",
  "workspaces": [
    "packages/*"
  ]
}

Note that private: true is required because workspaces are not meant to be published.

In the workspaces section, we define a work tree. We can pass there an array of glob patterns that should be used to locate the workspaces. So in the example above, every folder inside packages is defined as a workspace.

Creating a React Native project

Use command below to create a React Native project inside the packages folder:

npx @react-native-community/cli@latest init AwesomeProject

In order for our app to work in a monorepo structure, we need to make sure that config files are pointing to the root level node_modules due to package hoisting.

iOS setup

Regenerate Pods, by entering the command below in the packages/mobile folder:

cd ios && pod install

Android setup

Note: At the time of creating this project, 0.78.1 was the latest version of RN. The Callstack article has steps for older versions.
In top-level build.gradle add this:

allprojects {
    project.pluginManager.withPlugin("com.facebook.react") {
        react {
            reactNativeDir = rootProject.file("../../../node_modules/react-native/")
            codegenDir = rootProject.file("../../../node_modules/@react-native/codegen/")
        }
    }
}

and inside: packages/mobile/android/settings.gradle

- pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
+ pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
- includeBuild('../node_modules/react-native-gradle-plugin')
+ includeBuild('../../../node_modules/react-native-gradle-plugin')

Configure Metro

We’re almost done with setting up the project. The last thing in the React Native app is to add watchFolders so metro knows where the linked node_modules are. The shared modules are symlinked by Yarn, and Metro started supporting symlinks from version 0.75.1, effectively being shipped with React Native 0.72.

Regardless of whether you are using symlinks, metro still requires us to list symlinked modules in the config, but this might change in the future. You can follow the discussion on GitHub.

const path = require("path");

// packages/mobile/metro.config.js
module.exports = {
  // ...
  watchFolders: [
    path.resolve(__dirname, '../../node_modules'),
    path.resolve(__dirname, '../../node_modules/@example-app/shared'),
  ],
};

Ready!

Install your dependencies with yarn in your monorepo's root directory. You should see all your dependencies in the root node_modules folder like so:

And the mobile/node_modules folder should only contain a .bin folder:

I recommend adding a clean script to your root package.json to help clear stubborn modules:

  "scripts": {
    "clean": "find . -type d \\( -name \"node_modules\" -o -name \".kotlin\" -o -name \".gradle\" -o -name \"build\" -o -name \"Pods\" \\) -prune -exec rm -rf {} +"
  }

Then start your server with:

yarn workspace mobile start

And build your iOS or Android with their respective scripts:

yarn workspace mobile ios

yarn workspace mobile android

To sum up

Setting up a monorepo can be tricky, but it pays off in the long run! You can easily share all of your code and assets between React and React Native.

Using a monorepo is growing in popularity - there is even an open proposal to migrate react-native repository to monorepo. Find out more about React Native monorepo on github.

What changed from 2022

Creating React Native Project:
- react-native-template-typescript is deprecated. Switched to @react-native-community/cli .
iOS Setup:
- Did not edit paths in Podfile since there were no require_relative statements.
- Did not edit WITH_ENVIRONMENT and REACT_NATIVE_XCODE paths since they already responded to the React Native path:
```
set -e

WITH_ENVIRONMENT="$REACT_NATIVE_PATH/scripts/xcode/with-environment.sh"
REACT_NATIVE_XCODE="$REACT_NATIVE_PATH/scripts/react-native-xcode.sh"
```
Android Setup:
- Did not uncomment the line in packages/android/app/build.gradle
- Updated codegenDir path. "../../../node_modules/react-native-codegen/"module moved to "../../../node_modules/@react-native/codegen/"
- Didn't add the apply from line to settings.gradle since it was causing the build process to hang.
- Updated includeBuild path in two places. (not sure if necessary).
- Didn't include the steps for < RN 0.71 since I didn't try them.
Metro Configuration:
- Didn't include unstable_enableSymlinks. Might be deprecated since it didn't have an effect.

Solución: Android Emulator no cabe en la pantalla

Pablo Gomez-Echegaray — Sun, 22 Dec 2024 18:52:10 +0000

Fuente: https://www.youtube.com/watch?v=oZdXk0-7_W8&ab_channel=TheDebugArena

En File Explorer, encuentra:
C:\Users\AppData\Local\Android\Sdk\emulator\qemu

Encuentra el emulador que estabas usando.
Para mi, era: windows-x86_64
Abre ese directorio y haz click derecho a: qemu-system-x86-64
Haz click en "Properties" y vete a la pestaña de "Compatibility".
Marca la caja que dice "Override high DPI scaling behavior" y selecciona a "System" en el menu desplegable.

Aprieta a OK y despues a Apply.

Ahora, si empiezes de nuevo el emulador, debe ser del tamaño correcto.

Solution: Android Emulator is too big and wont fit on screen -Windows 10

Pablo Gomez-Echegaray — Sun, 22 Dec 2024 18:32:07 +0000

Source: https://www.youtube.com/watch?v=oZdXk0-7_W8&ab_channel=TheDebugArena

In file explorer, find:
C:\Users<user>\AppData\Local\Android\Sdk\emulator\qemu

Find the emulator you are using.
For me, it was: windows-x86_64
Open the folder and locate: qemu-system-x86-64
Right click it and go to Properties,
Go to the Compatibility Tab and click "change high DPI settings".
Check the box "Override high DPI scaling behavior. Scaling performed by:" and select "System" in the dropdown below.
Click Ok and then click Apply.

Restart your emulator and it should be correctly sized.

Solution: "Android Emulator Process has terminated" - Windows 10

Pablo Gomez-Echegaray — Sun, 22 Dec 2024 18:10:06 +0000

I was setting up my environment to work on a React Native project on a new Windows laptop. I followed all the steps in the setup guide: https://reactnative.dev/docs/set-up-your-environment

However, I got error "AVD process has terminated" whenever I tried to launch the device. I checked to make sure I had enough free space in my drive and I did have 130GB free which is more than enough. It may fail if it has less than 7.5GB of free storage.

The solution, which was not mentioned in the guide, was to download Visual C++ Redistributable.
https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170

Thank you to DrXPatt on Youtube for the solution!
https://www.youtube.com/watch?v=eeIlKz3CNmc&ab_channel=DrXPatt

My First Year in Web Dev

Pablo Gomez-Echegaray — Sat, 16 Mar 2024 04:31:54 +0000

I see you have an experience as a teacher/tutor/software developer/ web developer.
I am interested knowing more about you and the knowledge you have. In your about section "You wrote your dream is to create software and apps to promote common well-being" which caught my eye.
I have been working on a few ideas that might interest you. Let me know when you are free to chat or jump on a quick call.""/>

March 16th, 2024 marks one year since I committed to web development. Summer 2022, I graduated from my teaching credential program feeling absolutely exhausted on all levels. All I wanted was peace. So I moved back in with my parents. I worked easy part-time jobs and took some classes for fun at my local community college.

Searching for light

Peace was not easy to find however. My mom was sick and had to have heart surgery while I was still emotionally recovering from the worst couple years of my life. I started to learn JavaScript for fun while I was in my teaching credential program. I played Bitburner which is a game where you write scripts to earn money by running hacks on other people's servers, all in-game btw. I would spend weekends optimizing my scripts instead of grading and doing my assignments.

In my search for peace and my next phase, computer programming seemed like a good place to look.

I had completed most of a minor in Computer Science during my undergrad. With a Math B.A. and computer science, I thought there had to be something I could do with that. So my first move was to explore and see what might interest me. In November/December 2022, I started applying to software engineering internships to see if I could landing anything off the bat.

To no one's surprise, I got nothing. My skills were rough and the big tech companies were starting their big layoffs. The easy covid jobs of 2020-2021 were gone. It meant that I had to really polish my skills if I were to even have a chance. Problem was, I hadn't even picked an area to pursue and I didn't the money to go back to school or do a bootcamp. My interests thus far were android/mobile development or web dev but I was still waddling around in the dark about where to start.

The fuse is lit

Someone I had tutored at my part-time job, Manny, told me about Bay Valley Tech, a free online web development bootcamp provided for CA residents. I decided to try it out since I had made websites with Wix and Wordpress in the past. When that started in February 2023, I put web developer in my LinkedIn title just to announce my interest. But then, on March 16th, I received a message:

I see you have an experience as a teacher/tutor/software developer/ web developer.
I am interested knowing more about you and the knowledge you have. In your about section "You wrote your dream is to create software and apps to promote common well-being" which caught my eye.
I have been working on a few ideas that might interest you. Let me know when you are free to chat or jump on a quick call.

Saurav, an IT professional at my job, reached out to me about a project that he was working on. During that call, it became apparent that I wasn't qualified to do what he wanted. He asked what frameworks I was familiar with and I sheepishly confessed that I didn't know what a framework was. I quickly added that I was more than willing to learn but that I just hadn't gotten there yet.

He paused. But then he gave me a chance. He understood my eagerness and told me to learn about frameworks and talk to him again in a week. I was in! But not yet! So I crammed as much info as I could find about frameworks, I picked React, and quickly started learning the basics. The next week we met and we continued to work on the project. I enjoyed making websites with Wix, I had an opportunity to work on a project, and I had a bootcamp to teach me.

*It was at that moment that I decided to dedicate myself to making websites.
*

The following months were a blur so I'll make a list of everything that happened:

Someone reached out to me on LinkedIn to teach a highschool Web Design class (August 2023)
Helped start a coding club at my community college (August 2023)
Got an UX Writing internship @ Phils Drills through ParkerDewey (March 2023)
That internship turned into Shopify Development. (May 2023)
Attended student hackathon (April 2023)

I have a dream

It was also around here that a dream had started to take form. A dream to make a website that made it easy for people to apply for and manage their Medi-Cal. I've been on Medi-Cal all my life and I thought month-long waits for appointments, long holds on the phone, and getting bounced around was the norm. When I was hungry in college, I heard about Calfresh (food stamps) but was dismissive because I thought applying would be hassle like Medi-Cal. I discovered that Code for America had built GetCalfresh.org which made it simple to apply in 10 minutes. I was astonished. I thought,

This is the power of good web development!

I decided that I would stick with web development until this ideal Medi-Cal web app was built, even if I had to do it myself!

Community makes the stars align

After spending the whole summer learning React, I realized I had no one to talk to about it with. I went looking for React events in the Bay Area to meet others who were working with the framework. I found a React Native event in San Francisco around September/October. I didn't know anything about React Native but I said fuck it, I'll go for the exposure.

I arrive at the event and it's a presentation between two companies, Callstack and Abbott. I'm the only person there that's not from a company. It felt like I wasn't supposed to be there but everyone I talked to was kind and let me speak. There was even one guy, Efraín, whose family is from the same area as mine! A group of us went out for drinks afterwards and I eventually met, Steven. He told me he might have an opportunity me to do data visualization for them.

Every month I'd send him a message to check-in about that opportunity. In December, I finally got to meet him again on Zoom. I got another interview a few weeks later with another member of his team, Ryder. It was a very informal interview where he asked me about my technical knowledge, career goals, and even personal interests.

Around this time, I had started paying for a mentor, Lo, to help me guide my learning. I made so much progress on my personal projects and it really helped to have a professional to bounce ideas and concerns off of.

I heard back in Jan/Feb, that I'd been accepted and I would be starting as a Technical Resident for his team. It's currently my 4th week with Abbott and I didn't expect everyone to be so nice! Ryder, my mentor, and Steven are very understanding and helpful with getting me up to speed in the project. Since last week, I've been coming into the office (which is super close to my house!) with Efraín and he's been great at introducing me to everyone.

In January, I had also applied to the Technologists for Public Good Mentorship Program and got accepted! And my mentor, Luigi, is one of the people who built GetCalfresh.org! With his guidance, I've redesigned the CoveredCa.com mobile homepage. I'm currently learning about accessibility and performance to improve user experience on the website!

What I've Learned

Effort becomes luck I got lucky that I went to that event and met Steven who provided me this opportunity. But if I had not put in the work to learn React, build projects, and put myself out there and go to random events, that opportunity wouldn't've been offered to me. Thus, effort has the power to raise your luck.
It takes a village I would have never gotten this far without people who believed in me like Saurav, Manny, Phil (from Phil's Drills), and Steven! My mind works best when I have people that I look up to who validate me and push me to be my best self. This includes the therapists that I saw, Kyoko and Jason, from the free e-clinic at Palo Alto University.
Dreams beg to be chased I couldn't accept the fact that Medi-Cal was so hard to use while Calfresh was so easy. It actually made me frustrated. That gave me the drive to do something about it. Even now, I still get restless thinking about how its not real yet. Finding this dream made such a drastic impact on my motivation. So be stubborn and carve a path with your own god-given hands!
ADHD is REAL and requires real life-style changes I did okay in school because it gave me deadlines and consequences. They are clear signals to my brain to do what needs to be done. After you graduate, your grades become your bank account balance and your only deadline is your rent payment. So it was a huge struggle to stay focused and be productive while teaching myself. I got a work-study job at my community college that allowed me to study away from home while getting paid. On days I wasn't working, I went to the library or cafes, even on the weekends. Every day that I stayed home I felt slow, depressed, and distracted. If you have ADHD, I highly suggest figuring out ways to build an environment that tells you to focus. You have a disability that inhibits your ability to regulate your attention. We must rely on external signals to get our brains in focus.
Depression is REAL and requires real help People say your health is the best investment. Well so is your mental health. Depression would make my brain rot. It would take days or weeks to get back to feeling productive. Therapy helped me a lot with untangling the mess of thoughts in my head and clarifying where my feelings were coming from so I could address them. Nowadays I feel a lot better but I still go to therapy because its good to practice one's awareness of their emotions.
Take risks / Do stuff for yourself I had a bunch 'bucket list' type things I wanted to do but was putting off until I found a real job. But that ended up just making feel trapped. If you have the means, do something crazy once in a while. In September, I had a panic attack because I felt so trapped. So that same day, I bought a week-long trip to Mexico to see my family that I'd never met. Earlier in June or July I got my hair braided which oddly forced me to feel more confident. I also got the homies together to go to Half Moon Bay for my birthday. Life doesn't have to stop just because you're working. You work but You are not work. You are You and you must feed Your Self.

Conclusion

This year has been a wild ride. And I expect it to get even wilder from here! I hope that I will improve my ability to teach and help others. And I'm sure that I will build some cool stuff this year! Massive 'Thank You's to all my friends and mentors who've supported me through this journey!!! I hope to pay your kindness back and/or forward! Thanks for reading!

A user-centered CoveredCa.com

Pablo Gomez-Echegaray — Sat, 09 Mar 2024 23:25:37 +0000

I redesigned the CoveredCa.com mobile homepage for ease-of-use and accessibility

1. My Story: The impact of good web development & UX

I have been on Medi-Cal for as long as I can remember. Searching online for a number to call to change something about my case, calling right when they open at 8am, being told I call the wrong number, call the new number, get put on hold for 30+ mins, (repeat if it was still the wrong number). I thought, this is just how it is.

Having trouble paying for healthy food in college, someone suggested that I apply for Calfresh (food stamps). I cringed at the thought. Do I really want to go through the hassle? I'm busy enough with school. Do I even qualify? Do I really need it?

I looked online and I found GetCalfresh.org. Oh, I can apply online? "The entire application should take about 10 minutes to complete." I can do that! The prompts took me through the application, one step at a time. In 10-15 mins, I was done and I received email confirmation of my application. Within a few weeks I had my food stamps.

This is the power of good web development

2. Why

Immediately I thought, "Why isn't it this easy with Medi-Cal?". After trying to become a high school math teacher and switching careers to web development, I returned to this question and went one step farther. I asked myself, "Could I do for Medi-Cal what GetCalfresh.org did for food stamps?".

I learned that affordable healthcare programs are much more complex than food stamps. But there had to be something I could do.

The Technologists for Public Good organization had launched their mentorship program at the beginning of this year. I applied, got in, and was matched with Luigi Ray-Montañez, one of the people behind the development of the GetCalfresh.org website! He agreed that I might be biting off more than I could chew but that I could start by cloning the CoveredCa homepage and making changes along the way.

While I was working on it, questions started to pop into my mind: "Why is this form even here?", "Why is this page so long?", "What's the point of this section?". The more I questioned the design of the page, the less I was motivated to code.

3. The Process

I finally said, "To hell with the code, I'm gonna redesign it. I'm no good at Figma so I'll just draw it out and see what I come up with".

The Issues

I started by going through the page section by sections, collecting my thoughts what I did and didn't like.

Here's what I ended up with:

Language Options
- Language Options hard to find
Replace Form with Link to Form
Is Your Medical Coverage ending
- bold “Is your medical coverage ending” instead of “set your plain in motion”
Our Coverage Options
- No Aria Labels?
How Can We Help You?
- Title/Elements non-semantic
- Could ul instead of div?
- “Click below for Answers to” or “FAQ”?
How to Get Covered
- Too much space
- left align, minify icons/change icons, less space between
Health Plans for Small Business
- redundant?
Dates and Deadlines
- Today’s Events has permanent “events”
Ready to care for your health
- -redundant?
Chat not tab-selectable on desktop

After this, I noticed I still was having trouble coming up with a design that would address it all and be good. So I decided to identify the main functions of this website.

"What do I need to be able to do on CoveredCa.com?"

I went section by section again and whenever I saw a section that addressed something new, I added it to the list. Here's what I got:
A: Explore Plans
B: Apply/Check eligibility
C: Assess if coverage ending/renew coverage
D: Change my Plan
E: Report Changes

With this, I had a new target. Address these 5 functions in as few sections as necessary. But how do I do that? I'm no designer, so I looked to GetCalfresh.org for inspiration.

The Product

Luckily, I could rip most of the sections straight from CoveredCa or GetCalfresh and make minor adjustments to some of them. I showed the sketches and notes to my mentor, Luigi, and he liked them and encouraged me to Figma it out so people can compare side by side the effects of my changes.

4. The Result

Check out the full design here

I won't go over all the changes but I'll boil it down to a few types:

Redundant Sections: I removed sections, such as "How to Get Covered", "Health Plans for Small Businesses", "Ready to Care for your Health", that had information that was already contained in other sections.
Merged Sections: Some sections were highly related to each other so it made sense to combine parts of them to make one concise section. See "Dates and Deadlines" and "Never miss a deadline", "Our Coverage Options" and "How Can We Help You? > Transition to Another Program".
Additions: The function to "Report A Change" was addressed in a hard to find link and it lead to a wall of text that is difficult to digest. So I made it its own section with a video. I also added the Translate and Chat buttons from the GetCalfresh website, which were issues on CoveredCa.com.

The Results

The new design occupies 50% less space (or less if I did something about the footer), the new design has 5 sections compared to the 9 in the original, has improved accessibility features (translation and chat), and communicates all the same information.

Reflection

I started this journey as web developer and I knew I wanted to learn about UX as well. But I never knew I could do both and how closely related they were in the process of creating a new website. This is like taking glimpse at my future as a human-centered web developer.

My next steps are to investigate the performance issues with the mobile site (run a Lighthouse report on CoveredCa.com if you're interested).

Note to anyone from CoveredCA or Medi-Cal if you're reading this:
I do NOT hate you! I think y'all are AWESOME for even having a website and it's clear that y'all have poured a LOT of work into it! As you can see, these are just minor suggestions from newbie that wanted to do a personal project related to their interests. Maybe one day I'll get to work for y'all!

Much love if you made it this far! Thanks for reading :)