Init

.gitignore

@@ -0,0 +1,3 @@
+.DS_Store
+yarn.lock
+node_modules/

App.js

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { WebView } from 'react-native-webview'
+import { StatusBar } from 'expo-status-bar';
+
+const Tab = createMaterialTopTabNavigator();
+
+
+export default function App() {
+
+
+  const [tabs, setTabs] = React.useState([
+      {
+        name : "tab-1",
+        component : TabScreen,
+      }
+  ])
+
+
+  const addNewTab = () => {
+    setTabs(tabs => [
+      ...tabs,
+      {
+        name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
+        component : TabScreen,
+      }
+    ])
+  }
+
+
+  const remove = (route) => {
+    setTabs(tabs => tabs.filter(tab => tab.name !== route.name))
+  }
+
+
+  function TabScreen({route}) {
+    return (
+      <SafeAreaView style={S.container}>
+        <WebView
+          onError={() => Alert.alert("Page failed to load", "The page you're trying to view has failed to load. Either caused by a connection error or the a server-side issue.", [{text: 'OK'}])}
+          source={{ uri: 'https://design.penpot.app' }}
+          javaScriptEnabled={true}
+          javaScriptEnabledAndroid={true}
+          onMessage={(event) => {}}
+          scalesPageToFit={false}
+          allowsBackForwardNavigationGestures
+        />
+        <Button
+          title="Add a new tab"
+          style={S.AddButton}
+          onPress={addNewTab}
+        ></Button>
+        {
+          route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>
+        }
+      </SafeAreaView>
+    );
+  }
+
+  const S = StyleSheet.create({
+    container: {
+      flex: 1,
+      position: 'relative'
+    },
+    AddButton: {
+      position: 'absolute',
+      bottom: 0,
+      right: 0, 
+      left: 0,
+      height: 100,
+      borderWidth: 2,
+      borderColor: 'blue',
+      backgroundColor: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }
+  })
+
+  return (
+    <NavigationContainer>
+      <Tab.Navigator styles={S.Tab}>
+        {
+          tabs.map(tab => <Tab.Screen
+            key={tab.name}
+            name={tab.name}
+            component={tab.component}
+            options={{
+              headerTitle: (props) => <LogoTitle {...props} />,
+              headerRight: () => (
+                <Button
+                  onPress={() => alert('This is a button!')}
+                  title="Info"
+                  color="#fff"
+                />
+              ),
+            }}
+          />)
+        }
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

README.md

@@ -1,2 +1,16 @@
 # Penpot-App
+> In progress
 
+The app is currently being developed for Android at the moment, iPadOS support is planned.
+
+Tested on OnePlus Tab.
+
+## Building
+### Requirements
+ - Android SDK
+ - Expo
+ - Expo Go (On Android/iOS device)
+ - NodeJS
+
+### Running App
+Simply connect your Android tablet and run `npm start`, then using the Expo Go app scan the QR code.

app.json

@@ -0,0 +1,42 @@
+{
+  "expo": {
+    "name": "penpot-app",
+    "slug": "penpot-app",
+    "owner": "sudovanilla",
+    "version": "0.0.1",
+    "orientation": "landscape",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "dark",
+    "githubUrl": "https://sudovanilla.com/code/Korbs/Penpot-App/",
+    "platforms": [
+      "android"
+    ],
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#FFF"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFF"
+      },
+      "package": "com.sudovanilla.penpotapp"
+    },
+    "androidStatusBar": {
+      "backgroundColor": "#000",
+      "translucent": false
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "9f3d77d2-68f6-463f-909f-cb600ef6eeac"
+      }
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

eas.json

@@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 3.13.2"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "penpot-app",
+  "version": "0.0.1",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios"
+  },
+  "dependencies": {
+    "@react-navigation/material-top-tabs": "^6.6.2",
+    "@react-navigation/native": "^6.1.6",
+    "expo": "~48.0.18",
+    "expo-status-bar": "~1.4.4",
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-floating-action": "^1.22.0",
+    "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"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}