Forem: Emily Xiong

Google Cloud Group DevFest Toronto 2025 - The Most Chaotic Conference I've Ever Been To

Emily Xiong — Sun, 16 Nov 2025 01:30:43 +0000

Today I went to the Google Cloud Group DevFest 2025, and to be very honest, this might be one of the most CHAOTIC conferences I’ve ever attended.

Tickets were only around $40 per person, which is definitely on the cheaper side for conferences, and I understand that running an event is hard. Things happen. Hiccups are normal.

But this conference had every type of hiccup. I think I saw the entire bingo card.

🔥 Chaos Outside the Venue

The event took place at the Sheraton in downtown Toronto. Before we even got inside, there were pro-Palestine protesters outside, handing flyers to attendees. That already set a pretty tense mood.

Then, less than five minutes into the first talk, an attendee — who was also part of the protest — stood up and loudly accused Google of committing genocide. The opening keynote was interrupted almost immediately.

It was unfortunate, and it definitely derailed the flow.

🔧 Chaos Inside the Venue

Once the talks resumed, the technical issues started:

Projectors not working
Audio glitches
Video not loading
Microphones cutting out
Laptops running out of battery

It truly felt like every few minutes something went wrong.
And I’ve been to a lot of AI and dev events in Toronto — this was the highest number of hiccups I’ve seen in one day.

🤖 The Content: More Inspiration Than Developer

Since this event is called DevFest, I expected more technical content — something more “nitty-gritty” about developer tools or developer experience. I use Gemini CLI daily to vibe-code, so I already know the power of these tools.

But most talks felt more like inspirational speeches geared toward the general public, not developers. There weren’t many real demos or deep dives. And one talk suddenly pivoted into blockchain, showing a slide that said “AI + Blockchain + Cloud”, but without explaining any real practical use case. It honestly felt like buzzword soup.

🎓 A Lot of Students and Job Hunters

Another thing I noticed: the crowd was filled with students and job seekers.
Which makes sense — tickets were cheap, and the job market in tech is rough right now.

I was job hunting earlier this year, and I know how hard it is in this economy. Everyone is hustling, trying to network, trying to catch opportunities wherever they can. So I really felt for them.

But it also made the event feel less like a hardcore developer conference and more like a general-interest community event — more inspirational, less technical.

🧩 Final Thoughts

Overall, DevFest 2025 ended up being an interesting experience, but not in the way I expected. Between the protests, interruptions, technical problems, and the high-level content, it didn’t feel very developer-focused.

Am I glad I went?
Yes — it was definitely memorable.

Would I go again next year?
Probably not.

My Field Guide to Toronto Tech Bros

Emily Xiong — Fri, 19 Sep 2025 03:43:26 +0000

I’ve been meaning to write this blog for a long time.

I went to a lot of in-person tech meetup events in Toronto — and honestly, I usually have a fantastic experience. I met incredible people, had deep conversations, and built some great connections.

But… you can’t go to so many big tech events without running into at least a few Tech Bros.

I don’t mean that as an insult. Some of them were probably just having an off day, and I’m sure they’re perfectly nice in other contexts. But some of these encounters were so surreal, I can’t not share them.

So here’s my field guide to the Tech Bros of Toronto — six types I personally met this year.

1. The Egotistical Startup Founder

I get it: you need a certain personality to be a startup founder. You have to be confident, maybe even a little bit egotistical.

At one event, I met a group of founders — the COO, CEO, and CTO of a startup. Their business model sounded a little convoluted, so naturally I asked a few follow-up questions.

Before I could get far, the CEO stopped me and asked:

“Are you an investor? Are you interested in investing in our company?”

When I said no — because I’m just a developer at the “bottom of the food chain,” not a VC — he literally walked away.

At tech conferences, my favorite thing is to stop at startup booths and listen to pitches. I find them pretty inspiring. At a large conference, I stopped at a startup booth. The founder was glued to his phone, no demo set up, no laptop out. When I asked what his company did, he shrugged and said he had already gotten funding, and he was only there because the VC asked him to show up.

He wasn’t networking. He wasn’t pitching. He just didn’t want to be there.

That conference is pretty big, and I know from other startups that it is not cheap to rent a booth. There were other startups eager to pitch and get the most value out of the money. To him, it felt like: “I got my money. Career journey over.”

Statistically, about 90% of startups fail. But every founder I meet seems absolutely sure they’re part of the lucky 10%. And honestly — I wish them the best of luck.

2. The Judgmental Tech Bro

Then there are the ones who size you up in the first ten seconds and decide whether you’re worth talking to.

When I was job hunting, I went to a meetup and asked someone if their company was hiring. I barely finished my introduction before he said:

“I don’t think you’re qualified.”

Even if he was right, who says that to a stranger? He didn’t want to talk to me because he thought I was unemployed and not worth making a connection with.

At a career fair, another guy opened our conversation with:

“I’m a senior developer. Don’t worry, I’m not here to take your job.”

Maybe he assumed I was a new grad because I look young — but I actually have work experience. And trust me, I was not worried at all. These guys just can’t resist gatekeeping.

The Judgmental Tech Bros are quick to assume, quick to dismiss, and quick to put you in a box.

3. The Finance-Obsessed Tech Bro

There are people who think because they have a job and you don’t, they are better than you. Then there’s a different breed: the ones who treat casual networking like Shark Tank. And there are also people who think because their company’s valuation is higher than your company’s valuation, they are better than you.

At one event, I introduced myself and mentioned I worked at a VC-backed startup. The first question I got back was:

“What’s the funding stage of your company? How much did you raise in the last round?”

I had to Google that information. After I told him the figure, his reaction was just:

“Not bad.”

And honestly, my first thought was:

Who the hell remembers their company’s valuation?

I’m a developer. The company’s bank account has nothing to do with me. I don’t get a cut of that Series A/B/C/D/E funding.

But these Finance-Obsessed Tech Bros talk in millions and billions, act like their company’s valuation is their own net worth — and they want to measure you based on your company’s numbers too.

It’s such a weird flex.

4. The Know-It-All Tech Bro

Tech is huge. Nobody can know it all. But some people think they do.

At one event, we were supposed to pitch startup or app ideas to the people around us. I shared mine — and the guy next to me, who I had just met, immediately shut me down:

“That’s too complicated.”

No discussion. No curiosity. Just instant dismissal.

Then he pitched his idea, which was so simple I could probably build it in an afternoon using AI tools.

Maybe he was early in his career and didn’t know what he didn’t know. But I’m at the stage in life where I’m too tired to argue.

I quietly moved to another seat. Sometimes protecting your peace is better than proving your point.

5. The AI-Doombro

AI is definitely the future — and I’m not in denial about that. I’m a front-end developer, and maybe someday, when AGI arrives, my job will be automated away.

But that day isn’t today.

At one event, I met an AI engineer and his friend. I introduced myself and told them I was a front-end developer.

And they just could not stop laughing. I’m not exaggerating — they laughed for about a full minute, right in my face.

When I asked, “Why are you laughing?” he said:

“Do you think there will be front-end developers in the future?”

Maybe he’s right. But the way he said it — laughing at my entire profession — made the moment feel weirdly mean.

Maybe there won’t be front-end developers in the future, but I still need to make a living in the near future.

Even if AI is coming for our jobs someday, that doesn’t mean the work we do today is worthless.

6. The Opportunistic Tech Bro

I was job hunting and went to an event organized by a large enterprise that had plenty of job opportunities. I met a fellow attendee who was also job hunting. He seemed like he had an interesting background, and I genuinely wanted to network and learn more about his experience.

But halfway through, a corporate co-op from the host company walked in — and he dismissed me, walking straight over to network with the co-op student instead.

I respect the hustle. I get it — we’re all there to maximize our chances. But it still felt a little bad to be dropped mid-conversation just because I wasn’t “useful” enough in that moment.

Conclusion

So there you have it — my field guide to the six types of Tech Bros I met this year.

Sometimes I wish I was making these stories up — that these characters were just over-the-top stereotypes invented for comedy. But they’re not. These people really do exist.

Maybe they’re just confident. Maybe they’re “on top of the world.” Or maybe they’re just judgmental. Who am I to judge them?

Tech bros used to be a stereotype for nerds - the hoodie-wearing, pizza-eating, socially awkward coder type. But now they're starting to feel more like finance bros- focused on valuations, funding rounds, and personal status.

And maybe that's just what happens when an industry gets big. You get all kinds of people, including the ones who act like this.

At the end of the day, running into a few Tech Bros didn’t ruin any in-person meetup events for me. I still love to attend different meetups, socialize with people, and get inspired. I still met amazing people and had great conversations.

But these encounters reminded me that tech is as diverse as the humans in it — for better or worse.

Add Cypress, Playwright, and Storybook to Nx Expo Apps

Emily Xiong — Mon, 19 Feb 2024 21:18:25 +0000

Expo has first-class support for building full-stack websites with React, so I can leverage that to add Cypress/Playwright for E2E testing and add the Storybook for UI components.

In this blog, I am going to add Cypress, Playwright, and Storybook to my Nx Expo app:

xiongemi / nx-expo-monorepo

a repo showing 2 apps created by @nx/expo

NxExpoMonorepo

This workspace is created using @nx/expo (Nx and Expo).

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Workspace structure

It contains 2 apps:

cats and its e2e (cypress/playwright)
dogs and its e2e (cypress/playwright)

4 libs:

models
queries: tanstack react-query
states: redux state management
ui

Commands

nx start cats to start the cats app
nx start dogs to start the dogs app
nx build cats to build the cats app using EAS
nx build dogs to build the dogs app using EAS
nx test cats to test the cats app
nx test dogs to test the dogs app
nx lint cats to lint the cats app
nx lint dogs to lint the dogs app
npm run deploy to deploy the cats app to github page
nx e2e cats-cypress to run cypress e2e tests on cats app
nx e2e cats-playwright to…

View on GitHub

It is an app that shows a random fact about cats:

What is @nx/expo? Nx is a build system that helps you maintain and scale monorepos, both locally and on CI. @nx/expo contains generators for managing Expo applications and libraries within an Nx workspace.

I am going to go through:

How to add Cypress
How to add Playwright
How to add Storybook

Add Cypress

In this section, I am going to go through:

When I already have an existing Nx Workspace, how do I add the Expo and Cypress projects?
When I already have an existing Nx Expo app, how do I add the Cypress tests to my app?

Add a new Expo App in an Nx Workspace

In any Nx workspace, I can install @nx/expo by running the following command:

npx nx add @nx/expo

Now when I generate a new Expo app, I can simply use @nx/expo:application generator with the flag --e2eTestRunner=cyperss:

npx nx generate @nx/expo:app --e2eTestRunner=cypress

It should create the expo app and its Cypress e2e tests. I can run npx nx run <your-app-name>-e2e:e2e to run the Cypress e2e tests.

Add Cypress to an Existing Nx Expo App

Before I start, I need to make sure I can serve my Expo app for the web view. In this example, in my apps/cats/project.json, I got a serve target defined:

   "serve": {  
      "executor": "@nx/expo:serve",  
      "options": {  
        "port": 8081  
      }  
    },

So I can run the command npx nx run cats:serve to serve the app on http://localhost:8081/.

I can also use @nx/expo inferred tasks without having a serve target in project.json. In .env file, set NX_ADD_PLUGINS=true; then run the command

npx nx add @nx/expo

Then I can still run the serve command npx nx run <your expo project>:serve without a serve target defined.

Then I can set up the cypress e2e project against the web app.

First, I need to install @nx/cypress:

npx nx add @nx/cypress

Second, I create a project.json for my Cypress project. In this example, I create a project.json at apps/cats-cypress/project.json, I name the project cats-cypress:

{  
  "name": "cats-cypress"  
}

Third, run the below command to generate Cypress configuration:

npx nx generate @nx/cypress:configuration --project cats-cypress --devServerTarget=cats:serve --baseUrl=http://localhost:8081 --verbose --bundler=none

Since the serve command is npx nx run cats:serve, so the flag is --devServerTarget is cats:serve. Also, the --baseUrl is http://localhost:8081.

It should generate cypress.config.ts and a sample test:

I can run the Cypress test using the below command:

npx nx run cats-cypress:e2e

Add Cypress Tests

I change the example tests:

Now I can run the command npx nx run cats-cypress:e2e and it should pass:

 2 passing (867ms)  


  (Results)  

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐  
  │ Tests:        2                                                                                │  
  │ Passing:      2                                                                                │  
  │ Failing:      0                                                                                │  
  │ Pending:      0                                                                                │  
  │ Skipped:      0                                                                                │  
  │ Screenshots:  0                                                                                │  
  │ Video:        false                                                                            │  
  │ Duration:     0 seconds                                                                        │  
  │ Spec Ran:     app.cy.ts                                                                        │  
  └────────────────────────────────────────────────────────────────────────────────────────────────┘  


\===================================================================================  

  (Run Finished)  


       Spec                                              Tests  Passing  Failing  Pending  Skipped    
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐  
  │ ✔  app.cy.ts                                869ms        2        2        -        -        - │  
  └────────────────────────────────────────────────────────────────────────────────────────────────┘  
    ✔  All specs passed!                        869ms        2        2        -        -        -    


 —————————————————————————————————————————————————————————————————————————————————  

 >  NX   Successfully ran target e2e for project cats-cypress (15s)

Add Playwright

Alternatively, I can use Playwright to e2e test.

In this section, I am going to go through:

When I already have an existing Nx Workspace, how do I add the Expo and Playwright projects?
When I already have an existing Nx Expo app, how do I add the Playwright tests to my app?

Add a new Expo App in an Nx Workspace

In any Nx workspace, I can install @nx/expo by running the following command:

npx nx add @nx/expo

Now when I generate a new Expo app, I can simply use @nx/expo:application generator with the flag --e2eTestRunner=playwright:

npx nx generate @nx/expo:app --e2eTestRunner=playwright

It should create the expo app and its Playwright e2e tests.

Add Playwright to an Existing Nx Expo App

Similarly to Cypress steps, before I start, I need to make sure I can serve my Expo app for the web view. In this example, in my apps/cats/project.json, I got a serve target defined:

   "serve": {  
      "executor": "@nx/expo:serve",  
      "options": {  
        "port": 8081  
      }  
    },

First, I need to install @nx/playwright:

npx nx add @nx/playwright

Second, I create a project.json for my Playwright project. In this example, I create a project.json at apps/cats-playwright/project.json, I name the project cats-playwright:

{  
  "name": "cats-playwright"  
}

Third, run the below command to generate Cypress configuration:

npx nx g @nx/playwright:configuration --project cats-playwright --webServerCommand "nx run cats:serve" --webServerAddress http://localhost:8081

Since the serve command is npx nx run cats:serve, so the flag is --webServerCommand is nx run cats:serve. Also, the --webServerAddress is [http://localhost:8081](http://localhost:8081.).

It should generate playwright.config.ts and a sample test file:

For this example, I change the example test at apps/cats-playwright/e2e/example.spec.ts to:

import { test, expect } from '@playwright/test';  

test('has title', async ({ page }) => {  
  await page.goto('/');  

  // Expect h1 to contain a substring.  
  expect(await page.locator('h1').innerText()).toContain('Cat Facts');  
});

Run command npx nx run cats-playwright:e2e, and the tests should pass:

Add Storybook

To add the storybook, simply run the command:

npx nx generate @nx/react:storybook-configuration <your expo app name>

In this example, I should see in the console output:

npx nx g @nx/react:storybook-configuration cats  

>  NX  Generating @nx/react:storybook-configuration  

✔ Do you want to set up Storybook interaction tests? (Y/n) · true  
✔ Automatically generate \*.stories.ts files for components declared in this project? (Y/n) · true  

✔ Configure a static file server for the storybook instance? (Y/n) · true  
UPDATE nx.json  
UPDATE package.json  
CREATE apps/cats/.storybook/main.ts  
CREATE apps/cats/.storybook/preview.ts  
CREATE apps/cats/tsconfig.storybook.json  
UPDATE apps/cats/tsconfig.app.json  
UPDATE apps/cats/tsconfig.json  
UPDATE apps/cats/project.json  
CREATE apps/cats/src/app/App.stories.tsx  
CREATE apps/cats/src/app/bookmarks/bookmarks.stories.tsx  
CREATE apps/cats/src/app/facts/facts.stories.tsx

That is it! In one single, it should generate the Storybook for me. Run the command to see Storybook in web view:

npx nx run <your-expo-app>:storybook

It interpolates my native UI components to web components and then creates the Storybook. How does it achieve that?

In this example, it generates a file apps/cats/.storybook/main.ts:

import type { StorybookConfig } from '@storybook/react-webpack5';  

const config: StorybookConfig = {  
  stories: \['../src/lib/\*\*/\*.stories.@(js|jsx|ts|tsx|mdx)'\],  
  addons: \[  
    '@storybook/addon-essentials',  
    '@storybook/addon-interactions',  
    '@nx/react/plugins/storybook',  
  \],  
  framework: {  
    name: '@storybook/react-webpack5',  
    options: {},  
  },  
  webpackFinal: async (config) => {  
    if (config.resolve) {  
      config.resolve.alias = {  
        ...config.resolve.alias,  
        'react-native$': 'react-native-web',  
      };  
      config.resolve.extensions = \[  
        '.web.tsx',  
        '.web.ts',  
        '.web.jsx',  
        '.web.js',  
        ...(config.resolve.extensions ?? \[\]),  
      \];  
    }  
    return config;  
  },  
};  

export default config;  

// To customize your webpack configuration you can use the webpackFinal field.  
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config  
// and https://nx.dev/recipes/storybook/custom-builder-configs

Notice there is a line:

      config.resolve.alias = {  
        ...config.resolve.alias,  
        'react-native$': 'react-native-web',  
      };

It uses Webpack to bundle and alias react-native to react-native-web.

When serving up my Storybook for the first time, I have some issues and problems preventing components from rendering. Below are the issues I run into and how I troubleshoot them.

Troubleshooting

Root Element

“Full-screen React Native apps with a root <ScrollView> may require the following styles inlined in the HTML document shell.” (https://necolas.github.io/react-native-web/docs/setup/#root-element).

In this example, I do have a root element, so I need to add styles to apps/cats/.storybook/preview-head.html to make my root full height:

<style type="text/css">  
  /\* These styles make the body full-height \*/  
  html,  
  body {  
    height: 100%;  
  }  
  /\* These styles disable body scrolling if you are using <ScrollView> \*/  
  body {  
    overflow: hidden;  
  }  
  /\* These styles make the root element full-height \*/  
  #storybook-root {  
    display: flex;  
    height: 100%;  
  }  
</style>

Error: Couldn’t find a navigation object.

Because I am using the library @react-navigation/native and I use its hooks like useNavigtion and useRoute inside my component, I have this error:

The easiest way is just to mock this library and create a decorator for it. In this example, I create a Navigation Decorator at apps/cats/.storybook/mocks/navigation-decorator.tsx:

import { NavigationContainer } from '@react-navigation/native';  
import React from 'react';  

export const NavigationDecorator = (story: any) => {  
  return (  
    <NavigationContainer independent={true}>{story()}</NavigationContainer>  
  );  
};

Then I can add this decoration to my story file. In this example, I add it to apps/cats/src/app/bookmarks/bookmarks.stories.tsx:

import type { Meta, StoryObj } from '@storybook/react';  
import { Bookmarks } from './bookmarks';  

import { within } from '@storybook/testing-library';  
import { expect } from '@storybook/jest';  
import { NavigationDecorator } from '../../../.storybook/mocks/navigation-decorator';  

const meta: Meta<typeof Bookmarks> = {  
  component: Bookmarks,  
  title: 'Bookmarks',  
  decorators: NavigationDecorator, // <---- add the decorator here  
};  
export default meta;  
type Story = StoryObj<typeof Bookmarks>;  

export const Primary = {  
  args: {},  
};  

export const Heading: Story = {  
  args: {},  
  play: async ({ canvasElement }) => {  
    const canvas = within(canvasElement);  
    expect(canvas.getByText(/Welcome to Bookmarks!/gi)).toBeTruthy();  
  },  
};

Error: Couldn’t find a route object.

This issue is similar to “Couldn’t find a navigation object”, it is also related to the library @react-navigation/native.

It happens because my component is using the useRoute hook and expecting certain routing parameters. I simply need to customize the mock NavigationDecorator for my component. For example, below is a component that is expecting an id from the route parameters:

const route = useRoute<RouteProp<{ params: { id: string } }>>();  
const id = route.params?.id;

I can simply modify the mock NavigationDecorator at apps/cats/.storybook/mocks/navigation-decorator.tsx:

import { NavigationContainer } from '@react-navigation/native';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';  
import React from 'react';  

export const NavigationDecorator = (story: any) => {  
  const Stack = createNativeStackNavigator();  
  return (  
    <NavigationContainer independent={true}>  
      <Stack.Navigator>  
        <Stack.Screen  
          name="MyStorybookScreen"  
          component={story}  
          initialParams={{ id: 123 }}  
        />  
      </Stack.Navigator>  
    </NavigationContainer>  
  );  
};

Error: No QueryClient set, use QueryClientProvider to set one

This happens because I use the library @tanstack/react-query. I need to create a decorator for QueryClientProvider. At apps/cats/.storybook/mocks/query-client-decorator.tsx, I create this decorator:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';  
import React from 'react';  

export const QueryClientDecorator = (story: any) => {  
  const queryClient = new QueryClient();  
  return (  
    <QueryClientProvider client={queryClient}>{story()}</QueryClientProvider>  
  );  
};  

export default QueryClientDecorator;

In this example, my story at apps/cats/src/app/facts/facts.stories.tsx will become:

import type { Meta, StoryObj } from '@storybook/react';  
import { Facts } from './facts';  

import { within } from '@storybook/testing-library';  
import { expect } from '@storybook/jest';  
import { NavigationDecorator } from '../../../.storybook/mocks/navigation-decorator';  
import { QueryClientDecorator } from '../../../.storybook/mocks/query-client-decorator';  

const meta: Meta<typeof Facts> = {  
  component: Facts,  
  title: 'Facts',  
  decorators: \[NavigationDecorator, QueryClientDecorator\], // <---- add the QueryClientDecorator here  
};  
export default meta;  
type Story = StoryObj<typeof Facts>;  

export const Primary = {  
  args: {},  
};  

export const Heading: Story = {  
  args: {},  
  play: async ({ canvasElement }) => {  
    const canvas = within(canvasElement);  
    expect(canvas.getByText(/Welcome to Facts!/gi)).toBeTruthy();  
  },  
};

Error: Unable to load react-native-vector-icons.

I got this error when I tried to compile the storybook:

You may need an additional loader to handle the result of these loaders.  
|   
|       return (  
>         <Text selectable={false} {...props}>  
|           {glyph}  
|           {children}  
 @ ./node\_modules/react-native-vector-icons/MaterialCommunityIcons.js 6:0-50 9:16-29  
 @ ./node\_modules/react-native-paper/lib/module/components/MaterialCommunityIcon.js 8:27-94  
 @ ./node\_modules/react-native-paper/lib/module/core/PaperProvider.js 3:0-72 73:12-33  
 @ ./node\_modules/react-native-paper/lib/module/index.js 4:0-59 4:0-59 5:0-64 5:0-64  
 @ ./apps/cats/src/app/App.tsx 1:717-760 1:1882-1892  
 @ ./apps/cats/src/app/ lazy ^\\.\\/.\*$ namespace object ./App.tsx ./App  
 @ ./storybook-stories.js 1:383-427  
 @ ./storybook-config-entry.js 1:171-216 1:1789-1797 1:1871-1985 1:1926-1984 1:1972-1980

This happens because I use the library react-native-paper which depends on react-native-vector-icons.

In react-native-vector-icons, it .js files contain jsx code: <Text selectable={false} {…props}>. To solve this, I need to load the react-native-vector-icons library using babel-loader. In this example, I can add a rule to Storybook’s Webpack config:

        config.module.rules.push({  
          test: /\\.(js|jsx)$/,  
          include: /react-native-vector-icons/,  
          loader: 'babel-loader',  
          options: {  
            presets: \[  
              '@babel/preset-env',  
              \['@babel/preset-react', { runtime: 'automatic' }\],  
            \],  
          },  
        });

Then I need to also load the font MaterialCommunityIcons.ttf for Storybook:

Download the font from https://github.com/oblador/react-native-vector-icons/blob/master/Fonts/MaterialCommunityIcons.ttf to apps/cats/.storybook/public.
Add staticDirs option to Storybook configuration at apps/cats/.storybook/main.ts:

staticDirs: \['./public'\],

Add the below style to apps/cats/.storybook/preview-head.html to load the font:

<style type="text/css">  
  @font-face {  
    font-family: 'MaterialCommunityIcons';  
    src: url('/MaterialCommunityIcons.ttf') format('truetype');  
  }  
</style>

The Storybook configuration at apps/cats/.storybook/main.ts will become:

import type { StorybookConfig } from '@storybook/react-webpack5';  

const config: StorybookConfig = {  
  stories: \['../src/app/\*\*/\*.stories.@(js|jsx|ts|tsx|mdx)'\],  
  staticDirs: \['./public'\],  
  addons: \[  
    '@storybook/addon-essentials',  
    '@storybook/addon-interactions',  
    '@nx/react/plugins/storybook',  
  \],  
  framework: {  
    name: '@storybook/react-webpack5',  
    options: {},  
  },  
  webpackFinal: async (config) => {  
    if (config.resolve) {  
      config.resolve.alias = {  
        ...config.resolve.alias,  
        'react-native$': 'react-native-web',  
      };  
      config.resolve.extensions = \[  
        '.web.tsx',  
        '.web.ts',  
        '.web.jsx',  
        '.web.js',  
        ...(config.resolve.extensions ?? \[\]),  
      \];  
      if (config.module?.rules) {  
        config.module.rules.push({  
          test: /\\.(js|jsx)$/,  
          include: /react-native-vector-icons/,  
          loader: 'babel-loader',  
          options: {  
            presets: \[  
              '@babel/preset-env',  
              \['@babel/preset-react', { runtime: 'automatic' }\],  
            \],  
          },  
        });  
      }  
    }  
    return config;  
  },  
};  

export default config;  

// To customize your webpack configuration you can use the webpackFinal field.  
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config  
// and https://nx.dev/recipes/storybook/custom-builder-configs

Now I can see react-native-vector-icons are being loaded correctly for the Storybook.

Now I can run npx nx run cats:storybook and it should render the storybook for me.

Summary

In this article, you have learned how to add Cypress, Playwright, and Storybook to your Nx Expo app.

With Nx, it will help you with your Expo development process.

Learn more

Unit Testing Expo Apps With Jest

Emily Xiong — Mon, 19 Feb 2024 19:11:00 +0000

In my latest blog, I successfully navigated through the steps of setting up an Expo Monorepo with Nx. The next challenge? Testing! This blog dives into:

Crafting effective unit tests for Expo components utilizing Jest
Addressing common issues encountered during unit testing

Repo:

xiongemi / nx-expo-monorepo

a repo showing 2 apps created by @nx/expo

NxExpoMonorepo

This workspace is created using @nx/expo (Nx and Expo).

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Workspace structure

It contains 2 apps:

cats and its e2e (cypress/playwright)
dogs and its e2e (cypress/playwright)

4 libs:

models
queries: tanstack react-query
states: redux state management
ui

Commands

nx start cats to start the cats app
nx start dogs to start the dogs app
nx build cats to build the cats app using EAS
nx build dogs to build the dogs app using EAS
nx test cats to test the cats app
nx test dogs to test the dogs app
nx lint cats to lint the cats app
nx lint dogs to lint the dogs app
npm run deploy to deploy the cats app to github page
nx e2e cats-cypress to run cypress e2e tests on cats app
nx e2e cats-playwright to…

View on GitHub

Stacks

Here’s my setup

Testing framework: jest
Testing library: @testing-library/react-native
Jest Preset: jest-expo

Writing and Running Unit Tests

When you use Nx, it not only configures and sets up Jest, but also creates a default unit test for every expo component that is being generated. Here’s what that looks like:

import { render } from '@testing-library/react-native';  
import React from 'react';  

import Loading from './loading';  

describe('Loading', () => {  
  it('should render successfully', () => {  
    const { root } = render(<Loading />);  
    expect(root).toBeTruthy();  
  });  
});

To run all unit tests for a given project, use:

npx nx test <project-name>

Here’s the output of running this for my example app:

When it comes to writing tests, the React Native Testing Library is a game-changer for writing cleaner unit tests in React Native applications. Its intuitive query API simplifies the process of selecting elements within your components, making it straightforward to write more maintainable and readable tests. You mark elements with a testID

<Headline testID='title'>{film.title}</Headline>

Then in the test file, you can use the function getByTestId to query testID:

const { getByTestId } = render(<your component>);  
expect(getByTestId('title')).toHaveTextContent(...);

You can find more options for querying elements on the official React Native Testing Library docs: https://callstack.github.io/react-native-testing-library/docs/api-queries.

Troubleshooting Common Issues When Writing Tests

However, unit tests do not always pass. Here are some common errors I ran into and how to resolve them.

Error: AsyncStorage is null.

I am using the library @react-native-async-storage/async-storage, and I got the below error when running unit testing:

 \[@RNC/AsyncStorage\]: NativeModule: AsyncStorage is null.  

    To fix this issue try these steps:  

      • Rebuild and restart the app.  

      • Run the packager with \`--reset-cache\` flag.  

      • If you are using CocoaPods on iOS, run \`pod install\` in the \`ios\` directory and then rebuild and re-run the app.  

      • If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-async-storage.github.io/async-storage/docs/advanced/jest  

    If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-async-storage/async-storage/issues  

       5 | import { ReactQueryDevtools } from '@tanstack/react-query-devtools';  
       6 | import { Platform } from 'react-native';  
    >  7 | import AsyncStorage from '@react-native-async-storage/async-storage';

The issue is that @react-native-async-storage/async-storage library can only be used in NativeModule. Since unit testing with Jest only tests JS/TS file logic, I need to mock this library.

In the app’s test-setup.ts file, add the below lines:

jest.mock('@react-native-async-storage/async-storage', () =>  
  require('@react-native-async-storage/async-storage/jest/async-storage-mock')  
);

Error: Could not find “store”

I am using Redux for state management, and I got this error for my stateful components:

Could not find "store" in the context of "Connect(Bookmarks)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Bookmarks) in connect options.

To fix this, the simple way is to mock a redux store. I need to install redux-mock-store and its typing:

\# npm  
npm install redux-mock-store @types/redux-mock-store --save-dev  

\# yarn  
yarn add redux-mock-store @types/redux-mock-store --dev

Then I can create a mock store using this library like the below code:

import configureStore, { MockStoreEnhanced } from 'redux-mock-store';  

  const mockStore = configureStore<any>(\[\]);  

  let store: MockStoreEnhanced<any>;  

  beforeEach(() => {  
    store = mockStore({});  
    store.dispatch = jest.fn();  
  });

For example, one of my stateful components’ unit test will become:

import React from 'react';  
import { render } from '@testing-library/react-native';  
import { Provider } from 'react-redux';  
import configureStore, { MockStoreEnhanced } from 'redux-mock-store';  
import { RootState, initialRootState } from '@nx-expo-monorepo/states/cat';  

import Bookmarks from './bookmarks';  

describe('Bookmarks', () => {  
  const mockStore = configureStore<RootState>(\[\]);  

  let store: MockStoreEnhanced<RootState>;  

  beforeEach(() => {  
    store = mockStore(initialRootState);  
    store.dispatch = jest.fn();  
  });  

  it('should render successfully', () => {  
    const { container } = render(  
      <Provider store={store}>  
        <Bookmarks />  
      </Provider>  
    );  
    expect(container).toBeTruthy();  
  });  
});

The above code will apply the initial redux state to my components.

Error: No QueryClient set

Because I use TanStack Query , when I run unit tests, I have this error:

No QueryClient set, use QueryClientProvider to set one

This error occurred because I used useQuery from @tanstack/react-query in my component; however, in this unit test, the context of this hook is not provided.

To solve this, I can just mock the useQuery function:

import \* as ReactQuery from '@tanstack/react-query';  

jest.spyOn(ReactQuery, 'useQuery').mockImplementation(  
  jest.fn().mockReturnValue({  
    data: 'random cat fact',  
    isLoading: false,  
    isSuccess: true,  
    refetch: jest.fn(),  
    isFetching: false,  
    isError: false,  
  })  
);

Error: Couldn’t find a navigation object

If you use @react-navigation library for navigation, and inside your component, there are hooks from this library like useNavigation and useRoute, you are likely to get this error:

Couldn't find a navigation object. Is your component inside NavigationContainer?

The fix this, I need to mock the @react-nativgation/native library. In the app’s test-setup.ts file, I need to add:

jest.mock('@react-navigation/native', () => {  
  return {  
    useNavigation: () => ({  
      navigate: jest.fn(),  
      dispatch: jest.fn(),  
      setOptions: jest.fn()  
    }),  
    useRoute: () => ({  
      params: {  
        id: '123',  
      },  
    }),  
  };  
});

SyntaxError: Unexpected token ‘export’

I got this error when using a library with ECMAScript Module (ESM), such as [udid](https://github.com/uuidjs/uuid):

 /Users/emilyxiong/Code/nx-expo-monorepo/node\_modules/uuid/dist/esm-browser/index.js:1  
    ({"Object.<anonymous>":function(module,exports,require,\_\_dirname,\_\_filename,jest){export { default as v1 } from './v1.js';  
                                                                                      ^^^^^^  

    SyntaxError: Unexpected token 'export'  

       5 | import { connect } from 'react-redux';  
       6 | import 'react-native-get-random-values';  
    >  7 | import { v4 as uuidv4 } from 'uuid';

Jest does not work with ESM out of the box. The simple solution is to map this library to the CommonJS version of this library.

In the app’s jest.config.ts, there should be an option called moduleNameMapper. The library I used is called uuid, so I need to add the map uuid: require.resolve(‘uuid’) under moduleNameMapper. So when the code encounters imports from uuid library, it will resolve the CommonJS version of it:

module.exports = {  
  moduleNameMapper: {  
    uuid: require.resolve('uuid'),  
  },  
}

Alternatively, I can also mock this library in the test files:

import {v4 as uuidv4} from 'uuid';  

jest.mock('uuid', () => {  
  return {  
    v4: jest.fn(() => 1)  
  }  
})

Error: Jest encountered an unexpected token

I got this error when I was importing from a library such as react-native-vector-icons:

 console.error  
      Jest encountered an unexpected token  

      Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.  

      Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.  

      By default "node\_modules" folder is ignored by transformers.  

      Here's what you can do:  
       • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.  
       • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript  
       • To have some of your "node\_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.  
       • If you need a custom transformation specify a "transform" option in your config.  
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.  

      You'll find more details and examples of these config options in the docs:  
      https://jestjs.io/docs/configuration  
      For information about custom transformations, see:  
      https://jestjs.io/docs/code-transformation

To fix this, add this library name to transformIgnorePatterns in the app's jest.config.ts.

What is transformIgnorePatterns? The transformIgnorePatterns allows developers to specify which files shall be transformed by Babel. transformIgnorePatterns is an array of regexp pattern strings that should be matched against all source file paths before the transformation. If the file path matches any patterns, it will not be transformed by Babel.

By default, Jest will ignore all the files under node_modules and only transform the files under the project’s src.

However, some libraries such as react-native-paper or react-native-svg, the library files are in .ts or .tsx. These files are not compiled to js. So I need to add these libraries' names to transformIgnorePatterns, so these libraries will be transformed by Babel along with my project. source file. The default generated jest.config.js already has:

transformIgnorePatterns: \[  
    'node\_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.\*|@expo-google-fonts/.\*|react-navigation|@react-navigation/.\*|@unimodules/.\*|unimodules|sentry-expo|native-base|react-native-svg)',  
\]

If I have an error related to a library with an unexpected token, I need to check whether they are compiled or not.

If this library source files are already transformed to .js, then its name should match regex, so it would be ignored, so it will NOT be transformed.
If this library source files are NOT transformed to .js (e.g. still in .ts or .tsx), then its name should NOT match regex, so it will be transformed.

Summary

Here are some common errors that I will probably run into while doing unit testing. The solution to most problems is to find a way to mock a library that is not relevant to my component logic.

With Nx, you do not need to explicitly install any testing library, so you can dive right in and focus on writing the tests rather than spending time on setup.

Learn more

Add Cypress, Playwright, and Storybook to Nx Expo Apps
🧠 Nx Docs
👩‍💻 Nx GitHub
💬 Nx Community Discord
📹 Nx Youtube Channel
🚀 Speed up your CI

State Management Nx React Native/Expo Apps with TanStack Query and Redux

Emily Xiong — Fri, 16 Feb 2024 23:21:05 +0000

There are currently countless numbers of state management libraries out there. This blog will show you how to use state management for React Native in Nx monorepo with TanStack Query (which happens to use Nx on their repo) and Redux.

This blog will show:

How to set up these libraries and their dev tools
How to build the sample page below in React Native / Expo with state management
How to do unit testing

It will call an API and show a cat fact on the page, allowing users to like or dislike the data.

Github repo:

xiongemi / nx-expo-monorepo

a repo showing 2 apps created by @nx/expo

NxExpoMonorepo

This workspace is created using @nx/expo (Nx and Expo).

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Workspace structure

It contains 2 apps:

cats and its e2e (cypress/playwright)
dogs and its e2e (cypress/playwright)

4 libs:

models
queries: tanstack react-query
states: redux state management
ui

Commands

nx start cats to start the cats app
nx start dogs to start the dogs app
nx build cats to build the cats app using EAS
nx build dogs to build the dogs app using EAS
nx test cats to test the cats app
nx test dogs to test the dogs app
nx lint cats to lint the cats app
nx lint dogs to lint the dogs app
npm run deploy to deploy the cats app to github page
nx e2e cats-cypress to run cypress e2e tests on cats app
nx e2e cats-playwright to…

View on GitHub

Before We Start

From TanStack Query documentation, it says:

TanStack Query is a server-state library.
Redux is a client-state library.

What is the difference between the server state and the client state?

In short:

Calling an API, dealing with asynchronous data-> server state
Everything else about UI, dealing with synchronous data -> client state

Installation

To use TanStack Query / React Query for the server state, I need to install:

Library: @tanstack/react-query
Dev tools: @tanstack/react-query-devtools

I will use Redux for everything else.

Library: redux, react-redux, @reduxjs/toolkit
Dev tools: @redux-devtools/extension
Logger: redux-logger, @types/redux-logger
Storage: redux-persist, @react-native-async-storage/async-storage

To install all the above packages:

#npm  
npm install @tanstack/react-query @tanstack/react-query-devtools redux react-redux @reduxjs/toolkit @redux-devtools/extension redux-logger @types/redux-logger redux-persist @react-native-async-storage/async-storage --save-dev  

#yarn  
yarn add @tanstack/react-query @tanstack/react-query-devtools redux react-redux @reduxjs/toolkit @redux-devtools/extension redux-logger @types/redux-logger redux-persist @react-native-async-storage/async-storage --dev  

#pnpm  
pnpm add @tanstack/react-query @tanstack/react-query-devtools redux react-redux @reduxjs/toolkit @redux-devtools/extension redux-logger @types/redux-logger redux-persist @react-native-async-storage/async-storage --save-dev

Server State with React Query

Setup Devtools

First, you need to add React Query / TanStack Query in the App.tsx:

import React from 'react';  
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';  
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';  
import { Platform } from 'react-native';  

const App = () => {  
  const queryClient = new QueryClient();  
  return (  
    <QueryClientProvider client={queryClient}>  
      { Platform.OS === 'web' && <ReactQueryDevtools />}  
      ...  
    </QueryClientProvider>  
  );  
};  

export default App;

Note: the React Query Devtools currently do not support react native, and it only works on the web, so there is a condition: { Platform.OS === ‘web’ && <ReactQueryDevtools />}.

For the react native apps, in order to use this tool, you need to use react-native-web to interpolate your native app to the web app first.

If you open my Expo app on the web by running nx start cats and choose the options Press w │ open web, you should be able to use the dev tools and see the state of my react queries:

Create a Query

What is a query?

“A query is a declarative dependency on an asynchronous source of data that is tied to a unique key. A query can be used with any Promise-based method (including GET and POST methods) to fetch data from a server.” (https://tanstack.com/query/v4/docs/react/guides/queries)

Now let’s add our first query. In this example, it will be added underlib/queries folder. To create a query to fetch a new fact about cats, run the command:

# expo workspace  
npx nx generate @nx/expo:lib use-cat-fact --directory=queries  

# react-native workspace  
npx nx generate @nx/react-native:lib use-cat-fact --directory=queries

Or use Nx Console:

Now notice under libs folder, use-cat-fact folder got created under libs/queries:

If you use React Native CLI, just add a folder in your workspace root.

For this app, let’s use this API: https://catfact.ninja/. At libs/queries/use-cat-fact/src/lib/use-cat-fact.ts, add code to fetch the data from this API:

import { useQuery } from '@tanstack/react-query';  

export const fetchCatFact = async (): Promise<string> => {  
  const response = await fetch('https://catfact.ninja/fact');  
  const data = await response.json();  
  return data.fact;  
};  

export const useCatFact = () => {  
  return useQuery({  
    queryKey: \['cat-fact'\],  
    queryFn: fetchCatFact,  
    enabled: false,  
  });  
};

Essentially, you have created a custom hook that calls useQuery function from the TanStack Query library.

Unit Testing

If you render this hook directly and run the unit test with the command npx nx test queries-use-cat-fact, this error will show up in the console:

 Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:  
    1. You might have mismatching versions of React and the renderer (such as React DOM)  
    2. You might be breaking the Rules of Hooks  
    3. You might have more than one copy of React in the same app  
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

To solve this, you need to wrap your component inside the renderHook function from @testing-library/react-native library:

1. Install Library to Mock Fetch

Depending on which library you use to make HTTP requests. (e.g. fetch, axios), you need to install a library to mock the response.

If you use fetch to fetch data, you need to install jest-fetch-mock.
If you use axios to fetch data, you need to install axios-mock-adapter.

For this example, since it uses fetch, you need to install jest-fetch-mock:

#npm  
npm install jest-fetch-mock --save-dev  

#yarn  
yard add jest-fetch-mock --dev

You also need to mock fetch library in libs/queries/use-cat-fact/test-setup.ts:

import fetchMock from 'jest-fetch-mock';  

fetchMock.enableMocks();

2. Create Mock Query Provider

To test out useQuery hook, you need to wrap it inside a mock QueryClientProvider. Since this mock query provider is going to be used more than once, let’s create a library for this wrapper:

# expo library  
npx nx generate @nx/expo:library test-wrapper --directory=queries  

# react native library  
npx nx generate @nx/react-native:library test-wrapper --directory=queries

Then a component inside this library:

# expo library  
npx nx generate @nx/expo:component test-wrapper --project=queries-test-wrapper  

# react native library  
npx nx generate @nx/react-native:component test-wrapper --project=queries-test-wrapper

Add the mock QueryClientProvider in libs/queries/test-wrapper/src/lib/test-wrapper/test-wrapper.tsx:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';  
import React from 'react';  

export interface TestWrapperProps {  
  children: React.ReactNode;  
}  

export function TestWrapper({ children }: TestWrapperProps) {  
  const queryClient = new QueryClient();  
  return (  
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>  
  );  
}  

export default TestWrapper;

3. Use Mock Responses in Unit Test

Then this is what the unit test for my query would look like:

import { TestWrapper } from '@nx-expo-monorepo/queries/test-wrapper';  
import { renderHook, waitFor } from '@testing-library/react-native';  
import { useCatFact } from './use-cat-fact';  
import fetchMock from 'jest-fetch-mock';  

describe('useCatFact', () => {  
  afterEach(() => {  
    jest.resetAllMocks();  
  });  

  it('status should be success', async () => {  
    // simulating a server response  
    fetchMock.mockResponseOnce(JSON.stringify({  
      fact: 'random cat fact',  
    }));  

    const { result } = renderHook(() => useCatFact(), {  
      wrapper: TestWrapper,  
    });  
    result.current.refetch(); // refetching the query  
    expect(result.current.isLoading).toBeTruthy();  

    await waitFor(() => expect(result.current.isLoading).toBe(false));  
    expect(result.current.isSuccess).toBe(true);  
    expect(result.current.data).toEqual('random cat fact');  
  });  

  it('status should be error', async () => {  
   fetchMock.mockRejectOnce();  

    const { result } = renderHook(() => useCatFact(), {  
      wrapper: TestWrapper,  
    });  
    result.current.refetch(); // refetching the query  
    expect(result.current.isLoading).toBeTruthy();  

    await waitFor(() => expect(result.current.isLoading).toBe(false));  
    expect(result.current.isError).toBe(true);  
  });  
});

If you use axios, your unit test would look like this:

import { TestWrapper } from '@nx-expo-monorepo/queries/test-wrapper';
import { renderHook, waitFor } from '@testing-library/react-native';
import { useCatFact } from './use-cat-fact';
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

// This sets the mock adapter on the default instance
const mockAxios = new MockAdapter(axios);

describe('useCatFact', () => {
  afterEach(() => {
    mockAxios.reset();
  });

  it('status should be success', async () => {
    // simulating a server response
    mockAxios.onGet().replyOnce(200, {
      fact: 'random cat fact',
    });

    const { result } = renderHook(() => useCatFact(), {
      wrapper: TestWrapper,
    });
    result.current.refetch(); // refetching the query
    expect(result.current.isLoading).toBeTruthy();

    await waitFor(() => expect(result.current.isLoading).toBe(false));
    expect(result.current.isSuccess).toBe(true);
    expect(result.current.data).toEqual('random cat fact');
  });

  it('status should be error', async () => {
    mockAxios.onGet().replyOnce(500);

    const { result } = renderHook(() => useCatFact(), {
      wrapper: TestWrapper,
    });
    result.current.refetch(); // refetching the query
    expect(result.current.isLoading).toBeTruthy();

    await waitFor(() => expect(result.current.isLoading).toBe(false));
    expect(result.current.isError).toBe(true);
  });
});

Notice that this file imports TestWrapper from @nx-expo-monorepo/queries/test-wrapper, and it is added to renderHook function with { wrapper: TestWrapper }.

Now you run the test command nx test queries-use-cat-fact, it should pass:

 PASS   queries-use-cat-fact  libs/queries/use-cat-fact/src/lib/use-cat-fact.spec.ts (5.158 s)  
  useCatFact  
    ✓ status should be success (44 ms)  
    ✓ status should be error (96 ms)

Integrate with Component

Currently userQuery returns the following properties:

isLoading or status === 'loading' - The query has no data yet
isError or status === 'error' - The query encountered an error
isSuccess or status === 'success' - The query was successful and data is available

Now with components controlled by the server state, you can leverage the above properties and change your component to follow the below pattern:

export interface CarouselProps {  
  isError: boolean;  
  isLoading: boolean;  
  isSuccess: boolean;  
}  


export function Carousel({  
  isSuccess,  
  isError,  
  isLoading,  
}: CarouselProps) {  
  return (  
    <>  
      {isSuccess && (  
        ...  
      )}  
      {isLoading && (  
        ...  
      )}  
      {isError && (  
        ...  
      )}  
    </>  
  );  
}  

export default Carousel;

Then in the parent component, you can use the query created above:

import { useCatFact } from '@nx-expo-monorepo/queries/use-cat-fact';  
import { Carousel } from '@nx-expo-monorepo/ui';  
import React from 'react';  

export function Facts() {  
  const { data, isLoading, isSuccess, isError, refetch, isFetching } =  
    useCatFact();  

  return (  
    <Carousel  
      content={data}  
      isLoading={isLoading || isFetching}  
      isSuccess={isSuccess}  
      isError={isError}  
      onReload={refetch}  
    >  
    ...  
   );  
}

If you serve the app on the web and open the React Query Devtools, you should be able to see the query I created cat-fact and data in the query.

Redux

Create a Library

First, you need to create a library for redux:

# expo library  
npx nx generate @nx/expo:lib cat --directory=states  

# react native library  
npx nx generate @nx/react-native:lib cat --directory=states

This should create a folder under libs:

Create a State

This app is going to track when users click the like button, so you need to create a state called likes.

You can use the Nx Console to create a redux slice:

Or run this command:

npx nx generate @nx/react:redux likes --project=states-cat --directory=likes

Then update the redux slice at libs/states/cat/src/lib/likes/likes.slice.ts:

import {  
  createEntityAdapter,  
  createSelector,  
  createSlice,  
  EntityState,  
} from '@reduxjs/toolkit';  

export const LIKES\_FEATURE\_KEY = 'likes';  

export interface LikesEntity {  
  id: string;  
  content: string;  
  dateAdded: number;  
}  

export type LikesState = EntityState<LikesEntity>;  

export const likesAdapter = createEntityAdapter<LikesEntity>();  

export const initialLikesState: LikesState = likesAdapter.getInitialState();  

export const likesSlice = createSlice({  
  name: LIKES\_FEATURE\_KEY,  
  initialState: initialLikesState,  
  reducers: {  
    like: likesAdapter.addOne,  
    remove: likesAdapter.removeOne,  
    clear: likesAdapter.removeAll,  
  },  
});  

/\*  
 \* Export reducer for store configuration.  
 \*/  
export const likesReducer = likesSlice.reducer;  

export const likesActions = likesSlice.actions;  

const { selectAll } = likesAdapter.getSelectors();  

const getlikesState = <ROOT extends { likes: LikesState }>(  
  rootState: ROOT  
): LikesState => rootState\[LIKES\_FEATURE\_KEY\];  

const selectAllLikes = createSelector(getlikesState, selectAll);  

export const likesSelectors = {  
  selectAllLikes,  
};

Every time the “like” button gets clicked, you want to store the content of what users liked. So you need to create an entity to store this information.

export interface LikesEntity {  
  id: string;  
  content: string;  
  dateAdded: number;  
}

This state has 3 actions:

like: when users click like
remove: when users cancel the like
clear: when users clear all the likes

Root Store

Then you have to add the root store and create a transform function to stringify the redux state:

Connect Redux State with UI

Then in apps/cats/src/app/App.tsx, you have to:

wrap the app inside the StoreProvider with the root store to connect with the Redux state.
wrap the app inside PersistGate to persist the redux state in the storage

import React from 'react';  
import AsyncStorage from '@react-native-async-storage/async-storage';  
import { PersistGate } from 'redux-persist/integration/react';  
import { createRootStore, transformEntityStateToPersist } from '@nx-expo-monorepo/states/cat';  
import { Loading } from '@nx-expo-monorepo/ui';  
import { Provider as StoreProvider } from 'react-redux';  

const App = () => {  

  const persistConfig = {  
    key: 'root',  
    storage: AsyncStorage,  
    transforms: \[transformEntityStateToPersist\],  
  };  
  const { store, persistor } = createRootStore(persistConfig);  

  return (  
    <PersistGate loading={<Loading />} persistor={persistor}>  
      <StoreProvider store={store}>  
        ...  
      </StoreProvider>  
    </PersistGate>  
  );  
};  

export default App;

In your component where the like button is located, you need to dispatch the like action. I created a file at apps/cats/src/app/facts/facts.props.ts:

import { likesActions, LikesEntity, RootState } from '@nx-expo-monorepo/states/cat';  
import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit';  

const mapDispatchToProps = (  
  dispatch: ThunkDispatch<RootState, void, AnyAction>  
) => {  
  return {  
    like(item: LikesEntity) {  
      dispatch(likesActions.like(item));  
    },  
  };  
};  

type mapDispatchToPropsType = ReturnType<typeof mapDispatchToProps>;  

type FactsProps = mapDispatchToPropsType;  

export { mapDispatchToProps };  
export type { FactsProps };

Now you have passed the like function to the props of the facts component. Now inside the facts component, you can call the like function from props to dispatch the like action.

Debugging

To debug redux with Expo, I can simply open the Debugger Menu by entering “d” in the console or in the app, then choose the option “Open JS Debugger”.

Then you can view my redux logs in the JS Debugger console:

You can see the redux logs in console now:

Or you can run nx serve cats to launch the app in web view. Then you can use Redux Devtools and debug the native app like a web app:

Summary

Here is a simple app that uses TanStack Query and Redux for state management. These 2 tools are pretty powerful and they manage both server and client state for you, which is easy to scale, test, and debug.

Nx is a powerful monorepo tool. Together with Nx and these 2 state management tools, it will be very easy to scale up any app.

TanStack Query site: https://tanstack.com/query/latest
Official @nx/expo plugin: https://nx.dev/packages/expo
Official @nx/react-native plugin: https://nx.dev/packages/react-native

Learn more

Step-by-Step Guide to Creating an Expo Monorepo with Nx

Emily Xiong — Fri, 16 Feb 2024 22:19:07 +0000

This blog will show you how to create an Expo monorepo with Nx. In this example, you will be creating two Expo apps in a monorepo with @nx/expo: one shows random facts about cats, and the other shows random facts about dogs.

As shown in the above screenshots, these two apps have the same branding and reuse all components.

This blog will go through:

How to create a monorepo workspace with Nx
How to share a React Native library
How to build an Expo app
How to submit an Expo app to the app store

Github repo: https://github.com/xiongemi/nx-expo-monorepo

Creating an Nx Workspace

To create a new Nx workspace, run the command npx create-nx-workspace in the terminal. In this example, let’s name it nx-expo-monorepo:

✔ Where would you like to create your workspace? · create-nx-monorepo
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · expo
✔ Application name · cats
✔ Enable distributed caching to make your CI faster · No

This will create an integrated repo. What is an integrated repo?

An integrated repo contains projects that depend on each other through standard import statements. There is typically a single version of every dependency defined at the root.
https://nx.dev/concepts/integrated-vs-package-based#integrated-repos

Now, your Nx workspace should have cats and cats-e2e under the apps folder and an empty libs folder:

Existing Nx Workspace

If you already have an Nx workspace, you need to install the @nx/expo package:

npx nx add @nx/expo

To create an Expo app, run:

npx nx generate @nx/expo:app cats

Alternatively, if you use Visual Studio Code as your code editor, you can also create apps using Nx Console:

Install Tech Stacks

Here are the tech stacks this example is going to use:

Material design library: react-native-paper

# npm  
npm install react-native-paper react-native-safe-area-context --save  

# yarn  
yarn add react-native-paper react-native-safe-area-context  

# pnpm  
pnpm add react-native-paper react-native-safe-area-context --save

Routing: @react-navigation/native

# npm  
npm install react-native-paper react-native-screens @react-navigation/native-stack --save  

# yarn  
yarn add react-native-paper react-native-screens @react-navigation/native-stack  

# pnpm  
pnpm add react-native-paper react-native-screens @react-navigation/native-stack --save

Create a Shareable UI Library

With all the required libraries installed, you need to create a sharable UI library:

npx nx generate @nx/expo:lib ui

Now under the libs folder, a ui folder has been created:

To create a component in the ui library, run:

npx nx generate @nx/expo:component carousel --project=ui --export

You can see that a carousel folder has been created in the libs/ui/src/lib folder:

Next, modify this component to display the content with props passed in:

Now you can use this component in your app directly using an import:

import { Carousel } from '@nx-expo-monorepo/ui';

Add Navigation

This project is going to use the stack navigator from @react-navigation/native. So the app needs to import from @react-navigation/stack. In apps/cats/src/app/App.tsx, you can change the UI to have one screen displaying a carousel with mock data:

Run the app with nx start cats, and you should be able to see the app on the simulator:

Page on the simulator (left: iOS, right: Android)

Add Another App

In this example, there is already a Cats app. To create the Dogs app, run the command:

npx nx generate @nx/expo:app dogs

Alternatively, if you use Visual Studio Code as your code editor, you can also create apps using Nx Console:

Under the apps folder, there should be cats/, dogs/ and their e2es.

You can reuse the UI library in the Dogs app in apps/dogs/src/app/App.tsx with the below code:

Build Expo Apps

EAS Build is a hosted service for building app binaries for your Expo and React Native projects. To set up EAS locally:

1. Install EAS CLI

EAS CLI is the command-line app to interact with EAS services in the terminal. To install it, run the command:

npm install -g eas-cli

2. Login To EAS

If you are not logged in, run the command:

eas login

3. Build the Apps

After the EAS setup, you can build apps by running the command:

npx nx build cats  
npx nx build dogs

There are different options you can specify with the build command. For example, you can specify the platform you want to build:

npx nx build cats --platform=all  
npx nx build cats --platform=android  
npx nx build cats --platform=ios

Alternatively, if you want to create a build to run on a simulator/emulator, you can run:

npx nx build cats --profile=preview

You can view your build status at https://expo.dev/:

If you want to create a build locally using your own infrastructure:

npx nx build cats --local

Here is the complete list of flags for the build command: https://nx.dev/packages/expo/executors/build.

Submit to the App Store

Before you submit, you need to have paid developer accounts for iOS and Android.

iOS: You need to create an Apple Developer account on the Apple Developer Portal.
Android: You need to create a Google Play Developer account on the Google Play Console sign-up page. You also need to manually create an app on Google Play Console and upload your app for the first time.

1. Run the production build

To submit to the app store, you can build the app by running:

npx nx build cats --profile=production

2. Submit the Build

You can manually upload the build bundle binary to the app store, or you can submit it through EAS.

First, in app.json under the project apps/cats/app.json, you need to make sureios.bundleIdentifier and android.package keys are correct:

To submit your app to the app stores, run:

npx nx submit cats

Nx will prompt you to choose the platform to which you want to submit:

Or you can also specify the platform directly in the initial command:

npx nx submit cats --platform=all  
npx nx submit cats --platform=android  
npx nx submit cats --platform=ios

It will then ask you to choose which binary to submit from one of the following options:

The latest finished Android build for the project on EAS servers.
Specific build ID. It can be found on the builds dashboard.
Path to an .apk or .aab or .ipa archive on your local filesystem.
URL to the app archive.

Alternatively, you can submit your app on the expo.dev site. Go to your build, under options, choose “Submit to an app store”:

Summary

In this article, you have learned how to:

Create multiple apps in a monorepo using @nx/expo
Create a shared library
Build your app using EAS
Submit your app to the App Store

With Nx, it is easy to create and scale up an Expo app. Even though this app is currently a simple 2-page app, you can easily scale it up with more libraries and components. Furthermore, you can also reuse those libraries in the future if you decide to add another app to the repo.

Learn more

Unit Testing Expo Apps With Jest
Add Cypress, Playwright, and Storybook to Nx Expo Apps
🧠 Nx Docs
👩‍💻 Nx GitHub
💬 Nx Community Slack
📹 Nx Youtube Channel
🚀 Speed up your CI

Using react-native-web with Webpack in a Nx monorepo

Emily Xiong — Mon, 27 Nov 2023 06:12:36 +0000

This blog shows how to add a web app using react-native-web with Webpack as the bundler in a Nx monorepo.

Github Repo: https://github.com/xiongemi/nx-react-native-monorepo-jokes

Installation

First, I need to install react-native-web:

# npm
npm install react-native-web --save-dev

# yarn
yarn add react-native-web --dev

# pnpm
pnpm add react-native-web --save-dev

Add a React App in the Nx Monorepo

Run command:

npx nx g @nx/react:app <web app name>

In the terminal output, select webpack as bundler:

>  NX  Generating @nx/react:application

✔ Which stylesheet format would you like to use? · none
✔ Would you like to add React Router to this application? (y/N) · false
✔ Which E2E test runner would you like to use? · none
✔ Which bundler do you want to use to build the application? · webpack

Import the Native App

In the web app, in apps/<web app name>/src/main.tsx, change the import of App to:

// eslint-disable-next-line @nx/enforce-module-boundaries
import App from '../../<native app name>/src/app/App';

Also, in web app's project.json, add implicitDependencies:

  "implicitDependencies": ["<native app name>"]

Add Alias in webpack.config.ts

In apps/techy-jokes-webpack/webpack.config.ts, add below alias:

  config.resolve.alias = {
    ...config.resolve?.alias ?? {},
    'react-native$': 'react-native-web',
  };

Change index.html to be full height

In the index.html, change the:

style="height: 100%" to html tag
style="min-height: 100%" to body tag
style="display: flex; min-height: 100vh" to div with root id

These style changes are taken from examples in https://reactnavigation.org/docs/server-rendering.

So the index.html would look like:

<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    ...
  </head>
  <body style="min-height: 100%">
    <div id="root" style="display: flex; min-height: 100vh"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Then that is it, I can now view the web app using npx nx serve <web app name>.

Troubleshooting

react-native-vector-icons

Because I use react-native-vector-icons, I got this error:

ERROR in ../../node_modules/react-native-vector-icons/lib/create-icon-set.js 70:8
Module parse failed: Unexpected token (70:8)
File was processed with these loaders:
 * ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
|       return (
>         <Text selectable={false} {...props}>
|           {glyph}
|           {children}

webpack compiled with 1 error (af4bf9f7c72b44dc)

This happens because react-native-vector-icons contains jsx code (e.g. <Text>) inside .js file.

First, I need to add files with .web to the extensions (the order of the extension in the array actually matters):

  config.resolve.extensions = [
    '.web.tsx',
    '.web.ts',
    '.web.jsx',
    '.web.js',
    ...config.resolve.extensions,
  ];

Then I need to add a rule to load the .js file from react-native-vector-icons using babel loader (https://stackoverflow.com/questions/56750269/react-native-web-failed-to-compile-react-native-vector-icons):

  config.module.rules.push({
    test: /\.(js|jsx)$/,
    include: /react-native-vector-icons/,
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        ['@babel/preset-react', { runtime: 'automatic' }],
      ],
    },
  });

When I serve up the web app, I will get this error message:

MaterialCommunityIcon.tsx:49 Error: Dynamic require of "react-native-vector-icons/MaterialCommunityIcons" is not supported

I copy the font file from react-native-vector-icons library to the src/assets folder: https://github.com/oblador/react-native-vector-icons/tree/master/Fonts.
So in my web app's index.html, I need to add:

    <style type="text/css">
      @font-face {
        font-family: 'MaterialCommunityIcons';
        src: url('/assets/MaterialCommunityIcons.ttf') format('truetype');
      }
    </style>

Now build command (nx build <web app name>) should work.

The final webpack.config.js would look like:

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), withReact(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.resolve.alias = {
    ...config.resolve?.alias ?? {},
    'react-native$': 'react-native-web',
  };
  config.resolve.extensions = [
    '.web.tsx',
    '.web.ts',
    '.web.jsx',
    '.web.js',
    ...config.resolve.extensions,
  ];
  config.module.rules.push({
    test: /\.(js|jsx)$/,
    include: /react-native-vector-icons/,
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        ['@babel/preset-react', { runtime: 'automatic' }],
      ],
    },
  });
  return config;
});

Deploy to GitHub Pages

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

To deploy this web app to GitHub page:

Install gh-pages ``` # npm npm install gh-pages --save-dev

yarn

yarn add gh-pages --dev

pnpm

pnpm add gh-pages --save-dev


- Create a script called `gh-pages.js` under the app:

var ghpages = require('gh-pages');

ghpages.publish('', function (err) {
if (!err) {
console.error(err);
}
});


For this example, the `gh-pages.js` look like:

var ghpages = require('gh-pages');

ghpages.publish('../../dist/apps/techy-jokes-webpack', function (err) {
if (!err) {
console.error(err);
}
});


- If your GitHub has a base href, run the build command with `--baseHref`. For example, my GitHub page is at https://xiongemi.github.io/nx-react-native-monorepo-jokes/, to build for it, the command is `nx build techy-jokes-webpack --baseHref=/nx-react-native-monorepo-jokes/`.

- Add a target in project.json:

"gh-pages": {
  "command": "npx nx build <app name> --base=<app base href> --prod && node gh-pages.js",
  "cwd": "{projectRoot}"
},


For this example, the target would be:

"gh-pages": {
  "command": "npx nx build techy-jokes-webpack --prod --baseHref=/nx-react-native-monorepo-jokes && node gh-pages.js",
  "cwd": "{projectRoot}"
},


Now you can run the command `nx gh-pages <your app name>` to deploy your app to GitHub Pages.

---
## Nx Graph

If you run command `nx graph`, you should see the web app implict depends on the react native mobile app:


![nx dependency graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcdbru3zwq12aaech5wn.png)

Using react-native-web with Vite in a Nx monorepo

Emily Xiong — Wed, 11 Oct 2023 04:34:47 +0000

This blog shows how to add a web app using react-native-web with vite as the bundler in a Nx monorepo.

Github Repo: https://github.com/xiongemi/nx-react-native-monorepo-jokes

Installation

First, I need to install react-native-web:



# npm
npm install react-native-web --save-dev

# yarn
yarn add react-native-web --dev

# pnpm
pnpm add react-native-web --save-dev

Add a React App in the Nx Monorepo

Run command:



npx nx g @nx/react:app <web app name>

In the terminal output, select vite as bundler:



>  NX  Generating @nx/react:application

✔ Which stylesheet format would you like to use? · none
✔ Would you like to add React Router to this application? (y/N) · false
✔ Which E2E test runner would you like to use? · none
✔ Which bundler do you want to use to build the application? · vite

Import the Native App

In the web app, in apps/<web app name>/src/main.tsx, change the import of App to:



// eslint-disable-next-line @nx/enforce-module-boundaries
import App from '../../<native app name>/src/app/App';

Also, in web app's project.json, add implicitDependencies:



  "implicitDependencies": ["<native app name>"]

Add Alias in vite.config.ts

In apps/techy-jokes-vite/vite.config.ts, add below alias:



  resolve: {
    alias: {
      'react-native': 'react-native-web',
    },
  },

Then that is it, I can now view the web app using npx nx serve <web app name>.

Change index.html to be full height

In the index.html, change the:

style="height: 100%" to html tag
style="min-height: 100%" to body tag
style="display: flex; min-height: 100vh" to div with root id

These style changes are taken from examples in https://reactnavigation.org/docs/server-rendering.

So the index.html would look like:



<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    ...
  </head>
  <body style="min-height: 100%">
    <div id="root" style="display: flex; min-height: 100vh"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Troubleshooting

react-native-vector-icons

Because I use react-native-vector-icons, I got this error:



[commonjs--resolver] Unexpected token (70:8) in /Users/emily/code/tmp/nx-react-native-monorepo-jokes/node_modules/react-native-vector-icons/lib/create-icon-set.js
file: /Users/emily/code/tmp/nx-react-native-monorepo-jokes/node_modules/react-native-vector-icons/lib/create-icon-set.js:70:8
68: 
69:       return (
70:         <Text selectable={false} {...props}>
            ^
71:           {glyph}
72:           {children}

 >  NX   Unexpected token (70:8) in /Users/emily/code/tmp/nx-react-native-monorepo-jokes/node_modules/react-native-vector-icons/lib/create-icon-set.js

This happens because react-native-vector-icons contains jsx code (e.g. <Text>) inside .js file.

First, I need to add files with .web to the extensions (the order of the extension in the array actually matters, .web needs to be loaded first):



const extensions = [
  '.mjs',
  '.web.tsx',
  '.tsx',
  '.web.ts',
  '.ts',
  '.web.jsx',
  '.jsx',
  '.web.js',
  '.js',
  '.css',
  '.json',
];

Add these extensions to resolve:



export default defineConfig({
...

  resolve: {
    extensions,
...

Then inside defineConfig, I added to optimizeDeps to resolve js files using jsx loader:



  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
      jsx: "automatic",
      loader: { ".js": "jsx" },
    },
  },

When I serve up the web app, I will get this error message:



MaterialCommunityIcon.tsx:49 Error: Dynamic require of "react-native-vector-icons/MaterialCommunityIcons" is not supported

I copy the font file from react-native-vector-icons library to the public folder: https://github.com/oblador/react-native-vector-icons/tree/master/Fonts.
So in my web app's index.html, I need to add:



    <style type="text/css">
      @font-face {
        font-family: 'MaterialCommunityIcons';
        src: url('/MaterialCommunityIcons.ttf') format('truetype');
      }
    </style>

Now the serve command (nx serve <web app name>) is working. However, the build command (nx run <web app name>) still does not work with the same error.

I created a rollup plugin:



const rollupPlugin = (matchers: RegExp[]) => ({
  name: 'js-in-jsx',
  load(id: string) {
    if (
      matchers.some((matcher) => matcher.test(id)) &&
      id.endsWith('.js')
    ) {
      const file = readFileSync(id, { encoding: 'utf-8' });
      return esbuild.transformSync(file, { loader: 'jsx', jsx: 'automatic' });
    }
  },
});

Then add this plugin to the vite config:



  build: {
    rollupOptions: {
      plugins: [rollupPlugin([/react-native-vector-icons/])],
    },
  },

Now build command (nx build <web app name>) should work.

global is not defined

In the web browser, I got this error:



NavigationContainer.tsx:29 Uncaught ReferenceError: global is not defined

In vite.config.ts, add:



  define: {
    global: "window",
  },

The final vite.config.ts:



import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import * as esbuild from 'esbuild';
import { readFileSync } from 'fs';

const extensions = [
  '.mjs',
  '.web.tsx',
  '.tsx',
  '.web.ts',
  '.ts',
  '.web.jsx',
  '.jsx',
  '.web.js',
  '.js',
  '.css',
  '.json',
];

const rollupPlugin = (matchers: RegExp[]) => ({
  name: 'js-in-jsx',
  load(id: string) {
    if (matchers.some((matcher) => matcher.test(id)) && id.endsWith('.js')) {
      const file = readFileSync(id, { encoding: 'utf-8' });
      return esbuild.transformSync(file, { loader: 'jsx', jsx: 'automatic' });
    }
  },
});

export default defineConfig({
  cacheDir: '../../node_modules/.vite/techy-jokes-vite',
  define: {
    global: 'window',
  },

  resolve: {
    extensions,
    alias: {
      'react-native': 'react-native-web',
    },
  },

  build: {
    rollupOptions: {
      plugins: [rollupPlugin([/react-native-vector-icons/])],
    },
  },

  server: {
    port: 4200,
    host: 'localhost',
  },

  preview: {
    port: 4300,
    host: 'localhost',
  },

  optimizeDeps: {
    esbuildOptions: {
      resolveExtensions: extensions,
      jsx: 'automatic',
      loader: { '.js': 'jsx' },
    },
  },

  plugins: [react(), nxViteTsPaths()],

  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },

  test: {
    globals: true,
    cache: { dir: '../../node_modules/.vitest' },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
  },
});

Deploy to GitHub Pages

GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.

To deploy this web app to GitHub Pages:

install gh-pages: ```

npm

npm install gh-pages --save-dev

yarn

yarn add gh-pages --dev

pnpm

pnpm add gh-pages --save-dev


2. Create a script called `gh-pages.js` under the app:

var ghpages = require('gh-pages');

ghpages.publish('', function (err) {
if (!err) {
console.error(err);
}
});


For this example, the `gh-pages.js` look like:

var ghpages = require('gh-pages');

ghpages.publish('../../dist/apps/techy-jokes-vite', function (err) {
if (!err) {
console.error(err);
}
});


3. if your GitHub has a base href, run the build command with `--base`. For example, my GitHub page is at https://xiongemi.github.io/nx-react-native-monorepo-jokes/, to build for it, the command is `nx build techy-jokes-vite --base=/nx-react-native-monorepo-jokes/`.

4. Add a target in project.json:

"gh-pages": {
  "command": "nx build techy-jokes-vite --base=/nx-react-native-monorepo-jokes/ && node gh-pages.js",
  "cwd": "{projectRoot}"
},


Now you can run the command `nx gh-pages <your app name>` to deploy your app to GitHub Pages.

---
## Nx Graph

If you run command `nx graph`, you should see the web app implict depends on the react native mobile app:

![nx dependency graph](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zal9dcj1ag55ta6734hh.png)

Introducing Playwright Support for Nx

Emily Xiong — Mon, 18 Sep 2023 16:58:38 +0000

We are very excited to announce our support for Playwright with our new plugin @nx/playwright.

This blog will show you:

What is Playwright
How to create a new Nx workspace with Playwright support
How to add Playwright to an existing Nx workspace

What is Playwright?

Before we start, let’s answer this question: what is Playwright and why should we use it?

From playwright.dev, it says: “Playwright is end-to-end testing for modern web apps”. It sounds good, what does it do for us developers? What developer experience does it provide?

Multiple Browsers

It is easy to run e2e test suites across multiple browsers. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. It also supports branded browsers and mobile viewports. For example, we can simply add the below code to the playwright configuration file to run the same test across these browsers:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    /* Test against desktop browsers */
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
  ],
});

Auto Waiting

Playwright automatically waits for the relevant checks to pass, then performs the request action. What does it mean? For example, let's say we have a sign-up form where:

while the app checks that the user name is unique, the submit button is disabled.
after checking with the server, the submit button becomes enabled.

How do we write tests in the Playwright? Playwright performs a range of actionability checks on the elements before making actions to ensure these actions behave as expected. So we don't need to wait for the button to be enabled. Playwright will check it. We can simply write:

await page.getByTestId('submit-button').click();

HTML Test Report

Playwright creates a nice HTML test report that allows filtering tests by browsers, passed tests, failed tests, skipped tests, and flaky tests.

Clicking on the individual test shows more detailed errors along with each step of the test:

It also has other features like recording screenshots and videos, test generation, and visual comparisons. Read more about Playwright at playwright.dev.

Next, let’s write and run some Playwright tests.

Create a new Nx Workspace with Playwright

In this example, we will create a React app using Playwright as its end-to-end testing framework. In the terminal, run the below command:

npx create-nx-workspace

✔ Where would you like to create your workspace? · nx-react-playwright
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · none
✔ Integrated monorepo, or standalone project? · standalone
✔ Which bundler would you like to use? · vite
✔ Test runner to use for end to end (E2E) tests · playwright
✔ Default stylesheet format · css
✔ Enable distributed caching to make your CI faster · No

We get a standalone Nx React app named nx-react-playwright:

What is a standalone application? It is like an integrated monorepo setup but with just a single, root-level application. The repo has the same file structure as an app created from Create-React-App, but we can still leverage all the generators and executors and structure your application into libraries or submodules.

Run E2E

The default e2e test is located in e2e/src/example.spec.ts:

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('/');
  // Expect h1 to contain a substring.
  expect(await page.locator('h1').innerText()).toContain('Welcome');
});

The test verifies the h1 header contains the text Welcome:

To run the e2e tests, run the below command:

npx nx e2e e2e

In the terminal, it shows the following log:

> nx run nx-react-playwright:serve:development
  ➜  Local:   http://localhost:4200/
  3 passed (11.8s)
To open last HTML report run:

  npx playwright show-report dist/.playwright/e2e/playwright-report

So the test passed and it also generated a report at dist/.playwright/e2e/playwright-report/index.html:

Add Another Test

Let's add another test to check the Documentation button works:

In src/app/nx-welcome.tsx, we need to add a test id to the link:

<a
  href="https://nx.dev/getting-started/intro?utm_source=nx-project"
  target="_blank"
  rel="noreferrer"
  className="list-item-link"
  data-testid="documentation-link"
>

Then in e2e/src/example.spec.ts, the test file will become:

import { test, expect } from '@playwright/test';

test.describe('navigation', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('/');
  });

  test('has title', async ({ page }) => {
    // Expect h1 to contain a substring.
    expect(await page.locator('h1').innerText()).toContain('Welcome');
  });

  test('should go to documentation site', async ({ page, context }) => {
    await page.getByTestId('documentation-link').click();
    // Opening a new tab and waiting for the page to render
    const pagePromise = context.waitForEvent('page');
    const newPage = await pagePromise;
    await newPage.waitForLoadState();
    expect(await newPage.title()).toContain('Intro to Nx');
  });
});

Now run npx nx e2e e2e, the test would still pass:

> nx run nx-react-playwright:serve:development
  ➜  Local:   http://localhost:4200/
  6 passed (3.1s)
To open last HTML report run:

  npx playwright show-report dist/.playwright/e2e/playwright-report

Now we have created a new Nx workspace with Playwright. However, if you already have an Nx repo, how do you add Playwright E2E configuration to an existing app?

How to add Playwright to an existing Nx workspace

For this example, I am going to add Playwright e2e tests to the below repo:

nrwl / nx-examples

Example repo for Nx workspace

NxExample

This project was generated using Nx.

🔎 Powerful, Extensible Dev Tools

Quick Start & Documentation

Nx Documentation

30-minute video showing all Nx features

Interactive Tutorial

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nx/react
Web (no framework frontends)
- npm install --save-dev @nx/web
Angular
- npm install --save-dev @nx/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nx/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in…

View on GitHub

We are going to focus on the cart app in this example. In the terminal, run npx nx serve cart and it should serve up the app at http://localhost:4200/cart.

Install @nx/playwright

To install, run:

#npm
npm install @nx/playwright --save-dev

#yarn
yarn add @nx/playwright --dev

#pnpm
pnpm i -D @nx/playwright

Apply Playwrightt Configuration

There are 2 ways to apply the E2E Playwright configuration.

1. Apply directly on the cart app

We can set up Playwright directly on the cart app:

npx nx generate @nx/playwright:configuration --project=cart ---webServerCommand="npx nx serve cart"  --webServerAddress="http://localhost:4200"

It adds:

an e2e target in apps/cart/project.json
an e2e folder at apps/cart/e2e containing e2e tests
playwright.config.ts containing Playwright configuration

Let's update the default test apps/cart/e2e/example.spec.ts to check whether the header exists:

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('/cart');

  await expect(page.locator('nx-example-header')).toBeVisible()
});

Now we can run npx nx e2e cart and it should pass.

2. Add a separate E2E Project

The second way is to create a separate E2E project folder and apply configuration there.
Create a folder e2e at the workspace root and a project.json file inside it:

Add name in e2e/project.json:

{
  "name": "e2e"
}

Now apply the Playwright configuration to the e2e project:

npx nx generate @nx/playwright:configuration --project=e2e ---webServerCommand="npx nx serve cart"  --webServerAddress="http://localhost:4200"

Now I created an e2e folder at the workspace root:

Now we can run npx nx e2e e2e to run the Playwright e2e tests.

Summary

In this blog, we have:

Created a new Nx react repo with Playwright
Written our own Playwright tests
Used Nx to run Playwright tests
Set up a Playwright configuration for an existing Nx app

Hopefully, this gives you good insight into how to get started with Playwright. The Playwright configuration in this example is pretty simple, to learn more about @nx/playwright plugin, check out the Nx documentation: https://nx.dev/packages/playwright.

Learn more

Speed up your Yarn Workspace with Nx

Emily Xiong — Wed, 01 Jun 2022 15:48:18 +0000

If you have a Yarn workspace, you can turn it into an Nx monorepo with a simple command. Below is an example of a Yarn workspace with multiple Expo apps which we will be using to add Nx:
https://github.com/byCedric/eas-monorepo-example

For this example workspace, there are 3 Expo applications:

managed: Expo managed app
ejected: Expo bare app
with-sentry: Expo managed app with sentry-expo integrated

When you run the app, each app will just have a text in the middle of the screen:

This blog is going to show you how to turn the above Yarn workspace to Nx.

Why Nx?

Before we start, the first question we need to address is: why go through all the troubles to turn a working Yarn workspace to Nx? If you got a Yarn workspace, you can already share code between apps. So why Nx?

Like Yarn workspace, Nx is a monorepo tool. However, unlike Yarn workspace, not only does Nx provide faster build time and better developer experience, but it will also provide:

Workspace visualizations
Distributed Task Execution
Easy Updating
Editor Plugin

Steps

After checkout the repo, go to the folder and run:

npx add-nx-to-monorepo

You should see below in the terminal:

>  NX  🐳 Nx initialization
? Use Nx Cloud? (It's free and doesn't require registration.) Yes [Faster builds, run detail
s, Github integration. Learn more at https://nx.app]
>  NX  🧑‍🔧 Analyzing the source code and creating configuration files
>  NX  📦 Installing dependencies

You should see that a file named nx.json is created in your workspace root.

Notice in package.json: you should see the latest nx is added to devDependencies like below:

"devDependencies": {
  "nx": "14.1.6"
}

That’s it! Now you officially added Nx to your workspace.

Faster Build

In the Yarn workspace, if you run yarn build, it will run the build command for each app and library. It took 5.51 seconds for the below instance:

$ yarn workspaces run build
> @acme/app-ejected
$ echo 'Nothing to build'
Nothing to build
> @acme/app-managed
$ echo 'Nothing to build'
Nothing to build
> @acme/app-with-dev-client
$ echo 'Nothing to build'
Nothing to build
> @acme/app-with-sentry
$ echo 'Nothing to build'
Nothing to build
> @acme/babel-preset-expo
$ echo 'Nothing to build'
Nothing to build
> @acme/eslint-config
$ echo 'Nothing to build'
Nothing to build
> @acme/ui
$ bob build
ℹ Building target commonjs
ℹ Cleaning up previous build at build/commonjs
ℹ Compiling 1 files in src with babel
✔ Wrote files to build/commonjs
ℹ Building target module
ℹ Cleaning up previous build at build/module
ℹ Compiling 1 files in src with babel
✔ Wrote files to build/module
ℹ Building target typescript
ℹ Cleaning up previous build at build/typescript
ℹ Generating type definitions with tsc
✔ Wrote definition files to build/typescript
✨  Done in 5.51s.

However, after turning the workspace to Nx, run the build command against all apps and libraries:

yarn nx run-many --target=build --all

Notice it will take much less time the 2nd run. For example, it only took 0.96 seconds for the below instance:

The same goes for linting. If you run yarn test, notice it would run linting for each app and library (in this repo, it uses the test script to run eslint). For the below instance, it took 18.26 seconds.

yarn run v1.22.10
$ yarn workspaces run test
> @acme/app-ejected
$ eslint --ext js,ts,tsx .
> @acme/app-managed
$ eslint --ext js,ts,tsx .
> @acme/app-with-dev-client
$ eslint --ext js,ts,tsx .
> @acme/app-with-sentry
$ eslint --ext js,ts,tsx .
> @acme/babel-preset-expo
$ echo 'Nothing to test'
Nothing to test
> @acme/eslint-config
$ echo 'Nothing to test'
Nothing to test
> @acme/ui
$ eslint --ext ts,tsx ./src
✨  Done in 18.26s.

To run the test command for all apps and libraries:

yarn nx run-many --target=test --all

Notice for the below instance, it only took 0.95 seconds:

For this repo, it actually decreased build and lint runtime by ~90%. How does Nx achieve that?

Notice in the terminal console that it sometimes says Nx read the output from the cache instead of running the command. This is because Nx uses Computation Caching. If the app or lib has no change, it would retrieve the computation from the cache. In short, it never builds, tests, or lints the same code twice.

Workspace Visualizations & Boundary Rules

To see the workspace project graph, run the command:

yarn nx graph

You should be able to see the below graph:

Being able to perform workspace visualization can be a huge benefit. In particular, it is handy for tracing and debugging as you can clearly see how apps and libs on this workspace are related to each other.

Now, this is a relatively small workspace with only 3 libraries and 4 applications. As your workspace grows it becomes increasingly a challenge to tame dependencies and imports between libs. You definitely don’t want your monorepo to become a big entangled mess. Also, tracing circular dependencies in a bigger repo can quickly become a headache to trace and debug if your only tool is examining the code.

In addition to using the project graph Nx also comes with a lint rule @nrwl/nx/enforce-module-boundaries to help detect circular dependencies early and prevent imports between libs that shouldn’t talk to each other. Read more in our blog post on “Taming Code Organization with Module Boundaries in Nx”.

Distributed Task Execution

Nx also comes with an affected command: instead of running the command against all apps and libraries, it will only run the command against the one that got “affected” by a change.

For example, if you made no code change and run the command:

yarn nx affected --target=build

It will not run build for any project:

If instead, you changed the ui library in this workspace, the apps that depend on the library will get affected (apps-ejected, app-managed, app-with-dev-client, app-with-sentry); the library babel-preset-expo and eslint-config will not be affected.

If you run yarn nx affected:graph, you should see the dependency graph:

Now run the command yarn nx affected --target=build:

Notice in the console, babel-preset-expo and eslint-config are retrieved from the cache; the library ui and all the apps are rebuilt.

If you only changed the managed app, the other apps are not affected.The dependency graph should look like the below with only app-managed:

Now run the command again:

Notice that it only builds the app-managed.

The affected command is a powerful tool that further reduces your build, test and lint time.

Easy Updating

Another powerful command Nx has to offer is migrate.

By running command yarn nx migrate latest, it would automatically update to the latest versions of all frameworks and tools. For example, for an Expo workspace, if you want to upgrade the Expo version, you may need to upgrade React Native, React and other libraries' versions as well. You can go into your package.json and try to change the version number manually, or you can leave it to Nx to upgrade the version for you. Nx is not only going to update the version numbers, but also run code & config migrations if applicable.

Nx Editor Plugins

Nx also offers powerful Editor Plugins to improve the developer experience. For example. you can use Nx Console for VS Code. Then adding another Expo app to this workspace will be one click away:

Conclusion

These are some of the features Nx has to offer in comparison with Yarn Workspace.

Hopefully, after reading this blog, I have persuaded you to convert your Yarn workspace to Nx, or at least be willing to try Nx out. If not, you can read more:

Where to go from here?

Testing React Native apps with Jest

Emily Xiong — Fri, 06 May 2022 16:30:48 +0000

How to write unit and e2e tests for React Native apps using Jest in an Nx workspace

In my previous blog, I finally finished writing my awesome Nx React Native App. The app is running fine. Can I just commit my changes and call it a wrap?

No. As a disciplined developer, I know that finishing writing application code is only a job half done; the other half is writing tests.

This blog will go through:

How to write unit tests for React Native components
How to write e2e tests

Example Repo: https://github.com/xiongemi/studio-ghibli-search-engine

Unit Testing with Nx React Native

To run unit tests, simply run:

nx test <your app or lib>

If you’re using Visual Studio Code, you can use Nx Console to run the test command:

You should see the unit test results in your terminal:

Test Suites: 10 failed, 1 passed, 11 total
Tests:       9 failed, 1 passed, 10 total
Snapshots:   0 total
Time:        9.84 s, estimated 21 s
Ran all test suites.

This is what a starter unit test looks like:

Tech Stack

Testing framework: jest
Testing library: @testing-library/react-native

To write a unit test:

In your component, you can add testID:

<Headline testID='title'>{film.title}</Headline>

Then in the test file, you can use function getByTestId to query testID:

const { getByTestId } = render(<your component>);
expect(getByTestId('title')).toHaveTextContent(...);

You can view more queries here: https://callstack.github.io/react-native-testing-library/docs/api-queries.

The first time running the unit tests is unlikely to pass. There are usually a few errors I run into, I either have to fix the code and tests, or I need to mock some library.

Troubleshooting

Error: Jest failed to parse a file

If you are using libraries that contain native code, such as react-native-paper or @react-navigation/native, you are likely to run into the below error:

Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

To fix this, add that library name to transformIgnorePatterns in the jest.config.js.

For example:

transformIgnorePatterns: [
  'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base)',
],

Error: Animated

If you use React Native’s Animated library or you use a material library like react-native-paper or react-native-elements, you are likely to get the below warning:

console.warn
Animated: useNativeDriver is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add RCTAnimation module to this app, or remove useNativeDriver. Make sure to run bundle exec pod install first. Read more about autolinking: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md

In the test-setup file under your app or lib, add below mock:

jest.mock(
  '../../node_modules/react-native/Libraries/Animated/NativeAnimatedHelper'
);

Error: Is your component inside a screen in a navigator?

If you use @react-navigation library for navigation, and inside your component, there are hooks from this library like useNavigation and useRoute, you are likely to get this error:

Couldn't find a route object. Is your component inside a screen in a navigator?

The easiest way to fix this is to mock the @react-navigation/native library like below in test-setup file under your app or lib:

Error: Could not find “store”

If your component is a smart component that uses Redux Store, you are going to get this error when testing that component:

Could not find "store" in the context of "Connect(Results)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(Results) in connect options

To fix this, you need to wrap your component inside <Provider store={store}>.

First, you need to install redux-mock-store:

# npm
npm install redux-mock-store @types/redux-mock-store --save-dev

# yarn
yarn add redux-mock-store @types/redux-mock-store --dev

The test would become:

Example unit test with different store states:

Here are how to write unit tests for React Native components and some common errors you are likely to run into.

Now with all the unit tests in place, you need to write e2e tests.

E2E Testing with Nx React Native

When generating an Nx React Native app, you should see a folder ends with e2e created.

To run the e2e tests against Debug build:

In one terminal, run nx start <your app>
In another terminal, run:

# iOS
nx test-ios <your app-e2e>

# Android
nx test-android <your app-e2e>

If you want to run the e2e test against Release build, run:

# iOS
nx test-ios <your app-e2e> --prod

# Android
nx test-android <your app-e2e> --prod

Tech Stack

Test framework: Detox
Test runner: jest

Generally, the e2e tests should follow the below pattern:

For example, my app’s starter page looks like this:

Here is my e2e test to check whether it displays the heading:

For my component, I added testID in order to be queried by e2e tests:

<SafeAreaView testID="search-page">
...
<Headline testID="heading">Studio Ghibli Search Engine</Headline>

For example, my app has a flow that users can search text like totoro and go to the film details:

The e2e test looks like this:

You can read more about matchers and actions in Detox here: https://wix.github.io/Detox/docs/api/matchers.

Conclusion

Here is how to test Nx React Native apps. With Nx, you do not need to explicitly install any testing library like Jest or Detox. So you can dive right in and focus on writing the tests rather than spending time on setup.

Check out my previous blog about Nx React Native:
https://dev.to/nx/share-code-between-react-web-react-native-mobile-with-nx-12eb

Where to go from here?

Use Storybook with Nx React Native

Emily Xiong — Fri, 29 Apr 2022 18:48:50 +0000

In my previous blog, I wrote about how to develop Nx React Native applications. However, as developers, we are constantly searching for ways to make the developer experience better.

This blog will show how to add Storybook to Nx React Native applications. With Nx, you don’t need to go through this long guideline to set up the Storybook, you can quickly get it running.

Example Repo: https://github.com/xiongemi/studio-ghibli-search-engine

Storybook:

Setup

First, you need to add @nrwl/storybook to your existing Nx React Native workspace:

# npm
npm install @nrwl/storybook --save-dev

# yarn
yarn add --dev @nrwl/storybook

Then you need to generate the storybook configuration for your app or lib:

nx g @nrwl/react-native:storybook-configuration <your app or lib>

As shown in the example below, 3 folders got generated:

.storybook at workspace root
.storybook in your app or lib
storybook in your app (Note: this folder is for creating the Storybook UI component. It will only be created for the app, you will not see this for lib.)

If you choose to automatically generate *.stories file, you should see the default story looks like below:

To gather the stories you created, run the command:

nx storybook <your app or lib>

You should see in the terminal saying:

Writing to <your workspace>/.storybook/story-loader.js

In your <your workspace>/.storybook/story-loader.js, it should list your stories created under your app or lib similar to the below example:

Also, notice that in your app’s main file, the import of the App changed to storybook/toggle-storybook:

import App from './storybook/toggle-storybook';

View Storybook for App

To view the storybook on the simulator/emulator/device, start the app like you usually do:

# iOS
nx run-ios <your app>

# Android
nx run-android <your app>

In your simulator/emulator/device, open the Debug Menu by entering d in terminal. You should see the menu option Toggle Storybook in the Debug Menu:

When switching on the toggle, you should see the list of your component stories:

View Storybook for Lib

Note: the storybook can only be viewed inside an app. To view the storybook for lib in the workspace, you need to first set up the storybook for an app in the workspace.
Then run the command:

nx storybook <your lib>

This should update the .storybook/story-loader.js with stories in your lib.
Then just run the command to start your app, you should see the storybook for your lib.

Troubleshooting

Error: Couldn’t find a navigation object

If you are using the library @react-navigation/native and you are using hooks like useNavigtion and useRoute inside your component, you are likely to get the below error: " Couldn’t find a navigation object".

The easiest way is just to mock this library and create a decorator for it:

Then in your story, you just need to add the above NavigationDecorator:

Now, this error should go away and you should see your component in your storybook.

If your component is using the useRoute hook and expecting certain routing parameters, then you need to customize the mock NavigationDecorator for your component. For example, below is a component that is expecting an id from the route parameters:

const route = useRoute<RouteProp<{ params: { id: string } }>>();
const id = route.params?.id;

The mock NavigationDecorator will become:

Error: Could not find “store”

If you are using Redux store and your component is stateful and connected to the store, you are likely to get the below error:

The simple solution is to mock the store. First, you need to install the library redux-mock-store and its typing:

# npm
npm install redux-mock-store @types/redux-mock-store --save-dev

# yarn
yarn add redux-mock-store @types/redux-mock-store --dev

Similarly, like how you mock up the navigation, you need to mock up the store. The below example mocks the store with the initial root state:

You can add this store decorator to your story:

Error: Actions must be plain objects

If you use an async action (for example, an action created using createAsyncThunk from @reduxjs/toolkit), you would likely run into the below error: Actions must be plain objects.

Now to resolve this, add thunk to mock store middleware:

Conclusion

Here are how to use Storybook with Nx React Native and some common errors you may run into. With Nx React Native, you can quickly view Storybook with a toggle option in Debug Menu. It allows developers to interact and test with components during development.

Check out my previous blog about Nx React Native:

Share code between React Web & React Native Mobile with Nx