Expo + Next.js + Storybook (using React Native for Web) Monorepo Example

Here is an example showing how to create a universal React app using Expo and Next.js in a monorepo.

You'll find included:

Expo SDK 43 (with Hermes on iOS and Android)
Next.js 12
React Native for Web
TypeScript
Babel config that works for Expo and Next.js with Reanimated in a monorepo
Reanimated
React Native Bottom Sheet
Dripsy
Storybook using React Native for Web

And ready-to-use (small configuration required):

Expo Application Services
Custom Development Client
Sentry

Architecture

App

Code shared between iOS, Android and Web

cd packages/app

Expo

Native

Expo entrypoint: packages/expo/App.tsx

cd apps/expo

yarn dev to start iOS and Android app with Expo

Demo: https://expo.dev/@poolpoolpool/example?release-channel=production

Pro tip: build and launch a custom development client with SCHEME=com.example.axel yarn run:ios -d (replace axel with your first name)

Next.js

Web

Next.js entrypoint: packages/next/src/pages/_app.tsx

cd apps/next

yarn dev to start web app

Demo: https://expo-next-monorepo-example.vercel.app

Storybook React

Storybook for Web (using React Native for Web)

Storybook config: apps/storybook/.storybook/*

cd apps/storybook

yarn storybook to start Storybook

Notes

Root

Don't add any package here

App

Don't add any package here

Expo

Add all your React Native and universal packages here
Publish to Expo with yarn publish:production

Next.js

Add your web-only packages here
Deploy to Vercel with yarn deploy -- if it fails, make sure to configure your project correctly: go to your project settings on Vercel and set the "Framework Preset" to Next.js and the "Root Directory" to packages/next

Here is an example of how to handle navigation: https://github.com/axeldelafosse/expo-next-monorepo-example/pull/1

What should I do next?

Here are some ideas to get you started:

Use React Navigation
Style your app with Dripsy
Animate your app with Moti
Do some requests with SWR or Apollo Client
Build cool things with Expo Modules
Create a custom development client
Add Sentry
Add CI/CD with EAS via GitHub Actions
…

Related monorepo example

I also recommend to check out this example from Cedric: https://github.com/byCedric/eas-monorepo-example. It includes some EAS GitHub Actions and a bare workflow (ejected) example.