Upgrading to Capacitor 3

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

README.md

@@ -24,14 +24,14 @@ npm run export
 All the client side files will be sent to the `./out/` directory. These files need to be copied to the native iOS and Android projects, and this is where Capacitor comes in:
 
 ```bash
-npx cap copy
+npx cap sync
 ```
 
-Finally, to run the app, open the Native IDE for the platform and follow the IDE's run process (note: a CLI run [will be available in Capacitor 3](https://capacitorjs.com/blog/announcing-capacitor-3-0-beta):
+Finally, to run the app, use Capacitor 3 new awesome run command:
 
 ```
-npx cap open ios
+npx cap run ios
-npx cap open android
+npx cap run android
 ```
 
 ## Livereload/Instant Refresh

android/.gitignore

@@ -1,11 +1,8 @@
-# NPM renames .gitignore to .npmignore
+# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
-# In order to prevent that, we remove the initial "."
-# And the CLI then renames it
-
-# Using Android gitignore template: https://github.com/github/gitignore/blob/master/Android.gitignore
 
 # Built application files
 *.apk
+*.aar
 *.ap_
 *.aab
 
@@ -19,7 +16,8 @@
 bin/
 gen/
 out/
-release/
+#  Uncomment the following line in case you need and you don't have the release build type files in your app
+# release/
 
 # Gradle files
 .gradle/
@@ -61,6 +59,10 @@ captures/
 
 # External native build folder generated in Android Studio 2.2 and later
 .externalNativeBuild
+.cxx/
+
+# Google Services (e.g. APIs or Firebase)
+# google-services.json
 
 # Freeline
 freeline.py
@@ -84,6 +86,9 @@ lint/outputs/
 lint/tmp/
 # lint/reports/
 
+# Android Profiling
+*.hprof
+
 # Cordova plugins for Capacitor
 capacitor-cordova-android-plugins
 

android/.idea/.gitignore

@@ -1,3 +0,0 @@
-
-# Default ignored files
-/workspace.xml

android/app/build.gradle

@@ -10,8 +10,8 @@ android {
         versionName "1.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
-            // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
+             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
-            // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
+             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
             ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
         }
     }

android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-    implementation project(':capacitor-dark-mode')
+    implementation project(':capacitor-status-bar')
 
 }
 

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -1,15 +1,13 @@
 package com.getcapacitor.myapp;
 
+import static org.junit.Assert.*;
+
 import android.content.Context;
-
-import androidx.test.platform.app.InstrumentationRegistry;
 import androidx.test.ext.junit.runners.AndroidJUnit4;
-
+import androidx.test.platform.app.InstrumentationRegistry;
 import org.junit.Test;
 import org.junit.runner.RunWith;
 
-import static org.junit.Assert.*;
-
 /**
  * Instrumented test, which will execute on an Android device.
  *
@@ -17,11 +15,12 @@ import static org.junit.Assert.*;
  */
 @RunWith(AndroidJUnit4.class)
 public class ExampleInstrumentedTest {
-  @Test
-  public void useAppContext() throws Exception {
-    // Context of the app under test.
-    Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
 
-    assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    @Test
-  }
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
+
+        assertEquals("com.getcapacitor.app", appContext.getPackageName());
+    }
 }

android/app/src/main/AndroidManifest.xml

@@ -22,13 +22,6 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
 
-            <intent-filter>
-                <action android:name="android.intent.action.VIEW" />
-                <category android:name="android.intent.category.DEFAULT" />
-                <category android:name="android.intent.category.BROWSABLE" />
-                <data android:scheme="@string/custom_url_scheme" />
-            </intent-filter>
-
         </activity>
 
         <provider
@@ -45,19 +38,4 @@
     <!-- Permissions -->
 
     <uses-permission android:name="android.permission.INTERNET" />
-    <!-- Camera, Photos, input file -->
-    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
-    <!-- Geolocation API -->
-    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
-    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
-    <uses-feature android:name="android.hardware.location.gps" />
-    <!-- Network API -->
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
-    <!-- Navigator.getUserMedia -->
-    <!-- Video -->
-    <uses-permission android:name="android.permission.CAMERA" />
-    <!-- Audio -->
-    <uses-permission android:name="android.permission.RECORD_AUDIO" />
-    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
 </manifest>

android/app/src/main/assets/capacitor.config.json

@@ -1,13 +1,16 @@
 {
-  "appId": "com.example.app",
+	"appId": "com.example.app",
-  "appName": "nextjs-tailwind-capacitor",
+	"appName": "nextjs-tailwind-capacitor",
-  "bundledWebRuntime": false,
+	"bundledWebRuntime": false,
-  "npmClient": "npm",
+	"npmClient": "npm",
-  "webDir": "out",
+	"webDir": "out",
-  "plugins": {
+	"plugins": {
-    "SplashScreen": {
+		"SplashScreen": {
-      "launchShowDuration": 0
+			"launchShowDuration": 0
-    }
+		}
-  },
+	},
-  "cordova": {}
+	"cordova": {},
+	"server": {
+		"url": "http://192.168.1.123:3000"
+	}
 }

android/app/src/main/assets/capacitor.plugins.json

@@ -0,0 +1,6 @@
+[
+	{
+		"pkg": "@capacitor/status-bar",
+		"classpath": "com.capacitorjs.plugins.statusbar.StatusBarPlugin"
+	}
+]

android/app/src/main/java/com/example/app/MainActivity.java

@@ -1,21 +1,5 @@
 package com.example.app;
 
-import android.os.Bundle;
-
 import com.getcapacitor.BridgeActivity;
-import com.getcapacitor.Plugin;
 
-import java.util.ArrayList;
+public class MainActivity extends BridgeActivity {}
-
-public class MainActivity extends BridgeActivity {
-  @Override
-  public void onCreate(Bundle savedInstanceState) {
-    super.onCreate(savedInstanceState);
-
-    // Initializes the Bridge
-    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
-      // Additional plugins you've installed go here
-      // Ex: add(TotallyAwesomePlugin.class);
-    }});
-  }
-}

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -1,17 +1,18 @@
 package com.getcapacitor.myapp;
 
-import org.junit.Test;
-
 import static org.junit.Assert.*;
 
+import org.junit.Test;
+
 /**
  * Example local unit test, which will execute on the development machine (host).
  *
  * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
  */
 public class ExampleUnitTest {
-  @Test
+
-  public void addition_isCorrect() throws Exception {
+    @Test
-    assertEquals(4, 2 + 2);
+    public void addition_isCorrect() throws Exception {
-  }
+        assertEquals(4, 2 + 2);
+    }
 }

android/build.gradle

@@ -7,8 +7,8 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.6.1'
+        classpath 'com.android.tools.build:gradle:4.2.1'
-        classpath 'com.google.gms:google-services:4.3.3'
+        classpath 'com.google.gms:google-services:4.3.5'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/capacitor.settings.gradle

@@ -2,5 +2,5 @@
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
 
-include ':capacitor-dark-mode'
+include ':capacitor-status-bar'
-project(':capacitor-dark-mode').projectDir = new File('../node_modules/capacitor-dark-mode/android')
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

android/gradlew

@@ -82,6 +82,7 @@ esac
 
 CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
 
+
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
     if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
@@ -129,6 +130,7 @@ fi
 if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
     APP_HOME=`cygpath --path --mixed "$APP_HOME"`
     CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
     JAVACMD=`cygpath --unix "$JAVACMD"`
 
     # We build the pattern for arguments to be converted via cygpath
@@ -154,19 +156,19 @@ if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
         else
             eval `echo args$i`="\"$arg\""
         fi
-        i=$((i+1))
+        i=`expr $i + 1`
     done
     case $i in
-        (0) set -- ;;
+        0) set -- ;;
-        (1) set -- "$args0" ;;
+        1) set -- "$args0" ;;
-        (2) set -- "$args0" "$args1" ;;
+        2) set -- "$args0" "$args1" ;;
-        (3) set -- "$args0" "$args1" "$args2" ;;
+        3) set -- "$args0" "$args1" "$args2" ;;
-        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        4) set -- "$args0" "$args1" "$args2" "$args3" ;;
-        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
-        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
-        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
-        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
-        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+        9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
     esac
 fi
 
@@ -175,14 +177,9 @@ save () {
     for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
     echo " "
 }
-APP_ARGS=$(save "$@")
+APP_ARGS=`save "$@"`
 
 # Collect all arguments for the java command, following the shell quoting and substitution rules
 eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
 
-# by default we should be in the correct project dir, but when run from Finder on Mac, the cwd is wrong
-if [ "$(uname)" = "Darwin" ] && [ "$HOME" = "$PWD" ]; then
-  cd "$(dirname "$0")"
-fi
-
 exec "$JAVACMD" "$@"

android/gradlew.bat

@@ -29,6 +29,9 @@ if "%DIRNAME%" == "" set DIRNAME=.
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
 
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
 @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
 
@@ -37,7 +40,7 @@ if defined JAVA_HOME goto findJavaFromJavaHome
 
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
-if "%ERRORLEVEL%" == "0" goto init
+if "%ERRORLEVEL%" == "0" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
@@ -51,7 +54,7 @@ goto fail
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 
-if exist "%JAVA_EXE%" goto init
+if exist "%JAVA_EXE%" goto execute
 
 echo.
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
@@ -61,28 +64,14 @@ echo location of your Java installation.
 
 goto fail
 
-:init
-@rem Get command-line arguments, handling Windows variants
-
-if not "%OS%" == "Windows_NT" goto win9xME_args
-
-:win9xME_args
-@rem Slurp the command line arguments.
-set CMD_LINE_ARGS=
-set _SKIP=2
-
-:win9xME_args_slurp
-if "x%~1" == "x" goto execute
-
-set CMD_LINE_ARGS=%*
-
 :execute
 @rem Setup the command line
 
 set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
 
+
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
 
 :end
 @rem End local scope for the variables with windows NT shell

android/variables.gradle

@@ -1,17 +1,14 @@
 ext {
     minSdkVersion = 21
-    compileSdkVersion = 29
+    compileSdkVersion = 30
-    targetSdkVersion = 29
+    targetSdkVersion = 30
-    androidxAppCompatVersion = '1.1.0'
+    androidxActivityVersion = '1.2.0'
-    androidxCoreVersion =  '1.2.0'
+    androidxAppCompatVersion = '1.2.0'
-    androidxMaterialVersion =  '1.1.0-rc02'
+    androidxCoordinatorLayoutVersion = '1.1.0'
-    androidxBrowserVersion =  '1.2.0'
+    androidxCoreVersion = '1.3.2'
-    androidxLocalbroadcastmanagerVersion =  '1.0.0'
+    androidxFragmentVersion = '1.3.0'
-    androidxExifInterfaceVersion = '1.2.0'
+    junitVersion = '4.13.1'
-    firebaseMessagingVersion =  '20.1.2'
+    androidxJunitVersion = '1.1.2'
-    playServicesLocationVersion =  '17.0.0'
+    androidxEspressoCoreVersion = '3.3.0'
-    junitVersion =  '4.12'
+    cordovaAndroidVersion = '7.0.0'
-    androidxJunitVersion =  '1.1.1'
-    androidxEspressoCoreVersion =  '3.2.0'
-    cordovaAndroidVersion =  '7.0.0'
 }

components/AppShell.jsx

@@ -1,4 +1,5 @@
 import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
+import { StatusBar, Style } from '@capacitor/status-bar';
 
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
@@ -6,6 +7,14 @@ import Menu from './Menu';
 
 import Tabs from './pages/Tabs';
 
+window.matchMedia("(prefers-color-scheme: dark)").addListener(async (status) => {
+  try {
+    await StatusBar.setStyle({
+      style: status.matches ? Style.Dark : Style.Light,
+    });
+  } catch {}
+});
+
 const AppShell = () => {
   return (
     <IonApp>

components/Menu.jsx

@@ -1,4 +1,4 @@
-import { Plugins, StatusBarStyle } from '@capacitor/core';
+import { StatusBar, Style } from '@capacitor/status-bar';
 import {
   IonContent,
   IonHeader,
@@ -8,13 +8,11 @@ import {
   IonList,
   IonMenu,
   IonMenuToggle,
-  IonRouterContext,
   IonTitle,
   IonToolbar,
 } from '@ionic/react';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { cog, flash, list } from 'ionicons/icons';
-import { useHistory, useLocation } from 'react-router-dom';
 
 const pages = [
   {
@@ -35,24 +33,19 @@ const pages = [
 ];
 
 const Menu = () => {
-  const { StatusBar } = Plugins;
-
-  const ionRouterContext = useContext(IonRouterContext);
-  const location = useLocation();
-
   const [isDark, setIsDark] = useState(false);
 
   const handleOpen = async () => {
     try {
       await StatusBar.setStyle({
-        style: isDark ? StatusBarStyle.Light : StatusBarStyle.Dark,
+        style: isDark ? Style.Dark : Style.Light,
       });
     } catch {}
   };
   const handleClose = async () => {
     try {
       await StatusBar.setStyle({
-        style: isDark ? StatusBarStyle.Dark : StatusBarStyle.Light,
+        style: isDark ? Style.Dark : Style.Light,
       });
     } catch {}
   };
@@ -70,7 +63,7 @@ const Menu = () => {
       </IonHeader>
       <IonContent>
         <IonList>
-          {pages.map(p => (
+          {pages.map((p, k) => (
             <IonMenuToggle autoHide={false}>
               <IonItem routerLink={p.url} routerDirection="none" detail={false} lines="none">
                 <IonIcon icon={p.icon} slot="start" />

components/pages/Feed.jsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Card from '../ui/Card';
 
 import {
@@ -19,15 +20,17 @@ import Store from '../../store';
 
 const FeedCard = ({ title, type, text, author, authorAvatar, image }) => (
   <Card className="my-4 mx-auto">
-    <div>
+    <div className="h-32 w-full relative">
-      <img className="rounded-t-xl h-32 w-full object-cover" src={image} />
+      <Image className="rounded-t-xl" objectFit="cover" src={image} alt="" layout='fill' />
     </div>
     <div className="px-4 py-4 bg-white rounded-b-xl dark:bg-gray-900">
       <h4 className="font-bold py-0 text-s text-gray-400 dark:text-gray-500 uppercase">{type}</h4>
       <h2 className="font-bold text-2xl text-gray-800 dark:text-gray-100">{title}</h2>
       <p className="sm:text-sm text-s text-gray-500 mr-1 my-3 dark:text-gray-400">{text}</p>
       <div className="flex items-center space-x-4">
-        <img src={authorAvatar} className="rounded-full w-10 h-10" />
+        <div className="w-10 h-10 relative">
+          <Image layout='fill' src={authorAvatar} className="rounded-full" alt="" />
+        </div>
         <h3 className="text-gray-500 dark:text-gray-200 m-l-8 text-sm font-medium">{author}</h3>
       </div>
     </div>

components/pages/ListDetail.jsx

@@ -19,7 +19,7 @@ import * as selectors from '../../store/selectors';
 const ListItems = ({ list }) => {
   return (
     <IonList>
-      {(list?.items || []).map(item => (
+      {(list?.items || []).map((item, key) => (
         <ListItemEntry list={list} item={item} />
       ))}
     </IonList>

ios/.gitignore

@@ -1,13 +1,9 @@
-# NPM renames .gitignore to .npmignore
-# In order to prevent that, we remove the initial "."
-# And the CLI then renames it
-
 App/build
 App/Pods
-App/public
 App/Podfile.lock
+App/App/public
+DerivedData
 xcuserdata
 
 # Cordova plugins for Capacitor
 capacitor-cordova-ios-plugins
-

ios/App/App.xcodeproj/project.pbxproj

@@ -26,7 +26,7 @@
 		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
 		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = SOURCE_ROOT; };
+		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
 		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
 		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
 		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
@@ -281,7 +281,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -332,7 +332,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
@@ -346,14 +346,13 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				DEVELOPMENT_TEAM = CTXHACVRPM;
 				INFOPLIST_FILE = App/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = com.partidodigital.app;
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
-				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "DEBUG USE_PUSH";
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 			};
@@ -365,13 +364,12 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				DEVELOPMENT_TEAM = CTXHACVRPM;
 				INFOPLIST_FILE = App/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				PRODUCT_BUNDLE_IDENTIFIER = com.partidodigital.app;
+				PRODUCT_BUNDLE_IDENTIFIER = com.example.app;
 				PRODUCT_NAME = "$(TARGET_NAME)";
-				SWIFT_ACTIVE_COMPILATION_CONDITIONS = USE_PUSH;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 			};

ios/App/App/AppDelegate.swift

@@ -4,71 +4,57 @@ import Capacitor
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
 
-  var window: UIWindow?
+    var window: UIWindow?
 
-
+    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
-  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
+        // Override point for customization after application launch.
-    // Override point for customization after application launch.
+        return true
-    return true
-  }
-
-  func applicationWillResignActive(_ application: UIApplication) {
-    // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
-    // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
-  }
-
-  func applicationDidEnterBackground(_ application: UIApplication) {
-    // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
-    // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
-  }
-
-  func applicationWillEnterForeground(_ application: UIApplication) {
-    // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
-  }
-
-  func applicationDidBecomeActive(_ application: UIApplication) {
-    // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
-  }
-
-  func applicationWillTerminate(_ application: UIApplication) {
-    // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
-  }
-
-  func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
-    // Called when the app was launched with a url. Feel free to add additional processing here,
-    // but if you want the App API to support tracking app url opens, make sure to keep this call
-    return CAPBridge.handleOpenUrl(url, options)
-  }
-  
-  func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-    // Called when the app was launched with an activity, including Universal Links.
-    // Feel free to add additional processing here, but if you want the App API to support
-    // tracking app url opens, make sure to keep this call
-    return CAPBridge.handleContinueActivity(userActivity, restorationHandler)
-  }
-
-  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
-    super.touchesBegan(touches, with: event)
-
-    let statusBarRect = UIApplication.shared.statusBarFrame
-    guard let touchPoint = event?.allTouches?.first?.location(in: self.window) else { return }
-
-    if statusBarRect.contains(touchPoint) {
-      NotificationCenter.default.post(CAPBridge.statusBarTappedNotification)
     }
-  }
 
-  #if USE_PUSH
+    func applicationWillResignActive(_ application: UIApplication) {
+        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
+        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
+    }
 
-  func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
+    func applicationDidEnterBackground(_ application: UIApplication) {
-    NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: deviceToken)
+        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
-  }
+        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
+    }
 
-  func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
+    func applicationWillEnterForeground(_ application: UIApplication) {
-    NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error)
+        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
-  }
+    }
 
-#endif
+    func applicationDidBecomeActive(_ application: UIApplication) {
+        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
+    }
+
+    func applicationWillTerminate(_ application: UIApplication) {
+        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
+    }
+
+    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
+        // Called when the app was launched with a url. Feel free to add additional processing here,
+        // but if you want the App API to support tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
+    }
+
+    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
+        // Called when the app was launched with an activity, including Universal Links.
+        // Feel free to add additional processing here, but if you want the App API to support
+        // tracking app url opens, make sure to keep this call
+        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+
+    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+        super.touchesBegan(touches, with: event)
+
+        let statusBarRect = UIApplication.shared.statusBarFrame
+        guard let touchPoint = event?.allTouches?.first?.location(in: self.window) else { return }
+
+        if statusBarRect.contains(touchPoint) {
+            NotificationCenter.default.post(name: .capacitorStatusBarTapped, object: nil)
+        }
+    }
 
 }
-

ios/App/App/Info.plist

@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>en</string>
 	<key>CFBundleDisplayName</key>
-	<string>nextjs-tailwind-capacitor</string>
+        <string>nextjs-tailwind-capacitor</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -18,17 +18,6 @@
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
 	<string>1.0</string>
-	<key>CFBundleURLTypes</key>
-	<array>
-		<dict>
-			<key>CFBundleURLName</key>
-			<string>com.getcapacitor.capacitor</string>
-			<key>CFBundleURLSchemes</key>
-			<array>
-				<string>capacitor</string>
-			</array>
-		</dict>
-	</array>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
@@ -38,18 +27,6 @@
 		<key>NSAllowsArbitraryLoads</key>
 		<true/>
 	</dict>
-	<key>NSCameraUsageDescription</key>
-	<string>To Take Photos and Video</string>
-	<key>NSLocationAlwaysUsageDescription</key>
-	<string>Always allow Geolocation?</string>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string>Allow Geolocation?</string>
-	<key>NSMicrophoneUsageDescription</key>
-	<string>To Record Audio With Video</string>
-	<key>NSPhotoLibraryAddUsageDescription</key>
-	<string>Store camera photos to camera</string>
-	<key>NSPhotoLibraryUsageDescription</key>
-	<string>To Pick Photos from Library</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIMainStoryboardFile</key>

ios/App/App/capacitor.config.json

@@ -1,13 +1,16 @@
 {
-  "appId": "com.example.app",
+	"appId": "com.example.app",
-  "appName": "nextjs-tailwind-capacitor",
+	"appName": "nextjs-tailwind-capacitor",
-  "bundledWebRuntime": false,
+	"bundledWebRuntime": false,
-  "npmClient": "npm",
+	"npmClient": "npm",
-  "webDir": "out",
+	"webDir": "out",
-  "plugins": {
+	"plugins": {
-    "SplashScreen": {
+		"SplashScreen": {
-      "launchShowDuration": 0
+			"launchShowDuration": 0
-    }
+		}
-  },
+	},
-  "cordova": {}
+	"cordova": {},
+	"server": {
+		"url": "http://192.168.1.123:3000"
+	}
 }

ios/App/Podfile

@@ -1,4 +1,4 @@
-platform :ios, '11.0'
+platform :ios, '12.0'
 use_frameworks!
 
 # workaround to avoid Xcode caching of Pods that requires
@@ -7,11 +7,9 @@ use_frameworks!
 install! 'cocoapods', :disable_input_output_paths => true
 
 def capacitor_pods
-  # Automatic Capacitor Pod dependencies, do not delete
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorDarkMode', :path => '../../node_modules/capacitor-dark-mode'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
-  # Do not delete
 end
 
 target 'App' do

next.config.js

@@ -1,3 +1,6 @@
 module.exports = {
-  basePath: ''
+  basePath: '',
+  images: {
+    domains: ['images.unsplash.com'],
+  },
 };

package.json

@@ -2,6 +2,9 @@
   "name": "nextjs-tailwind-capacitor",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=12"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -9,28 +12,30 @@
     "export": "next export"
   },
   "dependencies": {
-    "@capacitor/android": "^2.4.6",
+    "@capacitor/android": "^3.0.1",
-    "@capacitor/cli": "^2.4.5",
+    "@capacitor/cli": "^3.0.1",
-    "@capacitor/core": "^2.4.5",
+    "@capacitor/core": "^3.0.1",
-    "@capacitor/ios": "^2.4.5",
+    "@capacitor/ios": "^3.0.1",
+    "@capacitor/status-bar": "^1.0.1",
     "@ionic/react": "^5.5.2",
     "@ionic/react-router": "^5.5.2",
-    "autoprefixer": "^10.1.0",
+    "autoprefixer": "^10.2.6",
-    "capacitor-dark-mode": "^1.0.5",
     "classnames": "^2.2.6",
-    "next": "10.0.3",
+    "next": "^11.0.0",
-    "postcss": "^8.2.1",
+    "postcss": "^8.3.5",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-router-dom": "^5.2.0",
     "react-virtuoso": "^1.1.1",
-    "tailwindcss": "^2.0.2"
+    "tailwindcss": "^2.1.4"
   },
   "devDependencies": {
+    "eslint": "^7.28.0",
+    "eslint-config-next": "^11.0.0",
     "ionicons": "^5.2.3",
     "prettier": "^2.2.1",
     "pullstate": "^1.20.5",
-    "react-use-gesture": "^9.0.0-beta.11",
+    "react-use-gesture": "^9.1.3",
     "reselect": "^4.0.0"
   }
 }

pages/_app.js

@@ -1,4 +1,5 @@
 import Head from 'next/head';
+import Script from 'next/script';
 
 import 'tailwindcss/tailwind.css';
 import '@ionic/react/css/core.css';
@@ -20,9 +21,9 @@ function MyApp({ Component, pageProps }) {
           name="viewport"
           content="width=device-width, initial-scale=1.0, viewport-fit=cover"
         ></meta>
-        <script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></script>
       </Head>
       <Component {...pageProps} />
+      <Script src="https://unpkg.com/ionicons@5.2.3/dist/ionicons.js"></Script>
     </>
   );
 }