add Expo example (#12805)

* Created Expo example project

* Update examples/with-expo/README.md

* Updated usage guide

* Update README.md

* Lint fix
Co-authored-by: NLuis Alvarez <luis@vercel.com>

examples/with-expo/.gitignore

+# @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*

examples/with-expo/App.js

+// Re-export the root component from the Next.js website
+// as the root component for the native React app.
+export { default } from './pages/index'

examples/with-expo/README.md

+# 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 }]], {
+  // ...
+})
+```

examples/with-expo/babel.config.js

+// @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'] }

examples/with-expo/next.config.js

+// @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,
+})

examples/with-expo/package.json

+{
+  "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"
+  }
+}

examples/with-expo/pages/_document.js

+// @generated: @expo/next-adapter@2.1.5
+export { default } from '@expo/next-adapter/document'

examples/with-expo/pages/index.js

+// @generated: @expo/next-adapter@2.1.5
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+export default function App() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Welcome to Expo + Next.js 👋</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 16,
+  },
+})