85 lines
2.4 KiB
JavaScript
Executable file
85 lines
2.4 KiB
JavaScript
Executable file
// Import Stuff
|
|
/// React Native
|
|
import * as React from 'react'
|
|
import { Text } from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { WebView } from 'react-native-webview'
|
|
|
|
/// React Native Navigation
|
|
import { NavigationContainer } from '@react-navigation/native'
|
|
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs'
|
|
|
|
/// Expo Modules
|
|
import * as SystemUI from 'expo-system-ui'
|
|
|
|
/// Options
|
|
import ScreenOptions from './options/TabOptions'
|
|
|
|
/// Stylesheets
|
|
import Styles from './stylesheets/style'
|
|
|
|
// Others
|
|
SystemUI.setBackgroundColorAsync("black")
|
|
const Tab = createMaterialTopTabNavigator()
|
|
|
|
// App
|
|
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={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' }}
|
|
javaScriptEnabled={true}
|
|
javaScriptEnabledAndroid={true}
|
|
scalesPageToFit={false} // Too big if set to true
|
|
allowsBackForwardNavigationGestures
|
|
/>
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<NavigationContainer>
|
|
<Tab.Navigator
|
|
optimizationsEnabled={true}
|
|
backBehavior='none'
|
|
keyboardDismissMode='none'
|
|
screenOptions={{
|
|
tabBarGap: 10,
|
|
tabBarAndroidRipple: { borderless: false },
|
|
}}
|
|
{...{ screenOptions }}>
|
|
{
|
|
tabs.map(tab => <Tab.Screen
|
|
key={tab.name}
|
|
name={tab.name}
|
|
component={tab.component}
|
|
/>)
|
|
}
|
|
</Tab.Navigator>
|
|
{/* {route.name !== "tab-1" && <Text onPress={() => remove(route)}>close me</Text>} */}
|
|
<Text
|
|
style={Styles.AddButton}
|
|
onPress={addNewTab}
|
|
>+</Text>
|
|
</NavigationContainer>
|
|
)
|
|
}
|