diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..cf8765e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+yarn.lock
+node_modules/
\ No newline at end of file
diff --git a/App.js b/App.js
new file mode 100755
index 0000000..b3f74c8
--- /dev/null
+++ b/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 (
+
+ 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
+ />
+
+ {
+ route.name !== "tab-1" && remove(route)}>close me
+ }
+
+ );
+ }
+
+ 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 (
+
+
+ {
+ tabs.map(tab => ,
+ headerRight: () => (
+
+
+ );
+}
diff --git a/README.md b/README.md
index e202513..9903cc2 100644
--- a/README.md
+++ b/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.
\ No newline at end of file
diff --git a/app.json b/app.json
new file mode 100755
index 0000000..7675783
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+}
diff --git a/assets/adaptive-icon.png b/assets/adaptive-icon.png
new file mode 100644
index 0000000..8e0dabe
Binary files /dev/null and b/assets/adaptive-icon.png differ
diff --git a/assets/favicon.png b/assets/favicon.png
new file mode 100644
index 0000000..816018d
Binary files /dev/null and b/assets/favicon.png differ
diff --git a/assets/icon.png b/assets/icon.png
new file mode 100644
index 0000000..8e0dabe
Binary files /dev/null and b/assets/icon.png differ
diff --git a/assets/splash.png b/assets/splash.png
new file mode 100644
index 0000000..d25dd2b
Binary files /dev/null and b/assets/splash.png differ
diff --git a/babel.config.js b/babel.config.js
new file mode 100755
index 0000000..2900afe
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function(api) {
+ api.cache(true);
+ return {
+ presets: ['babel-preset-expo'],
+ };
+};
diff --git a/eas.json b/eas.json
new file mode 100644
index 0000000..c1be9ad
--- /dev/null
+++ b/eas.json
@@ -0,0 +1,18 @@
+{
+ "cli": {
+ "version": ">= 3.13.2"
+ },
+ "build": {
+ "development": {
+ "developmentClient": true,
+ "distribution": "internal"
+ },
+ "preview": {
+ "distribution": "internal"
+ },
+ "production": {}
+ },
+ "submit": {
+ "production": {}
+ }
+}
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..ef980ce
--- /dev/null
+++ b/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
+}