Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mate-h/tamagui-base

Template repository for cross platform app development with React.
https://github.com/mate-h/tamagui-base

design-system expo monorepo react-native react-navigation

Last synced: 27 days ago
JSON representation

Template repository for cross platform app development with React.

Awesome Lists containing this project

README 

        
# tamagui-base



Template repository for cross platform app development with React.



## 🔦 About



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



This repository serves as a template, and is a variation of the Create Tamagui App CLI template but with PNPM Workspace instead of Yarn workspace.



https://tamagui.dev/docs/guides/create-tamagui-app



## 📦 Included packages



- [Tamagui](https://tamagui.dev) 🪄

- [solito](https://solito.dev) for cross-platform navigation

- Expo SDK

- Next.js

- React Navigation



## 🗂 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.)

    - `navigation` Next.js has a `pages/` 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: `pnpm i`



- Next.js local dev: `pnpm web`



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



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



- Expo local dev: `pnpm native`



## Developing



We've added `packages/ui` to show an example of [building your own design system](https://tamagui.dev/docs/guides/design-systems).



## UI Kit



Note we're following the [design systems guide](https://tamagui.dev/docs/guides/design-systems) 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`:



```sh

cd packages/app

pnpm add date-fns

cd ../..

pnpm i

```



### Native dependencies



If you're installing a library with any native code, you must install it in `expo`:



```sh

cd apps/expo

pnpm i react-native-reanimated

cd ..

pnpm i

```



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 `pnpm set version berry && pnpm install`

- Build command: leave default setting

- Output dir: leave default setting