https://github.com/axeldelafosse/storybook-rnw-monorepo

Use Storybook (with React Native for Web) in your Expo + Next.js monorepo
https://github.com/axeldelafosse/storybook-rnw-monorepo

expo monorepo nextjs react react-native react-native-web storybook storybook-addon

Last synced: about 3 hours ago
JSON representation

Use Storybook (with React Native for Web) in your Expo + Next.js monorepo

• Host: GitHub
• URL: https://github.com/axeldelafosse/storybook-rnw-monorepo
• Owner: axeldelafosse
• License: mit
• Created: 2021-11-18T10:49:20.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-26T17:07:19.000Z (almost 3 years ago)
• Last Synced: 2023-03-05T12:32:16.347Z (over 1 year ago)
• Topics: expo, monorepo, nextjs, react, react-native, react-native-web, storybook, storybook-addon
• Language: TypeScript
• Homepage:
• Size: 865 KB
• Stars: 39
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# 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`

## Navigation

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.

## License

[MIT](https://github.com/axeldelafosse/expo-next-monorepo-example/blob/main/LICENSE.md)