diff --git a/examples/with-expo/.gitignore b/examples/with-expo/.gitignore new file mode 100644 index 0000000000000000000000000000000000000000..187d9ae89520b03b49b109be105c40f48fe86f3c --- /dev/null +++ b/examples/with-expo/.gitignore @@ -0,0 +1,23 @@ +# @generated: @expo/next-adapter@2.1.5 +node_modules/**/* +.expo/* +npm-debug.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision +*.orig.* +web-build/ +web-report/ + +# debug +yarn-debug.log* +yarn-error.log* + +# macOS +.DS_Store + +# misc +.DS_Store +.env* diff --git a/examples/with-expo/App.js b/examples/with-expo/App.js new file mode 100644 index 0000000000000000000000000000000000000000..3bb8520edfd9e67ec83c8a6fb2699585d4af7cf0 --- /dev/null +++ b/examples/with-expo/App.js @@ -0,0 +1,3 @@ +// Re-export the root component from the Next.js website +// as the root component for the native React app. +export { default } from './pages/index' diff --git a/examples/with-expo/README.md b/examples/with-expo/README.md new file mode 100644 index 0000000000000000000000000000000000000000..8ac0de1c246d6589da55a14a6dada3fee2b47c1f --- /dev/null +++ b/examples/with-expo/README.md @@ -0,0 +1,80 @@ +# With Expo + +[![supports iOS](https://img.shields.io/badge/iOS-4630EB.svg?style=flat-square&logo=APPLE&labelColor=999999&logoColor=fff)](https://itunes.apple.com/app/apple-store/id982107779) +[![supports Android](https://img.shields.io/badge/Android-4630EB.svg?style=flat-square&logo=ANDROID&labelColor=A4C639&logoColor=fff)](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www) +[![supports web](https://img.shields.io/badge/web-4630EB.svg?style=flat-square&logo=GOOGLE-CHROME&labelColor=4285F4&logoColor=fff)](https://docs.expo.io/workflow/web/) + +This is a starter project for creating universal React apps with Next.js and Expo. + +> 💡 For the most updated info, see the [Expo + Next.js Docs](https://docs.expo.io/guides/using-nextjs/)! + +![iOS, Android, and web running with Expo and Next.js](./public/demo.png) + +- Next.js cannot be used for SSR in your native app. +- The native bundle is built using the [Metro bundler](https://facebook.github.io/metro/) 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 of `react-native` in a browser or Node.js environment. +- All [Expo packages](https://docs.expo.io/versions/latest/) work in the browser. If you experience issues using them in a Node environment, please report them here: [Expo issues](https://github.com/expo/expo/issues). +- Most community `react-native-*` packages do not support web, please refer to [reactnative.directory](https://reactnative.directory/?web=true) for a list of web compatible packages. +- Eject the `pages/_document` component by running `yarn next-expo customize`. +- To use fonts and images, see [the Expo docs](https://docs.expo.io/guides/using-nextjs/#image-support). + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com) (web only): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-expo) + +Deploy the native app to the App store and Play store using [Expo deployment](https://docs.expo.io/distribution/app-stores/). + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-expo with-expo-app +# or +yarn create next-app --example with-expo with-expo-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](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). + +### Running native + +- Install the Expo CLI `npm i -g expo-cli`. +- Start the Metro bundler with `yarn ios` or `yarn android` -- This runs `expo start` with the Expo CLI. +- You can run the mobile app using the [Expo client app](https://expo.io/tools), 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](https://docs.expo.io/distribution/app-stores/). + +## 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: + +```sh +yarn add -D next-compose-plugins next-transpile-modules +``` + +- Modify the Next.js config `next.config.js`: + +```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 }]], { + // ... +}) +``` diff --git a/examples/with-expo/babel.config.js b/examples/with-expo/babel.config.js new file mode 100644 index 0000000000000000000000000000000000000000..ca41054898c37f86d54f2c1831b830b258cfe1d2 --- /dev/null +++ b/examples/with-expo/babel.config.js @@ -0,0 +1,4 @@ +// @generated: @expo/next-adapter@2.1.5 +// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps + +module.exports = { presets: ['@expo/next-adapter/babel'] } diff --git a/examples/with-expo/next.config.js b/examples/with-expo/next.config.js new file mode 100644 index 0000000000000000000000000000000000000000..e88e60de3b331945f0a1f38281d405dd2562f2b5 --- /dev/null +++ b/examples/with-expo/next.config.js @@ -0,0 +1,8 @@ +// @generated: @expo/next-adapter@2.1.5 +// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo + +const { withExpo } = require('@expo/next-adapter') + +module.exports = withExpo({ + projectRoot: __dirname, +}) diff --git a/examples/with-expo/package.json b/examples/with-expo/package.json new file mode 100644 index 0000000000000000000000000000000000000000..56a19c92320c662652b416bfa29898921237258f --- /dev/null +++ b/examples/with-expo/package.json @@ -0,0 +1,24 @@ +{ + "name": "with-expo", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "android": "expo start --android", + "ios": "expo start --ios", + "web": "next", + "eject-next": "next-expo customize", + "eject": "expo eject" + }, + "dependencies": { + "expo": "~37.0.3", + "react": "~16.9.0", + "react-dom": "~16.9.0", + "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz", + "react-native-web": "~0.11.7", + "next": "latest" + }, + "devDependencies": { + "@expo/next-adapter": "2.1.5" + } +} diff --git a/examples/with-expo/pages/_document.js b/examples/with-expo/pages/_document.js new file mode 100644 index 0000000000000000000000000000000000000000..a9f6745f04b4413fde3c2eba0fa54580715bf854 --- /dev/null +++ b/examples/with-expo/pages/_document.js @@ -0,0 +1,2 @@ +// @generated: @expo/next-adapter@2.1.5 +export { default } from '@expo/next-adapter/document' diff --git a/examples/with-expo/pages/index.js b/examples/with-expo/pages/index.js new file mode 100644 index 0000000000000000000000000000000000000000..a8a9270d7483b302e3f2390b20b6b29efdb053ff --- /dev/null +++ b/examples/with-expo/pages/index.js @@ -0,0 +1,22 @@ +// @generated: @expo/next-adapter@2.1.5 +import React from 'react' +import { StyleSheet, Text, View } from 'react-native' + +export default function App() { + return ( + + Welcome to Expo + Next.js 👋 + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + text: { + fontSize: 16, + }, +}) diff --git a/examples/with-expo/public/demo.png b/examples/with-expo/public/demo.png new file mode 100644 index 0000000000000000000000000000000000000000..ed9170bec103a581c918bedb4afd02db18e91f88 Binary files /dev/null and b/examples/with-expo/public/demo.png differ