🚧 🚧 OBSOLETE 🚧 🚧

I believe expo-router (with a simpler setup) achieves the same thing as this template. There's no need to go down the rabbit hole and use Next.js + Expo.

🌒 Luna

🌒 Luna is a React Native and Next.js boilerplate so your app can run on Android, IOS and Web concurrently.

You can try the live example here.

⭐ Features

📖 Please visit the 🌒 Luna Wiki to see why and how we decided to implement all those features.
🚀 For an advanced start, but currently without Next.js, you can head to react-native-firebase-authentification-example which is built on top of Luna template

• React Native Web
• Next.js
• Solito
• Tamagui
• TypeScript
• No monorepo (everything in one app)
• Other

🎛 Setup

⚠️ Please be sure your environment is set up correctly for React Native
🔗 https://reactnative.dev/docs/environment-setup

🛸 Usage

You can create a new project interactively by running:

yarn create luna-app

After that, all the commands from below are available:

• 📱 Native

yarn start

Start Metro Bundler. After that, you can press i or a to run the app on iOS or Android simulator respectively.

• 💻 Web

yarn web

Runs the app in the web in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the web app for production with Next.js.

yarn next-start

Runs the web app in production mode with Next.js.
Open http://localhost:3000 to view it in the browser.
Note: You have to run yarn build first!

🪲 Debugging

• React Native CLI

This template only works with the new CLI. Please make sure that:

• your environment is set up correctly for React Native CLI.
• you have uninstalled the legacy react-native-cli first (npm uninstall -g react-native-cli) for the below command to work. If you wish to not use npx, you can also install the new CLI globally (npm i -g @react-native-community/cli or yarn global add @react-native-community/cli).

If you tried the above and still get the @criszz77/luna: Not found error, please try adding the --ignore-existing flag to force npx to ignore any locally installed versions of the CLI and use the latest. Further information can be found here: https://github.com/react-native-community/cli#about

• React Native Web

React Dev Tools supports inspecting and editing of React Native styles. It’s recommended that you rely more on React Dev Tools and live/hot-reloading rather than inspecting and editing the DOM directly.

📃 License

📃 This project is released under the MIT License.
💻 By contributing, you agree that your contributions will be licensed under its MIT License.

🏆 Sponsors