Tamagui + Solito + Next + Expo Monorepo

npm create tamagui

🔦 About

This monorepo is a starter for an Expo + Next.js + Tamagui + Solito app.

Many thanks to @FernandoTheRojo for the Solito starter monorepo which this was forked from. Check out his talk about using expo + next together at Next.js Conf 2021.

📦 Included packages

• Tamagui 🪄
• solito for cross-platform navigation
• Expo SDK
• Next.js
• Expo Router

🛠️ Local Setup

Clone: https://github.com/tamagui/starter-free
(cloning from releases allows you to use specific versions of tamagui starter).

Or just run yarn create tamagui@latest to use the latest.

run yarn install to the following directories:

• /root then yarn build
• apps/expo
• apps/next

🎨 Theme Builder

Utilize Tamagui's theme builder when starting a new project:
https://tamagui.dev/theme

📃 Tamagui Cursor Rules

Refer to these cursor rules for Tamagui: https://cursor.directory/monorepo-tamagui

🗂 Folder layout

The main apps are:

• expo (native)

• next (web)

• packages shared packages across apps

  • ui includes your custom UI kit that will be optimized by Tamagui
  • app you'll be importing most files from app/
    • features (don't use a screens folder. organize by feature.)
    • provider (all the providers that wrap the app, and some no-ops for Web.)

You can add other folders inside of packages/ if you know what you're doing and have a good reason to.

🏁 Start the app

• Install dependencies: yarn

• Next.js local dev: yarn web

To run with optimizer on in dev mode (just for testing, it's faster to leave it off): yarn web:extract. To build for production yarn web:prod.

To see debug output to verify the compiler, add // debug as a comment to the top of any file.

• Expo local dev: yarn native

UI Kit

Note we're following the design systems guide and creating our own package for components.

See packages/ui named @my/ui for how this works.

🆕 Add new dependencies

Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:

cd packages/app
yarn add date-fns
cd ../..
yarn

Web dependencies

If you're installing dependencies for web, install it in next:

cd apps/next
yarn add next-auth
cd ../..
yarn

Native dependencies

If you're installing a library with any native code, you must install it in expo using npx expo install (not yarn add) to ensure proper version compatibility with your Expo SDK:

cd apps/expo
npx expo install react-native-reanimated
cd ..
yarn

Update new dependencies

Pure JS dependencies

yarn upgrade-interactive

You can also install the native library inside of packages/app if you want to get autoimport for that package inside of the app folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs. This is a classic monorepo issue. I use lerna-update-wizard to help with this (you don't need to use Lerna to use that lib).

You may potentially want to have the native module transpiled for the next app. If you get error messages with Cannot use import statement outside a module, you may need to use transpilePackages in your next.config.js and add the module to the array there.

Deploying to Vercel

• Root: apps/next
• Install command to be yarn set version stable && yarn install
• Build command: leave default setting
• Output dir: leave default setting

Deploying to Expo EAS

• Root: apps/expo
• Run specific build profile and platform, example:
  eas build --profile production --platform android
• Finally submit to EAS: eas submit