bcd8de3262
I added ` *.tsbuildinfo` to gitignores of examples that use typescript and don't already have it. By use typescript I mean have `tsconfig` somewhere in their directory tree.
I used the following script to update the files:
```bash
#!/bin/bash
set -eou pipefail
cd examples
examples=`git ls-files . | grep tsconfig | xargs dirname | grep -v "/"`
for example in $examples; do
if ! grep -q tsbuildinfo $example/.gitignore; then
gitignore="$example/.gitignore"
echo $gitignore
tail -c1 $gitignore | read -r _ || echo >> $gitignore
echo -e "\n# typescript\n*.tsbuildinfo" >> $gitignore
fi
done
```
|
||
|---|---|---|
| .. | ||
| pages | ||
| public | ||
| .gitignore | ||
| App.tsx | ||
| babel.config.js | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
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-webpackages by default to enable the use ofreact-nativein 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/_documentcomponent 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
# or
yarn create next-app --example with-expo-typescript with-expo-typescript-app
# or
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 iosoryarn android-- This runsexpo startwith the Expo CLI. - You can run the mobile app using the Expo client app, or by running
yarn ejectand 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 }]], {
// ...
})