mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
0129f23dc0
Supabase auth, Stripe, purchase modals, Bento and Takeout promotion, the consulting link and the vendor's talk images were the upstream business, not documentation. The header, home page, theme page and quick nav lose the account and promotion surfaces; the content loses the paid gating.
114 lines
2.9 KiB
Plaintext
114 lines
2.9 KiB
Plaintext
---
|
|
title: Bootstrapping
|
|
description: Starter kits for React Native
|
|
---
|
|
|
|
Set up a starter repo to help you learn about and bootstrap your Gui app:
|
|
|
|
### Templates
|
|
|
|
There are four starter templates:
|
|
|
|
- Free - Expo, Expo Router, Solito and Next.js (with both `/pages` and `/app`
|
|
dir).
|
|
- Learn - Client-only web app with Webpack or Vite. Useful to understand how to
|
|
set up hanzogui.config.ts.
|
|
- [Expo Router](/docs/guides/expo) - The Expo Router default starter with
|
|
Gui added via `@hanzogui/metro-plugin`.
|
|
|
|
### Usage
|
|
|
|
```bash
|
|
npm create hanzogui@latest
|
|
```
|
|
|
|
Check out
|
|
[the source of the templates](https://github.com/hanzogui/starter-free).
|
|
|
|
A big shout out to [Fernando Rojo](https://twitter.com/fernandotherojo) for
|
|
creating [Solito](https://solito.dev), a great library for sharing all your
|
|
views between Expo and Next.js, and the bootstrap repo we borrowed from.
|
|
|
|
### Starting out
|
|
|
|
The starter-free app requires yarn to run.
|
|
|
|
To run the app:
|
|
|
|
```bash
|
|
cd myapp
|
|
yarn
|
|
yarn web # Web local dev
|
|
yarn native # Expo local dev (only for `starter-free`)
|
|
```
|
|
|
|
## 📦 Included packages (`starter-free`)
|
|
|
|
- `hanzogui` for cross-platform views, themes and animations
|
|
- `solito` for cross-platform navigation
|
|
- `expo-router` for having same routing concepts between web and native
|
|
- Expo SDK 48
|
|
- Next.js 13
|
|
|
|
By integrating `Gui`, `expo-router`, `Solito`, and `Next.js` you can enjoy
|
|
the power and simplicity of creating universal apps.
|
|
|
|
## 🗂 Folder layout
|
|
|
|
- `apps` entry points for each app
|
|
- `expo`
|
|
- `next`
|
|
|
|
- `packages` shared packages across apps
|
|
- `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` only for starter-free template, contains the navigation code
|
|
for RN
|
|
|
|
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`
|
|
- Expo local dev: `yarn native`
|
|
- Runs `expo start`
|
|
|
|
## 🆕 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`:
|
|
|
|
```bash
|
|
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
|
|
`apps/expo`:
|
|
|
|
```bash
|
|
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).
|