4466ba436b
## Description This PR ensures that the default prettier config is used for examples and templates. This config is compatible with `prettier@3` as well (upgrading prettier is bigger change that can be a future PR). ## Changes - Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will be needed upgrading to prettier@3) - Added `examples/.prettierrc.json` with default config (this will change every example) - Added `packages/create-next-app/templates/.prettierrc.json` with default config (this will change every template) ## Related - Fixes #54402 - Closes #54409
4.3 KiB
4.3 KiB
With Expo TypeScript
This is a starter project for creating universal React apps with Next.js, Expo, and TypeScript.
💡 For the most updated info, see the Expo + Next.js Docs!
- Next.js cannot be used for SSR in your native app.
- The native bundle is built using the Metro bundler and may not have the same level of optimization as the web bundle which is compiled using the Next.js Webpack configuration.
- Expo transpiles
react-native-web
packages by default to enable the use ofreact-native
in a browser or Node.js environment. - All Expo packages work in the browser. If you experience issues using them in a Node environment, please report them here: Expo issues.
- Most community
react-native-*
packages do not support web, please refer to reactnative.directory for a list of web compatible packages. - Eject the
pages/_document
component by runningyarn next-expo customize
. - To use fonts and images, see the Expo docs.
Deploy your own
Deploy the example using Vercel (web only):
Deploy the native app to the App store and Play store using Expo deployment.
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-expo-typescript with-expo-typescript-app
yarn create next-app --example with-expo-typescript with-expo-typescript-app
pnpm create next-app --example with-expo-typescript with-expo-typescript-app
Running web
🚨 Using default Expo web with Next.js is not supported.
- Start the Next.js project with
yarn dev
(yarn next dev
).
Deploy the web app to the cloud with Vercel (Documentation).
Running native
- Install the Expo CLI
npm i -g expo-cli
. - Start the Metro bundler with
yarn ios
oryarn android
-- This runsexpo start
with the Expo CLI. - You can run the mobile app using the Expo client app, or by running
yarn eject
and building the project manually (this requires a macbook for iOS).
Deploy the native app to the App store and Play store using Expo deployment.
Troubleshooting
You may find that certain packages like @ui-kitten/components
do not work in the browser. This is because they need to be transpiled by Next.js, you can fix this by doing the following:
- Install the following:
yarn add -D next-compose-plugins next-transpile-modules
- Modify the Next.js config
next.config.js
:
const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")([
// Add the name of your package here...
"@ui-kitten/components",
]);
module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]], {
// ...
});