Add react-native-elements etc (has errors)

.gitignore

@@ -1,5 +1,4 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-# @generated: @expo/[email protected]
 node_modules/**/*
 .expo/*
 npm-debug.*

README.md

@@ -59,15 +59,15 @@ 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
 
 …then navigate to `http://localhost:3005/`
 
 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)

babel.config.js

@@ -1,7 +1,6 @@
-// @generated: @expo/[email protected]
-// 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']
+  }
 }

next.config.js

@@ -1,19 +1,28 @@
-// @generated: @expo/[email protected]
-// 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)

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 <[email protected]>",
   "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"
   }
 }

pages/_document.js

@@ -1,2 +1,60 @@
-// @generated: @expo/[email protected]
-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 = [
+      <style
+        key='react-native-style'
+        dangerouslySetInnerHTML={{ __html: style }}
+      />,
+      getStyleElement()
+    ]
+    return { ...page, styles: Children.toArray(styles) }
+  }
+
+  render () {
+    return (
+      <Html style={{ height: '100%' }}>
+        <Head />
+        <body style={{ height: '100%', overflow: 'hidden' }}>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}

pages/index.js

@@ -1,10 +1,9 @@
 import React from 'react'
-// @generated: @expo/[email protected]
 import { StyleSheet, Text } from 'react-native'
 
 import Page from '../components/page/Page'
 import { H1 } from '../components/webElements'
-import VideoPlayer from '../components/VideoPlayer'
+// import VideoPlayer from '../components/VideoPlayer'
 
 import { config } from '../config/config'
 
@@ -14,9 +13,6 @@ export default function StartPage () {
       <H1 style={styles.h1}>Heading H1</H1>
       <Text style={styles.text}>This is {config.appName} running</Text>
       <Text style={styles.text}>{config.appTagline}</Text>
-      <VideoPlayer
-        videoUrl='https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'
-      />
     </Page>
   )
 }