Skip to content

Commit ed2ca82

Browse files
jtmthfjtmthf
authored
Created Expo TypeScript example project (vercel#13182)
1 parent 1a53f45 commit ed2ca82

File tree

11 files changed

+212
-0
lines changed

11 files changed

+212
-0
lines changed

‎examples/with-expo-typescript/.gitignore

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
node_modules/**/*
2+
.expo/*
3+
npm-debug.*
4+
*.jks
5+
*.p8
6+
*.p12
7+
*.key
8+
*.mobileprovision
9+
*.orig.*
10+
web-build/
11+
web-report/
12+
13+
# macOS
14+
.DS_Store
15+
16+
# @generated: @expo/next-adapter@2.1.9
17+
/.expo/*
18+
# Expo Web
19+
/web-build/*
20+
# Expo Native
21+
*.jks
22+
*.p8
23+
*.p12
24+
*.key
25+
*.mobileprovision
26+
*.orig.*
27+
# Next.js
28+
/.next/*
29+
/out/
30+
# Next.js production
31+
/build/
32+
# Next.js dependencies
33+
/.pnp
34+
.pnp.js
35+
# @end @expo/next-adapter

‎examples/with-expo-typescript/App.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Re-export the root component from the Next.js website
2+
// as the root component for the native React app.
3+
export { default } from './pages/index'

‎examples/with-expo-typescript/README.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# With Expo TypeScript
2+
3+
[![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)
4+
[![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)
5+
[![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/)
6+
7+
This is a starter project for creating universal React apps with Next.js, Expo, and TypeScript.
8+
9+
> 💡 For the most updated info, see the [Expo + Next.js Docs](https://docs.expo.io/guides/using-nextjs/)!
10+
11+
![iOS, Android, and web running with Expo and Next.js](./public/demo.png)
12+
13+
- Next.js cannot be used for SSR in your native app.
14+
- 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.
15+
- Expo transpiles `react-native-web` packages by default to enable the use of `react-native` in a browser or Node.js environment.
16+
- 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).
17+
- 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.
18+
- Eject the `pages/_document` component by running `yarn next-expo customize`.
19+
- To use fonts and images, see [the Expo docs](https://docs.expo.io/guides/using-nextjs/#image-support).
20+
21+
## Deploy your own
22+
23+
Deploy the example using [Vercel](https://vercel.com) (web only):
24+
25+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-expo)
26+
27+
Deploy the native app to the App store and Play store using [Expo deployment](https://docs.expo.io/distribution/app-stores/).
28+
29+
## How to use
30+
31+
### Using `create-next-app`
32+
33+
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:
34+
35+
```bash
36+
npx create-next-app --example with-expo with-expo-app
37+
# or
38+
yarn create next-app --example with-expo with-expo-app
39+
```
40+
41+
### Running web
42+
43+
> 🚨 Using default Expo web with Next.js is not supported.
44+
45+
- Start the Next.js project with `yarn dev` (`yarn next dev`).
46+
47+
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)).
48+
49+
### Running native
50+
51+
- Install the Expo CLI `npm i -g expo-cli`.
52+
- Start the Metro bundler with `yarn ios` or `yarn android` -- This runs `expo start` with the Expo CLI.
53+
- 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).
54+
55+
Deploy the native app to the App store and Play store using [Expo deployment](https://docs.expo.io/distribution/app-stores/).
56+
57+
## Troubleshooting
58+
59+
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:
60+
61+
- Install the following:
62+
63+
```sh
64+
yarn add -D next-compose-plugins next-transpile-modules
65+
```
66+
67+
- Modify the Next.js config `next.config.js`:
68+
69+
```js
70+
const { withExpo } = require('@expo/next-adapter')
71+
const withPlugins = require('next-compose-plugins')
72+
const withTM = require('next-transpile-modules')([
73+
// Add the name of your package here...
74+
'@ui-kitten/components',
75+
])
76+
77+
module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]], {
78+
// ...
79+
})
80+
```

‎examples/with-expo-typescript/babel.config.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// @generated: @expo/next-adapter@2.1.9
2+
// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps
3+
4+
module.exports = { presets: ['@expo/next-adapter/babel'] }

‎examples/with-expo-typescript/next-env.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

‎examples/with-expo-typescript/next.config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// @generated: @expo/next-adapter@2.1.9
2+
// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo
3+
4+
const { withExpo } = require('@expo/next-adapter')
5+
6+
module.exports = withExpo({
7+
projectRoot: __dirname,
8+
})

‎examples/with-expo-typescript/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "with-expo-typescript",
3+
"version": "1.0.0",
4+
"main": "node_modules/expo/AppEntry.js",
5+
"scripts": {
6+
"dev": "next",
7+
"build": "next build",
8+
"start": "expo start",
9+
"android": "expo start --android",
10+
"ios": "expo start --ios",
11+
"web": "next",
12+
"eject-next": "next-expo customize",
13+
"eject": "expo eject",
14+
"type-check": "tsc"
15+
},
16+
"dependencies": {
17+
"expo": "~37.0.3",
18+
"next": "latest",
19+
"react": "~16.9.0",
20+
"react-dom": "~16.9.0",
21+
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
22+
"react-native-web": "~0.11.7"
23+
},
24+
"devDependencies": {
25+
"@babel/core": "^7.8.6",
26+
"@expo/next-adapter": "2.1.9",
27+
"@types/node": "14.0.4",
28+
"@types/react": "16.9.35",
29+
"@types/react-dom": "16.9.8",
30+
"@types/react-native": "0.62.10",
31+
"babel-preset-expo": "~8.1.0",
32+
"typescript": "3.9.3"
33+
}
34+
}

‎examples/with-expo-typescript/pages/_document.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// @generated: @expo/next-adapter@2.1.9
2+
export { default } from '@expo/next-adapter/document'

‎examples/with-expo-typescript/pages/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// @generated: @expo/next-adapter@2.1.9
2+
import React from 'react'
3+
import { StyleSheet, Text, View } from 'react-native'
4+
5+
export default function App() {
6+
return (
7+
<View style={styles.container}>
8+
<Text style={styles.text}>Welcome to Expo + Next.js 👋</Text>
9+
</View>
10+
)
11+
}
12+
13+
const styles = StyleSheet.create({
14+
container: {
15+
flex: 1,
16+
justifyContent: 'center',
17+
alignItems: 'center',
18+
},
19+
text: {
20+
fontSize: 16,
21+
},
22+
})

‎examples/with-expo-typescript/public/demo.png

126 KB
Loading

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy