Tamagui + Solito + Next + Expo Monorepo
npx create-tamagui-app@latest myapp
⚡️ Instant clone & deploy
🔦 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
for cross-platform views, themes and animationssolito
for cross-platform navigation- Expo SDK 44
- Next.js 12
- React Navigation 6
🗂 Folder layout
The main apps are:
-
expo
(native) -
next
(web) -
packages
shared packages across appsui
includes your custom UI kit that will be optimized by Tamaguiapp
you'll be importing most files fromapp/
features
(don't use ascreens
folder. organize by feature.)provider
(all the providers that wrap the app, and some no-ops for Web.)navigation
Next.js has apages/
folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links.
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
- Runs
yarn next
- Runs
-
Expo local dev:
yarn native
- Runs
expo start
- Runs
Developing
We've added packages/ui
to show an example of building your own design system.
You need to watch it to have changes propagate, we've added a root watch
command you should run in a separate terminal alongside the apps:
yarn watch
If you want to see Tamagui extract, try running yarn web:optimize
and put a debug pragma at the top of packages/app/features/home.tsx
, like so:
// debug
You'll see lots of output including the compiled HTML, CSS and all the steps it takes to get there.
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
Native dependencies
If you're installing a library with any native code, you must install it in expo
:
cd apps/expo
yarn add react-native-reanimated
cd ..
yarn
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).