update

App.js

@@ -1,11 +1,11 @@
 // Import Stuff
 /// React Native
 import * as React from 'react'
-import { useState } from "react";
+import { useState } from "react"
 import { Alert, AsyncStorage, Text, TextInput, UseState, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { WebView } from 'react-native-webview'
-import Modal from "react-native-modal";
+import Modal from "react-native-modal"
 
 /// React Native Navigation
 import { NavigationContainer } from '@react-navigation/native'
@@ -26,35 +26,10 @@ const Tab = createMaterialTopTabNavigator()
 
 let InstanceURL = 'https://design.penpot.app/'
 
-_storeData = async () => {
-  try {
-    await AsyncStorage.setItem(
-      'I like to save it.',
-    );
-  } catch (error) {
-    // Error saving data
-  }
-};
-
-_retrieveData = async () => {
-  try {
-    const value = await AsyncStorage.getItem('TASKS');
-    if (value !== null) {
-      // We have data!!
-      console.log(value);
-    }
-  } catch (error) {
-    // Error retrieving data
-  }
-};
-
 // App
 export default function App() {
-  const [isModalVisible, setModalVisible] = useState(false);
+  const [isModalVisible, setModalVisible] = useState(false)
-
+  const ToggleSettingModal = () => {setModalVisible(!isModalVisible)}
-  const ToggleSettingModal = () => {
-    setModalVisible(!isModalVisible);
-  };
 
   const [tabs, setTabs] = React.useState([
       {
@@ -64,7 +39,7 @@ export default function App() {
   ])
   const addNewTab = () => {
     setTabs(tabs => [
-      ...tabs,
+      tabs,
       {
         name : "" + (parseInt(tabs.pop().name.replace("", "")) + 1),
         component : TabScreen,
@@ -73,15 +48,30 @@ export default function App() {
   }
   const remove = (route) => {setTabs(tabs => tabs.filter(tab => tab.name !== route.name))}
 
+  function Loading() {
+    return (
+      <View>
+        <Text>Loading</Text>
+      </View>
+    )
+  }
+
   function TabScreen({route}) {
     return (
       <SafeAreaView style={Styles.Container}>
         <WebView
-          onError={() => Alert.alert("Something went wrong", "The page you are trying to load has either crashed or there is no connection. Please check your Instance setting to make sure the URL is correct.", [{text: 'OK'}])}
+          onError={(syntheticEvent) => {const { nativeEvent } = syntheticEvent}}
+          renderError={() => Alert.alert("Something went wrong", "The page you are trying to load has either crashed or there is no connection. Please check your Instance setting to make sure the URL is correct.", [{text: 'OK'}])}
+          renderLoading={() => <Loading />}
+          startInLoadingState={true}
           source={{ uri: InstanceURL }}
           javaScriptEnabled={true}
           javaScriptEnabledAndroid={true}
           scalesPageToFit={false}
+          bounces={false}
+          pullToRefreshEnabled={false}
+          contentMode={'desktop'}
+          androidLayerType={'software'}
           allowsBackForwardNavigationGestures
           style={{backgroundColor: '#202020'}}
         />
@@ -130,7 +120,7 @@ export default function App() {
           <TextInput
             style={Styles.InstanceForm}
             type="text"
-            // onChange={(e) => SetInstance(e.target.value)}
+            onChange={(e) => SetInstance(e.target.value)}
             placeholder="https://design.penpot.app/"
             aria-label="InstanceURL"
           />
@@ -140,7 +130,6 @@ export default function App() {
           </View>
         </View>
       </Modal>
-
     </NavigationContainer>
   )
 }

app.json

@@ -5,7 +5,6 @@
     "owner": "sudovanilla",
     "version": "0.0.1",
     "icon": "./assets/icon.png",
-    "githubUrl": "https://sudovanilla.com/code/Korbs/Penpot-App/",
     "userInterfaceStyle": "automatic",
     "scheme": "penpot",
     "orientation": "landscape",
@@ -44,6 +43,9 @@
       "eas": {
         "projectId": "9f3d77d2-68f6-463f-909f-cb600ef6eeac"
       }
+    },
+    "updates": {
+      "url": "https://u.expo.dev/9f3d77d2-68f6-463f-909f-cb600ef6eeac"
     }
   }
 }

eas.json

@@ -1,26 +1,20 @@
 {
   "cli": {
-    "version": ">= 3.13.2"
+    "version": ">= 3.13.2",
+    "promptToConfigurePushNotifications": false
   },
   "build": {
-    "development-simulator": {
-      "extends": "production",
-      "developmentClient": true,
-      "distribution": "internal",
-      "ios": {
-        "simulator": true
-      }
-    },
-    "development": {
-      "developmentClient": true,
-      "distribution": "internal"
-    },
     "preview": {
       "distribution": "internal"
     },
     "production": {}
   },
   "submit": {
-    "production": {}
+    "production": {
+      "ios": {
+        "appleId": "ks@korbsstudio.com",
+        "appleTeamId": "F2M4QF2K4L"
+      }
+    }
   }
 }

options/TabOptions.js

@@ -1,42 +1,42 @@
 import * as React from 'react'
 import {StyleSheet} from 'react-native'
 export default screenOptions = {
-    lazy: true,
+  lazy: true,
-    swipeEnabled: false,
+  swipeEnabled: false,
-    tabBarGap: 10,
+  tabBarGap: 10,
-    activeTintColor: "#FFF",
+  activeTintColor: "#FFF",
-    inactiveTintColor: "gray",
+  inactiveTintColor: "gray",
-    tabBarIndicatorStyle: {
+  tabBarIndicatorStyle: {
-      backgroundColor: '#202020',
+    backgroundColor: '#202020',
-      height: 40,
+    height: 40,
-      top: 4,
+    top: 4,
-      margin: 0,
+    margin: 0,
-      borderRadius: 10,
+    borderRadius: 10,
-      marginLeft: 6
+    marginLeft: 6
-    },
+  },
-    tabBarStyle:{
+  tabBarStyle:{
-      backgroundColor:'#303236',
+    backgroundColor:'#303236',
-      width: "auto",
+    width: "auto",
-      height: 48,
+    height: 48,
-      paddingLeft: 6
+    paddingLeft: 6
-    },
+  },
-    labelStyle: {
+  labelStyle: {
-      fontSize: 10,
+    fontSize: 10,
-      margin: 0,
+    margin: 0,
-      padding: 0,
+    padding: 0,
-    },
+  },
-    tabBarItemStyle:{
+  tabBarItemStyle:{
-      alignSelf: 'stretch',
+    alignSelf: 'stretch',
-      color: 'white',
+    color: 'white',
-      backgroundColor: 'rgba(0, 0, 0, 0)',
+    backgroundColor: 'rgba(0, 0, 0, 0)',
-      textAlign: 'left',
+    textAlign: 'left',
-      paddingHorizontal: 0,
+    paddingHorizontal: 0,
-      position: 'relative',
+    position: 'relative',
-      width: 160,
+    width: 160,
-    },
+  },
-    tabBarLabelStyle: {
+  tabBarLabelStyle: {
-      fontSize: 10,
+    fontSize: 10,
-      color: 'white',
+    color: 'white',
-      textAlign: 'left'
+    textAlign: 'left'
-    }
+  }
 }

package.json

@@ -9,19 +9,18 @@
   "dependencies": {
     "@react-navigation/material-top-tabs": "^6.6.2",
     "@react-navigation/native": "^6.1.6",
-    "expo": "~48.0.18",
+    "expo": "~48.0.0",
-    "expo-dev-client": "~2.2.1",
     "expo-splash-screen": "~0.18.2",
     "expo-status-bar": "~1.4.4",
     "expo-system-ui": "~2.2.1",
+    "expo-updates": "~0.16.4",
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-modal": "^13.0.1",
-    "react-native-pager-view": "^6.2.0",
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-tab-view": "^3.5.1",
-    "react-native-webview": "^12.2.0"
+    "react-native-webview": "11.26.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"