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: () => ( +