diff --git a/.gitignore b/.gitignore index ae9412f..de161b6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. -# @generated: @expo/next-adapter@2.1.5 node_modules/**/* .expo/* npm-debug.* diff --git a/README.md b/README.md index 22eb19a..5571498 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ Install dependencies: cd [MY_APP] yarn # or npm install -Start it by doing the following: +Start it in Next.js/web mode by: yarn dev @@ -67,7 +67,7 @@ Start it by doing the following: Start Expo for native apps: - expo start + yarn dev:native In production: @@ -85,3 +85,10 @@ Change name in `public/manifest.json` ### Change port number Do search/replace for “3005” to something else. + +## Read more + +- Expo’s guide: https://docs.expo.dev/guides/using-nextjs/ + - [@expo/next-adapter](https://github.com/expo/expo-cli/tree/main/packages/next-adapter) + - Code example: https://github.com/expo/examples/tree/master/with-nextjs +- Solito framework: https://solito.dev/ (awesome but uses it’s own components/syntax) diff --git a/babel.config.js b/babel.config.js index 6a34217..d799d65 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,7 +1,6 @@ -// @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'], - plugins: ['@babel/plugin-proposal-class-properties'] +module.exports = function (api) { + api.cache(true) + return { + presets: ['babel-preset-expo'] + } } diff --git a/next.config.js b/next.config.js index 4a3afaa..3bcd421 100644 --- a/next.config.js +++ b/next.config.js @@ -1,19 +1,28 @@ -// @generated: @expo/next-adapter@2.1.5 -// Learn more: https://github.com/expo/expo/blob/master/docs/pages/guides/using-nextjs.md - const { withExpo } = require('@expo/next-adapter') +/** @type {import('next').NextConfig} */ const nextConfig = { - projectRoot: __dirname, - - // For font support: - webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { - config.module.rules.push({ - test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, - loader: 'file-loader?name=assets/[name].[hash].[ext]' - }) - return config + reactStrictMode: true, + swcMinify: true, + transpilePackages: [ + 'react-native', + 'expo', + // Add more React Native / Expo packages here... + 'react-native-elements', + 'react-native-safe-area-context', + 'react-native-vector-icons' + ], + experimental: { + forceSwcTransforms: true } + // For font support: + // webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => { + // config.module.rules.push({ + // test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, + // loader: 'file-loader?name=assets/[name].[hash].[ext]' + // }) + // return config + // } } module.exports = withExpo(nextConfig) diff --git a/package.json b/package.json index 1d82dd9..37900a5 100644 --- a/package.json +++ b/package.json @@ -1,37 +1,38 @@ { "name": "reactnative-nextjs-template", "description": "Build native apps (iOS/Android/Windows/macOS) and an SEO-optimized web app from the same React codebase", - "version": "0.1.0", + "version": "0.2.0", "author": "Tom Söderlund ", "license": "ISC", "scripts": { "dev": "next dev -p 3005", - "dev-expo": "expo start", + "dev:native": "expo start --port 19005", "build": "next build", "start": "next start", - "android": "expo start --android", - "ios": "expo start --ios", - "web-expo": "expo start --web", + "dev:android": "expo start --android", + "dev:ios": "expo start --ios", "web": "next", - "eject-next": "next-expo customize", - "eject": "expo eject", + "web:native": "expo start --web", + "eject:web": "next-expo customize", + "eject:native": "expo eject", "lint": "standard", "fix": "standard --fix" }, "dependencies": { - "expo": "^40.0.0", - "expo-av": "~8.7.0", - "next": "latest", - "react": "16.13.1", - "react-dom": "16.13.1", - "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz", - "react-native-elements": "^3.3.1", - "react-native-safe-area-context": "3.1.9", - "react-native-vector-icons": "^8.1.0", - "react-native-web": "~0.13.12" + "expo": "^47.0.0", + "expo-av": "^13.0.2", + "next": "~13.1.1", + "react": "18.1.0", + "react-dom": "18.1.0", + "react-native": "0.70.5", + "react-native-elements": "^3.4.3", + "react-native-safe-area-context": "^4.4.1", + "react-native-vector-icons": "^9.2.0", + "react-native-web": "~0.18.7" }, "devDependencies": { - "@expo/next-adapter": "2.1.5", + "@babel/core": "^7.19.3", + "@expo/next-adapter": "^5.0.0", "standard": "^16.0.3" } } diff --git a/pages/_document.js b/pages/_document.js index a9f6745..2cf28b4 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -1,2 +1,60 @@ -// @generated: @expo/next-adapter@2.1.5 -export { default } from '@expo/next-adapter/document' +import { Children } from 'react' +import Document, { Html, Head, Main, NextScript } from 'next/document' +import { AppRegistry } from 'react-native-web' + +// Follows the setup for react-native-web: +// https://necolas.github.io/react-native-web/docs/setup/#root-element +// Plus additional React Native scroll and text parity styles for various +// browsers. +// Force Next-generated DOM elements to fill their parent's height +const style = ` +html, body, #__next { + -webkit-overflow-scrolling: touch; +} +#__next { + display: flex; + flex-direction: column; + height: 100%; +} +html { + scroll-behavior: smooth; + -webkit-text-size-adjust: 100%; +} +body { + /* Allows you to scroll below the viewport; default value is visible */ + overflow-y: auto; + overscroll-behavior-y: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -ms-overflow-style: scrollbar; +} +` + +export default class MyDocument extends Document { + static async getInitialProps ({ renderPage }) { + AppRegistry.registerComponent('main', () => Main) + const { getStyleElement } = AppRegistry.getApplication('main') + const page = await renderPage() + const styles = [ +