Add settings (Not functional yet)

App.js

@@ -1,9 +1,11 @@
 // Import Stuff
 /// React Native
 import * as React from 'react'
-import { Text } from 'react-native'
+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";
 
 /// React Native Navigation
 import { NavigationContainer } from '@react-navigation/native'
@@ -22,11 +24,41 @@ import Styles from './stylesheets/style'
 SystemUI.setBackgroundColorAsync("black")
 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 ToggleSettingModal = () => {
+    setModalVisible(!isModalVisible);
+  };
+
   const [tabs, setTabs] = React.useState([
       {
-        name : "tab-1",
+        name : "1",
         component : TabScreen,
       }
   ])
@@ -34,7 +66,7 @@ export default function App() {
     setTabs(tabs => [
       ...tabs,
       {
-        name : "tab-" + (parseInt(tabs.pop().name.replace("tab-", "")) + 1),
+        name : "" + (parseInt(tabs.pop().name.replace("", "")) + 1),
         component : TabScreen,
       }
     ])
@@ -45,12 +77,13 @@ export default function App() {
     return (
       <SafeAreaView style={Styles.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' }}
+          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'}])}
+          source={{ uri: InstanceURL }}
           javaScriptEnabled={true}
           javaScriptEnabledAndroid={true}
-          scalesPageToFit={false} // Too big if set to true
+          scalesPageToFit={false}
           allowsBackForwardNavigationGestures
+          style={{backgroundColor: '#202020'}}
         />
       </SafeAreaView>
     )
@@ -80,6 +113,34 @@ export default function App() {
         style={Styles.AddButton}
         onPress={addNewTab}
       >+</Text>
+      <Text
+        style={Styles.SettingButton}
+        onPress={ToggleSettingModal}
+      >Settings</Text>
+      
+      <Modal
+      animationIn={'fadeIn'}
+      animationOut={'fadeOut'}
+      isVisible={isModalVisible}
+      onBackButtonPress={ToggleSettingModal}
+      onBackdropPress={ToggleSettingModal}
+      >
+        <View style={Styles.Settings}>
+          <Text>Instance</Text>
+          <TextInput
+            style={Styles.InstanceForm}
+            type="text"
+            // onChange={(e) => SetInstance(e.target.value)}
+            placeholder="https://design.penpot.app/"
+            aria-label="InstanceURL"
+          />
+          <View style={{flexDirection:"row", alignSelf: 'flex-end'}}>
+            <Text style={Styles.InstanceCancel} onPress={ToggleSettingModal}>Cancel</Text>
+            <TextInput style={Styles.InstanceSubmit} type="submit" value="Submit"></TextInput>
+          </View>
+        </View>
+      </Modal>
+
     </NavigationContainer>
   )
 }

stylesheets/style.js

@@ -35,6 +35,60 @@ export default StyleSheet.create({
       marginTop: 4,
       marginRight: 80
     },
+    SettingButton: {
+      position: 'absolute',
+      color: 'white',
+      backgroundColor: '#202020',
+      right: 42,
+      height: 36,
+      width: 92,
+      fontSize: 14,
+      display: 'flex',
+      textAlign: 'center',
+      textAlignVertical: "center",
+      borderRadius: 50,
+      marginTop: 6,
+      marginRight: 12
+    },
+    Settings: {
+      position: 'absolute',
+      backgroundColor: 'white',
+      top: 0,
+      right: 0,
+      height: 140,
+      width: 350,
+      fontSize: 14,
+      display: 'flex',
+      borderRadius: 10,
+      padding: 12
+    },
+    InstanceForm: {
+      backgroundColor: 'lightgray',
+      color: 'black',
+      borderRadius: 4,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      marginTop: 6
+    },
+    InstanceCancel: {
+      backgroundColor: '#EEE',
+      color: 'black',
+      borderRadius: 4,
+      marginTop: 12,
+      marginRight: 12,
+      paddingHorizontal: 24,
+      paddingVertical: 10,
+      alignSelf: 'flex-end'
+    },
+    InstanceSubmit: {
+      backgroundColor: '#31efb8',
+      color: 'black',
+      borderRadius: 4,
+      marginTop: 12,
+      paddingHorizontal: 24,
+      paddingVertical: 6,
+      alignSelf: 'flex-end'
+    },
     Tab: {
       display: 'flex',
       backgroundColor: 'black'