How to use React Native with Nx in monorepo

Xiong describes how a monorepo can help teams share components across multiple mobile apps, business logic between React Native and web apps, and types between frontend and backend code. She defines a monorepo as one repository containing distinct projects with clear relationships. Nx provides generators and defaults for testing, linting, and end-to-end testing, plus a dependency graph and computation caching.

Xiong creates an Nx workspace with a React Native app, then adds a second app and a shared UI components library. She generates a button component in the library and imports it into both apps. The dependency graph then shows each app depending on the shared library.

Xiong uses a Studio Ghibli search app to demonstrate a React Native mobile app and a React web app sharing state management, API services, models, interfaces, and types. She shows how to launch the mobile app in a simulator and serve the web app in a browser.

Nx sets up unit testing with React Native Testing Library, and generated components include spec files. Xiong runs tests with `nx test` and describes `--watch` for rerunning them after changes. For end-to-end testing, she uses Detox with Jest to follow a Totoro search from the input through results to the My Neighbor Totoro detail page.

Xiong describes Storybook as a tool for developing, testing, and documenting presentational components with mock data. She shows how to generate a React Native Storybook configuration, launch it alongside the app, and open a film card story with sample data.