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: Luis Alvarez <luis@vercel.com>
This commit is contained in:
parent
5fdf3b8a46
commit
33800de9f8
9 changed files with 166 additions and 0 deletions
23
examples/with-expo/.gitignore
vendored
Normal file
23
examples/with-expo/.gitignore
vendored
Normal file
|
@ -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*
|
3
examples/with-expo/App.js
Normal file
3
examples/with-expo/App.js
Normal file
|
@ -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'
|
80
examples/with-expo/README.md
Normal file
80
examples/with-expo/README.md
Normal file
|
@ -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 }]], {
|
||||
// ...
|
||||
})
|
||||
```
|
4
examples/with-expo/babel.config.js
Normal file
4
examples/with-expo/babel.config.js
Normal file
|
@ -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'] }
|
8
examples/with-expo/next.config.js
Normal file
8
examples/with-expo/next.config.js
Normal file
|
@ -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,
|
||||
})
|
24
examples/with-expo/package.json
Normal file
24
examples/with-expo/package.json
Normal file
|
@ -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"
|
||||
}
|
||||
}
|
2
examples/with-expo/pages/_document.js
Normal file
2
examples/with-expo/pages/_document.js
Normal file
|
@ -0,0 +1,2 @@
|
|||
// @generated: @expo/next-adapter@2.1.5
|
||||
export { default } from '@expo/next-adapter/document'
|
22
examples/with-expo/pages/index.js
Normal file
22
examples/with-expo/pages/index.js
Normal file
|
@ -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 (
|
||||
<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,
|
||||
},
|
||||
})
|
BIN
examples/with-expo/public/demo.png
Normal file
BIN
examples/with-expo/public/demo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 126 KiB |
Loading…
Reference in a new issue