All Projects → axeldelafosse → expo-next-monorepo-example

axeldelafosse / expo-next-monorepo-example

Licence: MIT license
Create a universal React app using Expo and Next.js in a monorepo

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
SCSS
7915 projects
shell
77523 projects

Projects that are alternatives of or similar to expo-next-monorepo-example

Margarita
[not actively maintained] Mobile and Web application implementing Kiwi.com Tequila API
Stars: ✭ 213 (-20.52%)
Mutual labels:  monorepo, react-native-web, expo
Lego Expo
Play with Lego bricks anywhere using Expo
Stars: ✭ 65 (-75.75%)
Mutual labels:  react-native-web, expo
Examples
Example projects that demonstrate how to use Expo APIs and integrate Expo with other popular tools
Stars: ✭ 747 (+178.73%)
Mutual labels:  react-native-web, expo
Expo Cli
Tools for creating, running, and deploying universal Expo and React Native apps
Stars: ✭ 1,993 (+643.66%)
Mutual labels:  react-native-web, expo
react-flappy-bird
A side-scroller where the player controls a bird, attempting to fly between columns of green pipes without hitting them.
Stars: ✭ 55 (-79.48%)
Mutual labels:  react-native-web, expo
Instagram
A universal instagram clone built with Expo
Stars: ✭ 258 (-3.73%)
Mutual labels:  react-native-web, expo
react-native-web-expo-boilerplate
I am no longer in maintenance
Stars: ✭ 64 (-76.12%)
Mutual labels:  react-native-web, expo
react-native-expo-web
All-in-one React Native project (Expo + react-native-web)
Stars: ✭ 16 (-94.03%)
Mutual labels:  react-native-web, expo
Awesome React Native Web
💙 React Native Web patterns, techniques, tips, and tricks ✨
Stars: ✭ 215 (-19.78%)
Mutual labels:  react-native-web, expo
Pillar Valley
👾A cross-platform video game built with Expo, three.js, and Firebase! 🎮🕹
Stars: ✭ 242 (-9.7%)
Mutual labels:  react-native-web, expo
eas-monorepo-example
Fast pnpm monorepo for cross-platform apps built with Expo / React Native and React.
Stars: ✭ 187 (-30.22%)
Mutual labels:  monorepo, expo
Expo-Badge
A design study for Expo badges
Stars: ✭ 22 (-91.79%)
Mutual labels:  react-native-web, expo
react-native-ink
React Native for CLIs
Stars: ✭ 28 (-89.55%)
Mutual labels:  react-native-web, expo
Expo Spotify
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Stars: ✭ 287 (+7.09%)
Mutual labels:  react-native-web, expo
pro-chat
Full featured chat app built with 💙 Expo & Firebase 🔥
Stars: ✭ 24 (-91.04%)
Mutual labels:  react-native-web, expo
Match Media
Universal polyfill for match media API using Expo APIs on mobile
Stars: ✭ 95 (-64.55%)
Mutual labels:  react-native-web, expo
apple-notes
A clone of the Apple Notes app but made universally with Expo
Stars: ✭ 53 (-80.22%)
Mutual labels:  react-native-web, expo
Expo Dark Mode Switch
A beautiful React dark mode switch component for iOS, Android, and Web
Stars: ✭ 137 (-48.88%)
Mutual labels:  react-native-web, expo
React Native Web Monorepo
Code sharing between iOS, Android & Web using monorepo
Stars: ✭ 697 (+160.07%)
Mutual labels:  monorepo, react-native-web
React Native Web Template
Template project for sharing code between iOS, Android & Web using monorepo
Stars: ✭ 45 (-83.21%)
Mutual labels:  monorepo, react-native-web

⚠️ This repo has moved to the Solito starter

You can now use Solito 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: #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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].