Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/axeldelafosse/expo-next-monorepo-example
Create a universal React app using Expo and Next.js in a monorepo
https://github.com/axeldelafosse/expo-next-monorepo-example
expo monorepo nextjs react react-native react-native-web
Last synced: 1 day ago
JSON representation
Create a universal React app using Expo and Next.js in a monorepo
- Host: GitHub
- URL: https://github.com/axeldelafosse/expo-next-monorepo-example
- Owner: axeldelafosse
- License: mit
- Created: 2021-08-06T09:21:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-04T22:31:31.000Z (over 2 years ago)
- Last Synced: 2024-12-17T17:05:43.702Z (8 days ago)
- Topics: expo, monorepo, nextjs, react, react-native, react-native-web
- Language: JavaScript
- Homepage: https://expo-next-monorepo-example.vercel.app
- Size: 1.99 MB
- Stars: 283
- Watchers: 13
- Forks: 53
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ⚠️ This repo has moved to the Solito starter
You can now use [Solito](https://solito.dev/starter) instead:
`npx create-solito-app@latest`
---
# Expo + Next.js Monorepo Example
> This repo is deprecated in favor of Solito ⚠️
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
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 packages/expo`
`yarn start:expo` 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 packages/next`
`yarn dev` to start web app
Demo: https://expo-next-monorepo-example.vercel.app
## 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)